點燈坊

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

TabBar 使 Icon 與 Text 並列

Sam Xiao's Avatar 2024-11-14

預設 TabBar 並沒有 Icon，可在 Tab 內使用 Row 組合 Icon 與 Text 實現。

Version

Flutter 3.24

Flutter

icon01

  • Android 與 iOS 都成功實現 TabBar 有 icon

TabBar

import 'package:flutter/material.dart';

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

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

    var tabBar = const TabBar(
      tabs: [
        Tab(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.home),
              SizedBox(width: 8),
              Text('Home'),
            ],
          ),
        ),
        Tab(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.search),
              SizedBox(width: 8),
              Text('Search'),
            ],
          ),
        ),
        Tab(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.person),
              SizedBox(width: 8),
              Text('Profile'),
            ],
          ),
        ),
      ],
    );

    var tabBarView = const Expanded(
      child: TabBarView(
        children: [
          Center(
            child: Text('Home Tab'),
          ),
          Center(
            child: Text('Search Tab'),
          ),
          Center(
            child: Text('Profile Tab'),
          ),
        ],
      ),
    );

    return Scaffold(
      appBar: appBar,
      body: DefaultTabController(
        length: 3,
        child: Column(
          children: [
            tabBar,
            tabBarView,
          ],
        ),
      ),
    );
  }
}

Line 12

Tab(
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.home),
      SizedBox(width: 8),
      Text('Home'),
    ],
  ),
),
  • Tab：建立 TabBar 的 Tab
    • Row：使用 Row 並列 Icon 與 Text
      • minAxisSize：使用最小寬度並列 Icon 與 Text
        • Icon：建立 Icon
        • SizeBox：設定 Icon 與 Text 的間距
        • Text：建立 Text

Conclusion

  • 若 Row 不使用 minAxisSize，則 Row 會占滿整個 Tab，視覺上 Icon 與 Text 會 靠左對齊
  • 若 Row 使用 minAxisSize，因為使用 最小寬度，時覺上 Icon 與 Text 會 水平置中

# Flutter