Flutter의 머티리얼 배너

배너는 화면 상단, 상단 앱 바 아래에 표시되어야 합니다. 그것들은 지속적이고 비모달적이어서 사용자가 언제든지 무시하거나 상호 작용할 수 있습니다. 한 번에 하나의 배너만 표시되어야 합니다.

배너 란 무엇입니까?

배너는 중요하고 간결한 메시지를 표시하고 사용자가 처리(또는 배너 해제)할 작업을 제공합니다. 해제하려면 사용자 작업이 필요합니다.

출처: Material.io

이렇게 배너를 만들자

이것은 실제로 이 기사의 끝에서 만들 것입니다. 에너지를 충전하고 시작하겠습니다.

소재 배너

class BannerScreen extends StatefulWidget {
  @override
  _BannerScreenState createState() => _BannerScreenState();
}

class _BannerScreenState extends State<BannerScreen> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: kPrimaryColor,
        title: Text("Material Banner"),
        centerTitle: false,
      ),
      body: SafeArea(
          child: Column(
        children: [
            MaterialBanner(
              leading: CircleAvatar(
                backgroundColor: kPrimaryColor,
                child: Icon(
                  Icons.subscriptions,
                  color: Colors.white,
                ),
              ),
              content: Padding(
                padding: const EdgeInsets.all(4.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('WEEKLY RUNDOWN:',style: kHeadlineLabelStyle),
                    Padding(
                      padding: const EdgeInsets.only(top: 4.0),
                      child: Text('''
                    The case for a six-hour workday, An office model that suits everyone?, and other top news for you''',
                          style: kBodyTextStyle.copyWith(color: Colors.black)),
                    ),
                  ],
                ),
              ),
              actions: [
                FlatButton(
                  child: Text(
                    'DISMISS',
                    style: kActionTextStyle,
                  ),
                  onPressed: () {
                    // Dissmiss Function
                  },
                ),
                FlatButton(
                  child: Text('VIEW', style: kActionTextStyle),
                  onPressed: () {
                    // Custom implemention according to the banner.
                  },
                ),
              ],
            ),
          Spacer(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                onPressed: () {
                  // Dissmiss Function
                },
                child: Text(
                  'Toggle Banner',
                  style: kActionTextStyle,
                ),
              ),
            ],
          ),
          Spacer(),
        ],
      )),
    );
  }
}

Stateful Widget를 만들고 이름을 BannerScreen로 지정하고 화면의 MaterialBanner에 column를 추가합니다.

MaterialBanner에는 @required 및 content의 두 가지actions 속성이 있습니다.

content는 배너에 대한 메시지/컨텍스트를 추가하는 곳입니다.

actions 여기에 버튼을 추가합니다. 하나는 배너를 닫는 것이고 다른 하나는 배너와 관련된 세부 작업입니다.

배너 상태 관리

bool showBanner = false;

배너의 모양을 관리하는 showBanner 속성을 선언하십시오.

if(showBanner)
MaterialBanner(...)

if가 showBanner

인 경우에만 배너를 표시하는 이 true 조건을 배너 앞에 작성하십시오.

속성을 선언했지만 속성을 변경하기 위해 구현하지 않았습니다.

배너 토글

  void _toggleBanner() {
    setState(() {
      showBanner = !showBanner;
    });
  }

_toggleBanner는 컨텍스트에 따라 showBanner 속성의 값을 변경하는 private 함수입니다.

이 기능을 Dismiss 버튼과 Toggle Banner 버튼에 추가하십시오.

배너 컨텍스트에 작용하는 MaterialBanner actions의 다른 버튼에 대한 사용자 정의 코드를 구현합니다.

결론

사용자에게 중요한 메시지를 전달해야 할 때 배너를 사용하고 알림을 사용합니다.

GitHub Link

앱 개발 기술을 향상시키고 싶다면 Flutter와 SwiftUI에서 더 많이 사용하세요. 추가 팁이나 피드백이 있으면 언제든지 저에게 dm이나 트윗을 보내주십시오.

읽어 주셔서 감사합니다!