BackdropFilter를 사용하여 Flutter에서 흐림 배경 이미지 효과를 만드는 방법. fluttercorner.com

안녕 얘들아 잘 지내니? 모두 괜찮으시기 바랍니다. 오늘 우리는 Flutter에서 Container에 Border Radius를 추가하는 방법을 배울 것입니다.



BackdropFilter를 사용하여 Flutter에서 흐림 배경 이미지 효과를 만드는 방법은 무엇입니까? BackdropFilter Widget은 이미지에 놀라운 ImageFilter 효과를 제공하는 데 사용됩니다. 전체를 사용하여 배경 흐림을 사용할 수도 있습니다. 이미지 자식에 BackdropFilter를 사용하고 ImageFilter 효과로 필터링하도록 지정하십시오. 따라서 yolur 시간을 낭비하지 않고 이 기사를 시작하겠습니다.

BackdropFilter를 사용하여 Flutter에서 흐림 배경 이미지 효과를 만드는 방법.
BackdropFilter를 사용하여 Flutter에서 흐림 배경 이미지 효과를 만드는 방법.
우선 main.dart 파일에서 material.dart를 가져옵니다.
import '패키지:flutter/material.dart';
그런 다음 runApp에서 void main을 만들고 MyApp을 정의합니다.

void main() {
  runApp(MyApp());
}

이제 Stateless 위젯으로 확장되는 MyApp이라는 클래스를 만듭니다. 이것은 우리의 주요 View 클래스입니다. 그리고 정의

class MyApp extends StatelessWidget {

}

그런 다음 MyApp Widget에서 Scaffold를 만든 후. Scaffold는 모든 Flutter 앱의 기반이며, Scaffold는 앱바, 배경색, 서랍, 본문, 바텀시트 등을 제공합니다.

우리는 우리 몸에 센터 위젯이 필요하므로 본문에 센터 위젯을 추가하십시오.

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Blur Image in Flutter - Fluttercorner'),
        ),
        body: Center(),
      ),
    );
  }
}

Flutter에서 배경 이미지를 스캐폴드로 설정하는 방법도 읽어보세요.

그런 다음 BoxDecoration으로 Container in Center 위젯을 만들고 boxDecoration에서 DecorationImage를 사용할 것입니다.

decoration: BoxDecoration(
    image: DecorationImage(
       image: NetworkImage(
             "https://images.pexels.com/photos/707915/pexels-photo-707915.jpeg"),
            fit: BoxFit.cover),
 ),

네트워크 이미지를 배경으로 사용하고 있습니다.
그런 다음 기본 컨테이너에서 BackdropFilter를 자식으로 사용합니다.
BackdropFilter에는 필터 속성이 있어 흐림 효과가 있는 ImageFilter를 제공합니다.

            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
            )

붐, 이제 이미지에 흐림 효과가 적용되었습니다.
다음은 내 main.dart 전체 소스 코드입니다.

How to make a blur Background Image effect in Flutter using BackdropFilter.