flutter 底部tabbar

效果图

WeChatebf1bd6ee653b2dc26249d0a69fac23e.png

代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutterapp/pages/client/page/client_page.dart';
import 'package:flutterapp/pages/home/page/home_page.dart';
import 'package:flutterapp/pages/mine/page/mine_page.dart';
import 'package:flutterapp/pages/product/page/product_page.dart';
import 'package:flutterapp/pages/tools/tools_page.dart';


class HomeScreen extends StatefulWidget {
  var currentIndex;
  HomeScreen({Key key,@required this.currentIndex});

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;
  var tabItems;

  final List<Widget> tabBodies = [
    HomePage(),
    ProductPage(),
    ClientPage(),
    ToolsPage(),
    MyPage()
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    if(widget.currentIndex != null){
      setState(() {
        _currentIndex = widget.currentIndex;
      });
    }

  }

  @override
  Widget build(BuildContext context) {
    ///屏幕适配
    ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);

    initItems();

    return Scaffold(
      body: tabBodies[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          items: tabItems,
          currentIndex:_currentIndex,
          selectedItemColor: Colors.deepOrange,
          unselectedItemColor: Colors.grey,
          type:BottomNavigationBarType.fixed,
          onTap:(int index){
            setState((){
              _currentIndex= index;
            });
          }
      ),
    );
  }

  initItems(){
    tabItems = [
      BottomNavigationBarItem(
          icon: getTabImage('assets/tab/home.png'),
          activeIcon: getTabImage('assets/tab/home_h.png'),
          title: getTabTitle('首页')
      ),
      BottomNavigationBarItem(
          icon: getTabImage('assets/tab/product.png'),
          activeIcon: getTabImage('assets/tab/product_h.png'),
          title: getTabTitle('产品')
      ),
      BottomNavigationBarItem(
          icon: getTabImage('assets/tab/client.png'),
          activeIcon: getTabImage('assets/tab/client_h.png'),
          title: getTabTitle('学习')
      ),
      BottomNavigationBarItem(
          icon: getTabImage('assets/tab/tool.png'),
          activeIcon: getTabImage('assets/tab/tool_h.png'),
          title: getTabTitle('工具')
      ),
      BottomNavigationBarItem(
          icon: getTabImage('assets/tab/mine.png'),
          activeIcon: getTabImage('assets/tab/mine_h.png'),
          title: getTabTitle('我的')
      )
    ];
  }

  Image getTabImage(path) {
    return new Image.asset(path, width: 24.0, height: 24.0);
  }

  ///设置文字样式
  Text getTabTitle(title) {
    return Text(
        title,
        style: TextStyle(
            fontSize: 14.0
        )
    );
  }
}