码迷,mamicode.com
首页 > 其他好文 > 详细

flutter 主页面底部导航栏实现以及主题风格设置

时间:2019-08-23 22:47:49      阅读:599      评论:0      收藏:0      [点我收藏+]

标签:lap   ide   info   swa   nba   type   uil   rri   watch   

import ‘package:flutter/material.dart‘;
import ‘package:flutter_app/bottom_navigation_widget.dart‘;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ‘Flutter Demo‘,
      theme: ThemeData(
        primarySwatch: Colors.green,  //定义主题风格    primarySwatch
      ),
      home: new BottomNavigationWidget(),
    );
  }

}
import ‘package:flutter/material.dart‘;
import ‘package:flutter_app/pages/AirplayScreen.dart‘;
import ‘package:flutter_app/pages/EmailScreen.dart‘;
import ‘package:flutter_app/pages/HomeScreen.dart‘;
import ‘package:flutter_app/pages/PagesScreen.dart‘;


class BottomNavigationWidget extends StatefulWidget {
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
//  final _BottomNavigationColor = Colors.blue;
  int _currentIndex = 0;
  List<Widget> list = List();
  @override
  void initState(){
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirplayScreen());
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
                icon:Icon(
                  Icons.home,
//                  color:_BottomNavigationColor,
                ),
                title:Text(
                    ‘Home‘,
//                    style:TextStyle(color:_BottomNavigationColor)
                )
            ),
            BottomNavigationBarItem(
                icon:Icon(
                  Icons.email,
//                  color:_BottomNavigationColor,
                ),
                title:Text(
                    ‘Email‘,
//                    style:TextStyle(color:_BottomNavigationColor)
                )
            ),
            BottomNavigationBarItem(
                icon:Icon(
                  Icons.pages,
//                  color:_BottomNavigationColor,
                ),
                title:Text(
                    ‘Pages‘,
//                    style:TextStyle(color:_BottomNavigationColor)
                )
            ),
            BottomNavigationBarItem(
                icon:Icon(
                  Icons.airplay,
//                  color:_BottomNavigationColor,
                ),
                title:Text(
                    ‘AipPlay‘,
//                    style:TextStyle(color:_BottomNavigationColor)
                )
            ),
          ],
          currentIndex:_currentIndex,
          onTap:(int index){
            setState((){
              _currentIndex= index;
            });
          },
          selectedItemColor: Colors.green,
//          unselectedItemColor: Colors.grey,
          type:BottomNavigationBarType.fixed
      ),
    );
  }
}
HomeScreen.dart 
import ‘package:flutter/material.dart‘;

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(
          title: Text(‘HOME‘),
        ),
        body:Center(
          child: Text(‘HOME‘),
        )
    );
  }
}

其他页面类似

效果:

技术图片

 

flutter 主页面底部导航栏实现以及主题风格设置

标签:lap   ide   info   swa   nba   type   uil   rri   watch   

原文地址:https://www.cnblogs.com/loaderman/p/11346810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!