Example 007-tabbar- (learning Flutter day 2)

Test address: (Webpage is slower)
Webpage demo

Reference original text: https://blog.csdn.net/w329300817/article/details/114656534

1. Create a project

flutter create example007_tabbar

2. AS opens

Three. Add dependencies, put in resource files

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  fluttertoast: ^4.0.1

Four. Writing code

main.dart

import 'package:flutter/material.dart';
import 'package:example007_tabbar/MainPage.dart';

void main() {
    
    
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       primarySwatch: Colors.blue,
      ),
      home: MainPage()
    );
  }
}

MainPage.dart

import 'package:flutter/material.dart';
import 'package:example007_tabbar/MinePage.dart';
import 'package:example007_tabbar/MsgPage.dart';
import 'package:example007_tabbar/CartPage.dart';
import 'package:example007_tabbar/HomePage.dart';

class MainPage extends StatefulWidget {
    
    
  @override
  State<StatefulWidget> createState() {
    
    
    return _IndexState();
  }
}

class _IndexState extends State<MainPage>
{
    
    
  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      title: Text("首页"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.message),
      title: Text("消息"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.shopping_cart),
      title: Text("购物车"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.red,
      icon: Icon(Icons.person),
      title: Text("个人中心"),
    ),
  ];

  int currentIndex;

  final pages = [new HomePage(), new MsgPage(), new CartPage(), new MinePage()];

  @override
  void initState() {
    
    
    super.initState();
    currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
//      appBar: AppBar(
//        title: Text("底部导航栏"),
//      ),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
    
    
          _changePage(index);
        },
      ),
      body: pages[currentIndex],
    );
  }

  /*切换页面*/
  void _changePage(int index) {
    
    
    /*如果点击的导航项不是当前项  切换 */
    if (index != currentIndex) {
    
    
      setState(() {
    
    
        currentIndex = index;
      });
    }
  }
}

HomePage

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:example007_tabbar/ProductList.dart';

//void main() {
    
    
//  runApp(new HomePage());
//}

class HomePage extends StatelessWidget {
    
    
  // 重写build 方法，build 方法返回值为Widget类型，返回内容为屏幕上显示内容。
  @override
  Widget build(BuildContext context) {
    
    
    // MaterialApp 控制界面风格为安卓风格
    // CupertinoApp 界面风格为iOS 风格
    // TODO: implement build
    return MaterialApp(
      title: "首页",
      // debugShowCheckedModeBanner: false,
      // Scaffold：脚手架 用于展示基础框架结构，如appBar、body、bottomNavigationBar
      home: Scaffold(
        // AppBar：相当于iOS 的导航栏
        appBar: AppBar(
          // AppBar上的显示内容
          // Text 用于展示文本内容，相当于iOS中的UILabel
          title: Text("首页"),
        ),
        // body：AppBar及BottomNavigationBar之间展示的内容
        // Center 是用于把子Widget 居中的Widget
        body: Card(
            child: Column(
              children: [
                new FadeInImage.assetNetwork(
                  placeholder: 'images/logo.png',
                  image:
                  'https://flutter.dev/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png',
                  fit: BoxFit.fill,
                ),
                RaisedButton(
                  child: Text('跳转', style: const TextStyle(fontSize: 16.0),
                  ),
                  onPressed: () {
    
    
                    print('pressIndex：页面跳转');
                    Navigator.push(context, new MaterialPageRoute(builder: (context) => new ProductList()));
                    Fluttertoast.showToast(
                        msg: "跳转",
                        gravity: ToastGravity.BOTTOM,
                        timeInSecForIosWeb: 1,
                        backgroundColor: Colors.black45,
                        textColor: Colors.white,
                        fontSize: 16.0);
                  },
                  padding: const EdgeInsets.only(top: 20.0),
                ),
              ],
            )),
      ),
    );
  }
}

Other pages

MinePage, CartPage, and MsgPage are the same, change the class name

import 'package:flutter/material.dart';

class CartPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Cart",
      home: Scaffold(
        // AppBar：相当于iOS 的导航栏
        appBar: AppBar(
          // AppBar上的显示内容
          // Text 用于展示文本内容，相当于iOS中的UILabel
          title: Text("Cart"),
        ),
        // body：AppBar及BottomNavigationBar之间展示的内容
        // Center 是用于把子Widget 居中的Widget
        body: Card(
            child:Text("Cart")
            ),
      ),
    );
  }
}

5. Debugging and running

Open the Android or iOS simulator in AS first, and click the run button.
Or run in the command line:

flutter run

6. Package the web

flutter build web

Source code

https://gitee.com/ruik2080/example-flutter