Flutter 조금 Tips ~ 화면 위에 팝업을 표시 ~

화면 위에 팝업적인 것을 표시하고 싶습니다.



화면 아래에 표시하고 싶다면 하단 시트가 있으므로 좋다고 생각합니다.

BottomSheet class
htps : // 아피. fぅ r. 에서 v/fぅ는 r/마테리아 l/헛 m ぇ에 t-cぁ s. HTML

그렇지 않고, 이 손의 것을 「위에 내고 싶다!」라고 할 때 어떻게 하면 좋을까 하는 이야기입니다.
검색해도 의외로 발견되지 않았기 때문에, 만들었습니다.
(Material Design적으로 위로 내놓는 것은 어떨까?라는 이야기는 있을까 생각합니다만)

[2019/06/11 추가]
Material Design 에 「Banner」라고 하는 것이 있는 것을 가르쳐 주셨습니다.
htps : // 마테리아 l. 이오 / 데시 겐 / 코 m 포넨 ts / 반 rs. HTML
아래의 GIF 및 코드도 그에 따라 변경되었습니다.

↓ 이런, 상단에 무언가의 메시지를 내고, Close 버튼을 누르면 사라진다는 녀석입니다.


사고방식



대부분 진흙 냄새 만드는 방법하고 있습니다.
Scaffold의 Body 부분을
Stack
  → メイン表示部分(今回は Center(RaisedButton) だけ)
  → POP部分 (Container)
    → IconButton(Close ボタン)

라는 형태로,
  • POP 부분을 표시할지 어떨지를 결정하는 변수 _isTapClose를 만든다 (초기 값 false)
  • POP 부분은 _isTapClose가 false이면 IconButton을 포함하는 내용, true이면 Container () (빈 Container)입니다.
  • IconButton을 누르면 _isTapClose를 true로 설정하고 setState하여 StatefulWidget을 다시 그립니다.
  • (필요에 따라) 메인 표시 부분은 POP의 height 분만큼 위 방향으로 Margin 을 갖게 한다. _isTapClose 가 true 가 되면 Margin 의 값을 0 으로 한다. 이렇게하면 POP가 사라지면 메인 디스플레이 부분이 위로 이동합니다 (보인다).

    이런 처리가 되도록(듯이) StatefulWidget 를 만들었을 뿐입니다.

    코드


    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      bool _isTapClose = false;
    
      void _onTapCloseButton() {
        setState(() {
          _isTapClose = true;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: Stack(
              children: <Widget>[
                Container(
                    margin: EdgeInsets.only(top: (_isTapClose ? 0.0 : 50.0)),
                    color: Colors.yellow,
                    child: getList()),
                (_isTapClose ? Container() : UpperPop()),
              ],
            ));
      }
    
      Widget UpperPop() {
        final TextStyle textStyle = TextStyle(fontSize: 20);
        final TextStyle textButtonStyle =
            TextStyle(fontSize: 20, color: Colors.blue);
        final Size displaySize = MediaQuery.of(context).size;
    
        return Container(
            height: (50),
            width: displaySize.width,
            child: Row(
              children: <Widget>[
                Expanded(child: Text('Upper Pop Test', style: textStyle)),
                FlatButton(
                  onPressed: () {
                    _onTapCloseButton();
                  },
                  child: Text(
                    "Close",
                    style: textButtonStyle,
                  ),
                ),
              ],
            ));
      }
    
      Widget getList() {
        return ListView(children: <Widget>[
          Text('Item'),
        ]);
      }
    }
    
    

    여기에서 발전



    그리고는 POP 부분이나 메인 부분에 좋아하는 Widget을 배치하면 됩니다.
    Stack 에 올려놓고 있는 이유는 메인 표시 부분이 목록처럼 스크롤하는 경우에 POP 부분이 함께 스크롤되지 않도록(화면에 고정되어 있도록)하기 때문입니다.
    애니메이션을 사용하여 POP 부분이 위로 넉넉히 사라지게 하는 것도 간단하게 할 수 있을 것 같다.
  • 좋은 웹페이지 즐겨찾기