Flutter:仿咸鱼底部导航

607 阅读1分钟
import 'package:flutter/material.dart';
import 'components/tabbar_item.dart';
import 'views/home/home.dart';
import 'views/holiday/holiday.dart';
import 'views/cart/cart.dart';
import 'views/mall/mall.dart';
import 'views/profile/profile.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title:"hello flutter",
      home: MyStackPage(),
      theme: ThemeData(
        primaryColor: Color(0xffbadc58),
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
      ),
      // debugShowCheckedModeBanner: false,
    );
  }
}

class MyStackPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyStackPageState();
  }
}

class MyStackPageState extends State<MyStackPage> {
  int _currentIndex = 0 ;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
     
      body:IndexedStack(
        index: _currentIndex,
        children: [
          Home(),
          Holiday(),
          Cart(),
          Mall(),
          Profile()
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        
        color:Color(0xffbadc58),
        shape: CircularNotchedRectangle(),
        child:Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.home),
              color:_currentIndex == 0 ? Colors.red : Colors.grey,
              onPressed: (){
                _onItemTapped(0);
              }
            ),
            IconButton(
              icon: Icon(Icons.search),
              color:_currentIndex == 1 ? Colors.red : Colors.grey,
              onPressed: (){
                _onItemTapped(1);
              }
            ),
            SizedBox(width:50),
            IconButton(
              icon: Icon(Icons.photo_filter),
              color:_currentIndex == 3 ? Colors.red : Colors.grey,
              onPressed: (){
                _onItemTapped(3);
              }
            ),
            IconButton(
              icon: Icon(Icons.face),
              color:_currentIndex == 4 ? Colors.red : Colors.grey,
              onPressed: (){
                _onItemTapped(4);
              }
            ),
          ],
        )
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: _currentIndex == 2 ? Colors.red : Colors.grey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.add)
          ],
        ),
        onPressed: (){
          setState(() {
            _currentIndex = 2;
          });
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
  void _onItemTapped(int index) {
    setState(() {
        _currentIndex = index;
    });
  }
}