通过此简单代码,我可以在屏幕底部显示对话框,如以下
但是我有三个简单的问题:
完整的源代码:
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> { void showPopup() { showDialog( context: context, builder: (_) => PopUp(), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: showPopup, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } } class PopUp extends StatefulWidget { @override State<StatefulWidget> createState() => PopUpState(); } class PopUpState extends State<PopUp> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> opacityAnimation; Tween<double> opacityTween = Tween<double>(begin: 0.0, end: 1.0); Tween<double> marginTopTween = Tween<double>(begin: 300, end: 280); Animation<double> marginTopAnimation; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(milliseconds: 300), vsync: this); marginTopAnimation = marginTopTween.animate(controller) ..addListener(() { setState(() {}); }); controller.forward(); } @override Widget build(BuildContext context) { return FadeTransition( opacity: opacityTween.animate(controller), child: Material( color: Colors.transparent, child: Container( margin: EdgeInsets.only( top: marginTopAnimation.value, left:20.0, right:20.0, ), color: Colors.red, child: Text("Container"), ), ), ); } @override void dispose() { controller.dispose(); super.dispose(); } }
Code:
floatingActionButton: FloatingActionButton( onPressed: () { showGeneralDialog( barrierLabel: "Label", barrierDismissible: true, barrierColor: Colors.black.withOpacity(0.5), transitionDuration: Duration(milliseconds: 700), context: context, pageBuilder: (context, anim1, anim2) { return Align( alignment: Alignment.bottomCenter, child: Container( height: 300, child: SizedBox.expand(child: FlutterLogo()), margin: EdgeInsets.only(bottom: 50, left: 12, right: 12), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(40), ), ), ); }, transitionBuilder: (context, anim1, anim2, child) { return SlideTransition( position: Tween(begin: Offset(0, 1), end: Offset(0, 0)).animate(anim1), child: child, ); }, ); }, )