web-dev-qa-db-ja.com

上にぶら下がっている下部のナビゲーションバーにボタンを追加する方法-フラッター

この写真のように中央のアイテムが表示された下部のナビゲーションバーがあります。

Flutterでそのようなことを実装する方法は？

BottomNavigatonBarItemに入れたすべてのアイコンは、ナビゲーションバーの境界内に収まっていることがわかりました。しかし、私はそれを上にぶら下げる必要があります。

androidflutterbottomnavigationviewfloating-action-button
4
mynameis

Stackを使用して、ウィジェットを互いの上に表示できます。プロパティoverflowと組み合わせる：Overflow.visible、そしてあなたのニーズに合った配置。

次の例では、写真のようになります。水平方向に中央に配置され、上部が下部のバーに配置されたフローティングボタン。

return new Scaffold(
  bottomNavigationBar: new Stack(
    overflow: Overflow.visible,
    alignment: new FractionalOffset(.5, 1.0),
    children: [
      new Container(
        height: 40.0,
        color: Colors.red,
      ),
      new Padding(
        padding: const EdgeInsets.only(bottom: 12.0),
        child: new FloatingActionButton(
          notchMargin: 24.0,
          onPressed: () => print('hello world'),
          child: new Icon(Icons.arrow_back),
        ),
      ),
    ],
  ),
);
8
Rémi Rousselet

Googleは最近BottomAppBarと呼ばれるものを追加しました、そしてそれはこれをするより良い方法を提供します。足場にBottomAppBarを追加するだけで、ナビゲーションFABを作成し、テキストを含めるラベルをFABに追加します。次のような結果を作成します： https://cdn-images-1.medium.com/max/1600/1*SEYUo6sNrW0RoKxyrYCqbg.png 。

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(title: const Text('Tasks - Bottom App Bar')),
    floatingActionButton: FloatingActionButton.extended(
      elevation: 4.0,
      icon: const Icon(Icons.add),
      label: const Text('Add a task'),
      onPressed: () {},
    ),
    floatingActionButtonLocation: 
      FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: BottomAppBar(
      hasNotch: false,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
      ),
    ),
  );
}
4
Adrian Avram

次のように、FloatingActionButtonLocationとExpandedウィジェットを使用してこれを行うこともできます。

Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: _buildTodoList(),
      floatingActionButton: new FloatingActionButton(
        onPressed: _pushAddTodoScreen,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
        elevation: 4.0,
      ),
      bottomNavigationBar: BottomAppBar(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(child: IconButton(icon: Icon(Icons.home)),),
            Expanded(child: IconButton(icon: Icon(Icons.show_chart)),),
            Expanded(child: new Text('')),
            Expanded(child: IconButton(icon: Icon(Icons.tab)),),
            Expanded(child: IconButton(icon: Icon(Icons.settings)),),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

プレビュー：

2
Raunak Hajela

@Raunakによる入力に加えて、FloatingActionButtonの「border」属性を使用してシームレスな境界線を取得し、目的の効果を生成することもできます。コードスニペットは次のとおりです。

Widget buildFab() {
  FloatingActionButton fab = FloatingActionButton(
    backgroundColor: Color(0xFF9966CC),
    child: Icon(Icons.add),
    shape: CircleBorder(
      side: BorderSide(
        color: Colors.white,
        width: 3.0,
      ),
    ),
    tooltip: "Add...",
    onPressed: () {
      print("fab is pressed!!!");
    }
  );

  return fab;
}

以下のように、FABをマテリアル内にラップし、それにシャドウ効果を追加すると、さらに効果的です。

Material buildFabWithShadow() {
  return Material(
  shadowColor: Color(0x802196F3),
  shape: CircleBorder(), 
  elevation: 16.0,
  child: buildFab(),
);

試してみると、以下の効果が得られました 1 -ボーダー幅はお好みに合わせて調整できますのでご注意ください！

0
Thiru