“This is the 10th 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 the last article, I have carried out the layout and construction of the interface of wechat, including the realization of the custom cell, so today I will continue to write the discovery interface of wechat actual combat project!

  • 【 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

  • [Actual Combat Collection of project]

[01] Build the basic framework of [Flutter] wechat project

【02】 My interface construction (PART 1)

【03】 My interface construction (II)

GitHub project address

2. Discover pages

2.1 Overall analysis of discovery pages

In my last blog, I wrote about my interface on wechat, which realized the list through the custom cell. When I customized the cell, I took the situation of discovery page into consideration. Mine and discovery page are almost the same, and the discovery page is compatible with the customization, so I can directly take it and use it.

Let’s start with the basics:

class _DiscoverState extends State<DiscoverPage> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: const Text(
          'found',
          style: TextStyle(color: Colors.black),
        ),
      ),
      body:const Center(
        child: Text('Discover page'),),); }}Copy the code

Found the page layout also has nothing to say, andmyThe page is exactly the same, but one header is missingWidgetJust take oneContainerAs a whole container, a list is oneListViewAnd thenListViewIt’s just in therecellThat’s it.

The SizedBox is used for large spacing between cells. The dividing line at the bottom of the cell is realized by wrapping containers on the left and right sides of the Row.

  • The overall code structure is as follows

2.2 Code Implementation

  • Splitter line SizedBox implementation

 / / interval
      const SizedBox(
         height: 10.).Copy the code
  • The divider
/ / line
 Row(
   children: <Widget>[
      Container(width: 50, height: 0.5, color: Colors.white),
     Container(height: 0.5, color: Colors.grey)
  ],
  ),

Copy the code

The entire ListView inside the code is not all posted out, the Settings are the same, just post part of it, other copy can be, do not want to knock their own old iron directly see here πŸ‘‰GitHub.

. Code omission.................../ / circle of friends
            const MineCell(
              imageName: 'Images/Friends.png',
              title: 'Moments of Friends'.)./ / interval
            const SizedBox(
              height: 10.)./ / scan
            const MineCell(
              imageName: 'Images/Scan 2.png',
              title: 'Sweep'.)./ / line
            Row(
              children: <Widget>[
                Container(width: 50, height: 0.5, color: Colors.white),
                Container(height: 0.5, color: Colors.grey)
              ],
            )./ / shake
            const MineCell(
              imageName: 'Images/shake it.png',
              title: 'Shake it up'.). Code omission...................Copy the code

2.3 Navigation Bar Settings

Our navigation bar here is the default color, we can also set the color of the navigation bar. AppBar has a backgroundColor property that sets the backgroundColor of the navigation bar.

appBar: AppBar(
          backgroundColor: GlobalThemeColor,
        ),
Copy the code

We noticed a black line at the bottom of the navigation bar. This is a situation we often encounter in iOS development. How to remove the black line in Flutter? This is easier to remove from Flutter, and can be done with a property setting, also in AppBar.

appBar: AppBar(
          backgroundColor: GlobalThemeColor,
          title: const Text('found',style: TextStyle(color: Colors.black)),
          elevation: 0.0.// The bottom sidebar of the navigation bar, so that there is no black line at the bottom of the Settings
        ),
Copy the code

For those who don’t know about Appbar, go here to πŸ‘‰Flutter】 Basic component [07] Appbar

So wechat discovery page is completed, old iron can go to the implementation of their own hands, no time to see the old iron can directly go to GitHubπŸ‘‰ project address

3. 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! 🌹