Flutter 질감 디자인 의 지속 적 인 바닥 패 널

영구적 인 아래쪽 패 널 은 주요 내용 의 정 보 를 보충 하 는 데 사용 할 수 있 습 니 다.사용자 가 프로그램의 다른 컨트롤 과 상호작용 을 하 더 라 도 영구적 인 아래쪽 패 널 을 볼 수 있 습 니 다.Scaffold.showBottomSheet 함 수 를 사용 하여 지속 적 인 바닥 판 넬 을 만 들 고 표시 할 수 있 습 니 다.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
 @override
 _MyApp createState() => new _MyApp();
}
class _MyApp extends State<MyApp> {
 /**
 *GlobalKey：           
 ScaffoldState：Scaffold     
   ：_scaffoldKey   Scaffold        
 */
 final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

 // VoidCallback：              
 VoidCallback _showBottomSheetCallback;

 @override
 void initState() {
 super.initState();
 _showBottomSheetCallback = _showBottomSheet;
 }

 void _showBottomSheet() {
 setState(() {
  //     
  _showBottomSheetCallback = null;
 });
 /**
  *currentState：                
  showBottomSheet：              
    ：    ，_scaffoldKey Scaffold        ，       ，
    Scaffold                 
  */
 _scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context){
  final ThemeData themeData = Theme.of(context);
  return new Container(
  decoration: new BoxDecoration(
   border: new Border(top: new BorderSide(color: themeData.disabledColor))
  ),
  child: new Padding(
   padding: const EdgeInsets.all(32.0),
   child: new Text(
   '            ，          ',
   textAlign: TextAlign.center,
   style: new TextStyle(
    color: themeData.accentColor,
    fontSize: 24.0
   )
   )
  )
  );
 })
 /**
  *closed：                
  whenComplete：               
    ：    ，closed                  ，       ，
                   
  */
 .closed.whenComplete((){
  // mounted：bool ，  State         
  if (mounted) {
  setState(() {
   //       
   _showBottomSheetCallback = _showBottomSheet;
  });
  }
 });
 }

 void _showMessage() {
 // showDialog<T>：                
 showDialog<Null>(
  context: context,
  // AlertDialog：           
  child: new AlertDialog(
  // content：        ，              
  content: new Text('        '),
  // actions：             
  actions: <Widget>[
   // FlatButton：          
   new FlatButton(
   onPressed: () { Navigator.pop(context); },
   child: new Text('  ')
   )
  ]
  ),
 );
 }
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
  key: _scaffoldKey,
  appBar: new AppBar(
  title: new Text('    ')
  ),
  floatingActionButton: new FloatingActionButton(
  onPressed: _showMessage,
  backgroundColor: Colors.redAccent[200],
  child: new Icon(Icons.add)
  ),
  body: new Center(
  child: new RaisedButton(
   onPressed: _showBottomSheetCallback,
   child: new Text('      ')
  )
  )
 );
 }
}

void main() {
 runApp(new MaterialApp(
 title: 'Flutter Demo',
 home: new MyApp()
 ));
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.