列のあるアプリの下部にあるTabBar

Question

アプリの下部にTabBarを配置しようとしています。

これまでは機能しましたが、ページを機能させることができません（TabBarView）。黒く見えて反応しません。 TabBarも応答しません。私は間違ったアプローチを取りましたか？

現在、次のようになっています。

そして、コードは次のようになります。

import 'package:flutter/material.Dart';

void main() => runApp(Bookkeeper());

class Bookkeeper extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
        home: DefaultTabController(
            length: 4,

            child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    verticalDirection: VerticalDirection.up,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                        AppBar(
                            backgroundColor: Color(0xFF3F5AA6),
                            title: Container(
                                padding: EdgeInsets.only(top: 8.0),
                                child: menu(),
                            ),
                        ),

                    TabBarView(
                        children: [
                            Icon(Icons.directions_car),
                            Icon(Icons.directions_transit),
                            Icon(Icons.directions_bike),
                            Icon(Icons.directions_bike),
                        ],
                    ),
                ],
            ),
        ),
    );
}

Widget menu() {
        return TabBar(
            tabs: [
                Tab(
                    child: Container(
                        height: 45.0,
                        child: Column(
                            children:
                            [
                                Icon(Icons.euro_symbol),
                                Text(
                                    "Transactions",
                                    style: new TextStyle(
                                        height: 1.5,
                                        fontSize: 9.8,
                                        color: Colors.white,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
                Tab(
                    child: Container(
                        height: 45.0,
                        child: Column(
                            children:
                            [
                                Icon(Icons.assignment),
                                Text(
                                    "Bills",
                                    style: new TextStyle(
                                        height: 1.5,
                                        fontSize: 9.5,
                                        color: Colors.white,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
                Tab(
                    child: Container(
                        height: 45.0,
                        child: Column(
                            children:
                            [
                                Icon(Icons.account_balance_wallet),
                                Text(
                                    "Balance",
                                    style: new TextStyle(
                                        height: 1.5,
                                        fontSize: 9.5,
                                        color: Colors.white,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
                Tab(
                    child: Container(
                        height: 45.0,
                        child: Column(
                            children:
                            [
                                Icon(Icons.settings),
                                Text(
                                    "Options",
                                    style: new TextStyle(
                                        height: 1.5,
                                        fontSize: 9.5,
                                        color: Colors.white,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
            ],
        );
    }
}

Answer 1

私はあなたのコードを修正しました、見てください。

  class Bookkeeper extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: DefaultTabController(
          length: 4,
          child: Scaffold(
            appBar: AppBar(
              backgroundColor: Color(0xFF3F5AA6),
              title: Text("Title text"),
              bottom: menu(),
            ),
            body: TabBarView(
              children: [
                Container(child: Icon(Icons.directions_car)),
                Container(child: Icon(Icons.directions_transit)),
                Container(child: Icon(Icons.directions_bike)),
                Container(child: Icon(Icons.directions_bike)),
              ],
            ),
          ),
        ),
      );
    }

    Widget menu() {
      return TabBar(
        tabs: [
          Tab(
            text: "Transactions",
            icon: Icon(Icons.euro_symbol),
          ),
          Tab(
            text: "Bills",
            icon: Icon(Icons.assignment),
          ),
          Tab(
            text: "Balance",
            icon: Icon(Icons.account_balance_wallet),
          ),
          Tab(
            text: "Options",
            icon: Icon(Icons.settings),
          ),
        ],
      );
    }
  }

AppBarを使用するには、スキャフォールドを作成してから、タブをbottomプロパティ内に配置する必要があります。

[〜＃〜]更新[〜＃〜]

bottomNavigationBarを使用してTabsを画面の下部に配置します

  class Bookkeeper extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: DefaultTabController(
          length: 4,
          child: Scaffold(
            appBar: AppBar(
              backgroundColor: Color(0xFF3F5AA6),
              title: Text("Title text"),
            ),
            bottomNavigationBar: menu(),
            body: TabBarView(
              children: [
                Container(child: Icon(Icons.directions_car)),
                Container(child: Icon(Icons.directions_transit)),
                Container(child: Icon(Icons.directions_bike)),
                Container(child: Icon(Icons.directions_bike)),
              ],
            ),
          ),
        ),
      );
    }

     Widget menu() {
return Container(
  color: Color(0xFF3F5AA6),
  child: TabBar(
    labelColor: Colors.white,
    unselectedLabelColor: Colors.white70,
    indicatorSize: TabBarIndicatorSize.tab,
    indicatorPadding: EdgeInsets.all(5.0),
    indicatorColor: Colors.blue,
    tabs: [
      Tab(
        text: "Transactions",
        icon: Icon(Icons.euro_symbol),
      ),
      Tab(
        text: "Bills",
        icon: Icon(Icons.assignment),
      ),
      Tab(
        text: "Balance",
        icon: Icon(Icons.account_balance_wallet),
      ),
      Tab(
        text: "Options",
        icon: Icon(Icons.settings),
      ),
    ],
  ),
);

}}