（Flutter）导航栏

CODE

import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';

void main() {
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
      // theme: ThemeData(
      //   primarySwatch: Colors.deepPurple,
      // ),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //appBar: AppBar(),
      bottomNavigationBar: Container(
        color: Colors.black,
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8),
            child: GNav(
              gap: 8, // 减小按钮间距
              color: Colors.white,
              activeColor: Colors.white,
              tabBackgroundColor: Colors.grey.shade800,
              padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8), // 减小内边距
              tabs: [
                GButton(
                  icon: Icons.home,
                  text: "Home",
                  margin: EdgeInsets.zero, // 移除外边距
                ),
                GButton(
                  icon: Icons.favorite_border,
                  text: "Fav",
                  margin: EdgeInsets.zero,
                ),
                GButton(
                  icon: Icons.search,
                  text: "Search",
                  margin: EdgeInsets.zero,
                ),
                GButton(
                  icon: Icons.settings,
                  text: "Settings",
                  margin: EdgeInsets.zero,
                ),
              ],
            ),
          ),
        ),
      ),
      body: Container(),
    );
  }
}

预览