Flutter

Question

我是 Flutter 的新手，我想创建一个 Bottom TabBar，在选项卡的中央有一个圆形按钮。像这样。

这是我现在唯一的小部件。

import "package:flutter/material.dart";

class Tabbar extends StatefulWidget {
  const Tabbar({Key? key}) : super(key: key);

  @override
  State<Tabbar> createState() => _TabbarState();
}

class _TabbarState extends State<Tabbar> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          // bottom: ,
          title: Text('Tabs Demo'),
        ),
        bottomNavigationBar: Container(
          color: Colors.blue[900],
          child: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.account_balance_wallet)),
              Tab(icon: Icon(Icons.query_stats)),
              Tab(icon: Icon(Icons.update)),
              Tab(icon: Icon(Icons.settings)),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            // Text('Temporary'),
            Icon(Icons.flight, size: 350),
            Icon(Icons.directions_transit, size: 350),
            Icon(Icons.directions_car, size: 350),
            Icon(Icons.settings, size: 350),
          ],
        ),
      ),
    );
    ;
  }
}

这是我现在的输出。

Answer 1

尝试使用 floatingActionButton 并将其居中。

Flutter - 在选项卡之间创建按钮（或其他小部件）

Flutter - Create Button (or other widget) between Tabs

flutter-widget