web-dev-qa-db-ja.com

FlutterでAppBarを使用せずにボタンを追加する方法？

私は私のAppBarに戻るボタンを追加し、AppBarを透過的にしたいと思いました。

enter image description here

user-interfaceflutterdartback-buttonappbar
4
Simran Aswani

Simran、これは少しトリッキーですが、Stack、SingleChildScrollViewとAppBarの組み合わせで可能です。これはこれを実証する迅速な例です。

return Scaffold(
              body: Stack(children: <Widget>[
                Container(
                  color: Colors.white,// Your screen background color
                ),
                SingleChildScrollView(
                    child: Column(children: <Widget>[
                      Container(height: 70.0),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                    ])
                ),
                new Positioned(
                  top: 0.0,
                  left: 0.0,
                  right: 0.0,
                  child: AppBar(
                    title: Text(''),// You can add title here
                    leading: new IconButton(
                      icon: new Icon(Icons.arrow_back_ios, color: Colors.grey),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                    backgroundColor: Colors.blue.withOpacity(0.3), //You can make this transparent
                    elevation: 0.0, //No shadow
                  ),),
              ]),
              );
 _

demo

注：AppBarを完全に透明にすることができます。ただし、戻るボタンが表示されていることを確認するためにそれに応じてウィジェットを設計する必要があります。上記の例では、不透明度を設定します。

お役に立てれば。がんばろう！

1
Pro