如何使任何行固定在屏幕底部颤动？答案

【问题标题】：How to make any row fixed at the bottom of screen in flutter?如何使任何行固定在屏幕底部颤动？
【发布时间】：2019-12-06 20:39:04
【问题描述】：

如何使这个突出显示的行在颤动中固定在屏幕底部？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

为了在底部得到一个固定的行，你可以像这样使用bottomSheet，

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            body: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Center(
                    child: Text('')
                  )
                  ),
          bottomSheet: Container(
            color: Colors.grey,
            height: 100.0,
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                    padding: EdgeInsets.only(left: 10.0),
                    child: Container(
                        height: 70.0,
                        child: FlatButton(
                          color: Colors.white,
                          child: Icon(Icons.search, color: Colors.grey,),
                          shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(18.0),
                          ),
                          onPressed: () {},
                        )
                    )
                ),
                Padding(
                  padding: EdgeInsets.only(left: 10.0, right: 10.0),
                    child: Container(
                      height: 70.0,
                      child: FlatButton(
                        color: Colors.white,
                        child: Icon(Icons.shopping_basket, color: Colors.grey,),
                        shape: RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(18.0),
                        ),
                        onPressed: () {},
                      )
                    )
                ),
                Padding(
                  padding: EdgeInsets.only(right: 10.0),
                    child: Container(
                      height: 70.0,
                      child: FlatButton(
                        color: Colors.black,
                        child: Text('Checkout', style: TextStyle(color: Colors.white, fontSize: 18.0),),
                        shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(18.0),
                        ),
                        onPressed: () {},
                      )
                    )
                )
              ],
            ),
          ),
            )
            );
  }

}

截图：

【讨论】：

【解决方案2】：

您也可以使用底部应用栏来制作屏幕底部的应用栏。它也固定在屏幕底部。

bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: new Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.menu),
          color: Colors.white,
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.search),
          color: Colors.white,
          onPressed: () {},
        ),
      ],
    ),
    color: Colors.blueGrey,
  ),

【讨论】：