どのようにフラッタの画面の下部にウィジェットを整列するには?


Align Widgetは子供自身をその中で整列させて、オプションで子供のサイズに基づいてそれ自体をサイズ設定するウィジェットです.今日の記事では、我々はどのように画面の下部にフラッタのウィジェットを配置する方法を通過しますか?
どのようにフラッタの画面の下部にウィジェットを整列するには?
一つの方法は以下の通りです.
return Scaffold(     
  bottomNavigationBar: BottomAppBar(
    color: Colors.transparent,
    child: Text('bottom screen widget'),
    elevation: 0,
  ),
  body: Text('body')
  );

以下のようにウィジェットを拡張してみることもできます.
Expanded(
        child: Align(
          alignment: FractionalOffset.bottomCenter,
          child: MaterialButton(
            onPressed: () => {},
            child: Text(_register ? 'REGISTER' : 'LOGIN'),
          ),
        ),
      ),
コード構造
class TabDemo extends StatefulWidget {
  @override
  State createState() => _TabDemoState();
}
class _TabDemoState extends State
{
  void initState() {
    super.initState();
  }
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( title: Text("My App Demo"),),

      body: new Stack(
        children: [
          Offstage(
              offstage: _currentIndex != 0,
              child: Tab1()
          ),
          Offstage(
              offstage: _currentIndex != 1,
              child: Text("Tab 2")
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
              icon: new Icon(Icons.create),
              title: new Text('Info')),
          BottomNavigationBarItem(
              icon: new Icon(Icons.home_outlined),
              title: new Text('Home')),
        ],
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

class Tab1 extends StatefulWidget {
  @override
  State createState() {
    return _Tab1State();
  }
}

class _Tab1State extends State with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
        margin: const EdgeInsets.all(20.0),
        child: Form(
          child: ListView(
            children: const[

              TextField(
                decoration: InputDecoration(
                    hintText: 'Enter first name'
                ),
              ),
              SizedBox(height: 25,),
              TextField(
                decoration: InputDecoration(
                    hintText: 'Enter last name'
                ),
              ),

            ],),)

    );
  }
  @override
  bool get wantKeepAlive => true;
}

出力

出力は以下のようになります.
ウィジェットの画面の下部に

まとめ
私たちと一緒にフラッタの旅に!
この記事では、我々はどのように画面の下部にフラッタでウィジェットを整列する方法をされている?
学習してください!ずぶぬれに!
Flutter Agencyフラッター技術に専用の最も人気のあるオンラインポータルの一つであり、ユニークな訪問者の毎日数千人はフラッタに関する知識を高めるために、このポータルに来る.