點燈坊

失くすものさえない今が強くなるチャンスよ

NavigationBar 調整 Text Style

Sam Xiao's Avatar 2024-11-11

NavigationBar 若要調整 Text Style，無法直接在 NavigationBar 調整，必須包在 NavigationBarTheme 內。

Version

Flutter 3.24

Flutter

textstyle01

  • Android 與 iOS 都成功使用 NavigationBarTheme 調整 Text Style
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _Home();
}

class _Home extends State<Home> {
  int _selectedIndex = 0;

  static const List<Widget> navigationPages = [
    Center(child: Text('Home')),
    Center(child: Text('Search')),
    Center(child: Text('Profile')),
  ];

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('NavigationBar Text Style'),
    );

    var navigationBar = NavigationBarTheme(
      data: NavigationBarThemeData(
        labelTextStyle: WidgetStateProperty.all(
          const TextStyle(
            fontSize: 10.0,
            color: Colors.red,
            fontWeight: FontWeight.w500,
            fontStyle: FontStyle.normal,
          ),
        ),
      ),
      child: NavigationBar(
        selectedIndex: _selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => _selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          NavigationDestination(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );

    return Scaffold(
      appBar: appBar,
      body: navigationPages[_selectedIndex],
      bottomNavigationBar: navigationBar,
    );
  }
}

Line 25

var navigationBar = NavigationBarTheme(
  data: NavigationBarThemeData(
    labelTextStyle: WidgetStateProperty.all(
      const TextStyle(
        fontSize: 10.0,
        color: Colors.red,
        fontWeight: FontWeight.w500,
        fontStyle: FontStyle.normal,
      ),
    ),
  ),
  child: NavigationBar(
  ),
)
  • 將 NavigationBarTheme 包在 NavigationBar 外
  • 在 NavigationBarThemeData 內以 labelTextStyle 指定 Text 的 style
  • WidgetStateProperty.all()：一次對 label 的所有狀態設定相同 style

Conclusion

  • 設定 NavigationButton 的 style 比較特別，必須靠 NavigationBarTheme 設定 style

# Flutter