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

📝 [Flutter] Learn to cultivate memory, [programmer essential skills]

📔 [Flutter] wechat project combat!

1. Write at the front

In my last article, I introduced the Button component of Flutter. Now THAT I have learned so many basic components, it is time to practice and verify my learning results. Then today, I will carry out a practical project to build the framework of wechat.

  • 【 Basic Grammar 】

Dart uses var, final, and const

Dart Indicates the num of the data type

Dart String of data type

Dart data type list&Map

Dart method and arrow function

Dart’s method passes optional parameters and methods as parameters

Dart, Dart, Dart, Dart

Dart classes and objects in Flutter

Dart constructor of Flutter

Dart factory constructor & singleton & Initializer list

Dart class methods and object operators for Flutter

Inheritance of Flutter Dart

Dart abstract classes and interfaces in Flutter

Dart, Dart, Dart, Dart, Dart, Dart

  • [Collection of Basic Components]

The base component of Flutter [01] Text

[02] Container

[03] Scaffold

[04] Row/Column

The base component of Flutter [05] Image

Base Component [06] Icon of Flutter

Base component [07] Appbar

[08] BottomNavigationBar

The base component of the Flutter [09] Button

2. Create a project

  • New project

Select File -> New -> New Flutter Project to create a New Flutter Project

  • Select the Flutter App

  • Set the project name toflutter_wechat

3. main.dart

3.1 the main function

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      debugShowCheckedModeBanner: true.// Remove the debug flag
      theme:ThemeData(
        primarySwatch: Colors.blue,// Navigation bar color), home: RootPage(), ); }}Copy the code
  • home: corresponds to UITabBarController in OC, which is the skeleton of APP
  • debugShowCheckedModeBanner: Remove the debug flag. Set false to disable display
  • theme: Theme Settings


3.2 Creating a root View

  • The root viewRootPageSettings,

Dart file and set tabbar

  • New DART file

3.3 set BottomNavigationBar

  • bottomNavigationBar

The Scaffold component has a property called bottomNavigationBar, which is equivalent to the TABbar in OC and inherits from the StatefulWidget. Set the four pages through the items of the BottomNavigationBar, which is constructed using the BottomNavigationBarItem.

bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        fixedColor: Colors.green,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.message),
              label: 'WeChat'),
          BottomNavigationBarItem(
              icon: Icon(Icons.bookmark),
              label: 'Address book'),
          BottomNavigationBarItem(
              icon: Icon(Icons.history),
              label: 'found'),
          BottomNavigationBarItem(
              icon: Icon(Icons.person_outline),
              label: '我'),,)Copy the code

3.4 BottomNavigationBar

BottomNavigationBar BottomNavigationBar

  • Type: BottomNavigationBarItemThe model,BottomNavigationBarTypeEnumeration, yesfixedandshiftingTwo mode Settings.
  • currentIndex: Which item is currently selected is the selected value of the switch of the bottom four items. You can change the value by clicking
  • fixedColor: Fill color, fill color of item

3.5 Creating a wechat Page

  • WeChat interface

A page corresponding to a BottomNavigationBarItem corresponds to a UIViewController in OC.

class ChatPage extends StatefulWidget {
  const ChatPage({Key? key}) : super(key: key);
  @override
  _ChatPageState createState(a) => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: const Text(
          'Wechat Page',
          style: TextStyle(color: Colors.black),
        ),
      ),
      body:const Center(
        child: Text('Wechat Page'),),); }}Copy the code
  • BottomNavigationBarItem switching

The BottomNavigationBarItem switch requires implementing the onTap method to switch.

//BottomNavigationBar click event
        onTap: (index) {
          print("index = $index");
          setState(() {
            _currentIndex = index;
          });
        },
Copy the code

So inside the onTap callback, we can get the value of the item that we clicked on, and we can set which page we want to display right now, _currentIndex = index; To change.

Note: Because a state change is involved, the Widget must use a StatefulWidget with a state. In the callback method, you need to use setState to set the state change.

4. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹