“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Flutter resources

Our project usually has a lot of image resources, so where should the image be placed on Flutter? First copy the resourceCOM + C

Select the root directory of Flutter COM + V and the message will pop up:

Select OK. Then go to the project’s pubspecy.yaml file, where not only images are stored but also packages are configured for future use.

Let’s go to this comment line and notice that we have to pay attention to the format of the Spaces, because we have two extra Spaces, and we need to align them

The correct way to write it is, say the path of the image is under images

Android Resource Configuration

In iOS there’s 1x/2x/3x, but in Android it’s a little bit different than iOS

At the bottom of theBottomNavigationBar

  • 1. Go to the main.dart file and customize itMaterialAppHome widget, the rest of the time do not touch.
  • 2. CustomRootPageThe click at the bottom will give you the color of the image and the color of the text, so it needs to be a stateful Widget
import 'package:flutter/material.dart';

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

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

class _RootPageState extends State<RootPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'WeChat'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'Address book'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'found'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: '我'),,),); }}Copy the code

There is no problem with setting three items to run, but once we set four items to run, we find that the page now looks like this:

Click is something you can see below, but no display, this is because a type less, here to BottomNavigationBar set type: BottomNavigationBarType. Fixed, after running effect

We also see that the current BottomNavigationBar has a currentIndex property, which is given 0 by default, and we want it to change dynamically. And then this BottomNavigationBar also has an onTap event, so if I click on it and I see that there’s a label here for which BottomNavigationBar item I clicked on

typedef ValueChanged<T> = void Function(T value);
Copy the code

We pass this index to the current _currentIndex, and now the code looks like this

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) { 
          setState(() {
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.green,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'WeChat'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'Address book'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'found'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: '我'),,),); }}Copy the code

Now when you run it, you can see that the BarItem click at the bottom can switch.

The correspondingBottomNavigationBarItemtheScaffold

When we click the BarItem below, we expect the Body of the current page to be a component of the corresponding Scaffold, so four Page.Darts are generated

Back to RootPage, we put the four sub-pages in an array and extract the current Body based on the current _current index

Running effect at this time

Details of the perfect

  • When you click on BarItem, there is a water ripple animation, which comes with the system and we can remove it.
 theme: ThemeData(
          primarySwatch: Colors.blue,  // The theme color of the entire App
          highlightColor: Color.fromRGBO(1.0.0.0),
          splashColor: Color.fromRGBO(1.0.0.0)),Copy the code
  • By default, the font is enlarged when selected: the default selected font is 14, we will change it to 12, and the default unselected font is 12.
BottomNavigationBar(
	selectedFontSize: 12.0.)Copy the code
  • Replace the images with the images in the resource
 BottomNavigationBarItem(
              icon: Image(
                  width: 20,
                  height: 20,
                  image: AssetImage('images/tabbar_chat.png')), // Display normal
              activeIcon: Image(
                width: 20,
                height: 20,
                image: AssetImage('images/tabbar_mine_hl.png'), // Select display
              ),
              label: 'WeChat'
 ),
Copy the code
  • Set the theme of the entire App to Forgive green
ThemeData(
          primarySwatch: Colors.green,
          highlightColor: Color.fromRGBO(1.0.0.0),
          splashColor: Color.fromRGBO(1.0.0.0)),Copy the code

Ok, the initial framework has been set up, we continue next ~