【笔记】flutter效果实现小案例

目录

1-底部导航栏BottomNavigationBar

2-Material Outline Icons

3-切换底部导航栏项目的激活状态 

4-按索引值切换显示不同的小部件（indexedStack） 

*补充内容

Flutter TextButton 详细使用配置、Flutter ButtonStyle概述实践

1-底部导航栏BottomNavigationBar

效果图

import 'package:flutter/material.dart';

class AppBottomNavigationBar extends StatefulWidget {
  @override
  State<AppBottomNavigationBar> createState() => _AppBottomNavigationBarState();
}

class _AppBottomNavigationBarState extends State<AppBottomNavigationBar> {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      //不显示标签文字
    showSelectedLabels:false,
    showUnselectedLabels:false,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          //图标
          icon: Icon(
            Icons.change_history,
            size: 32,
          ),
          //文字内容
          label: "首页",
        ),
        BottomNavigationBarItem(
          //图标
          icon: Icon(
            Icons.add,
            size: 32,
          ),
          //文字内容
          label: "添加",
        ),
        BottomNavigationBarItem(
          //图标
          icon: Icon(
            Icons.account_circle,
            size: 32,
          ),
          //文字内容
          label: "账户",
        ),
      ],
    );
  }
}

2-Material Outline Icons