“This is the 11th day of my participation in the Gwen Challenge in November. See 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 has been found on the wechat interface interface layout building code, so today will continue to write wechat combat project address book interface!

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

[04] Build the discovery interface

GitHub project address

2. The address book

2.1 the navigation bar

First set the navigation bar, navigation bar right is a click button, click jump.

appBar: AppBar(
        elevation: 0.0.// The bottom sidebar of the navigation bar, so that there is no black line at the bottom of the Settings
        backgroundColor: GlobalThemeColor,
        title: const Text('Address book',style: TextStyle(color: Colors.black),),
        actions:  [
          / / gestures
          GestureDetector(
            // Click the callback method
            onTap: (){
            // Jump to the page
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (BuildContext context)=>DiscoverChildPage(title: "Add a friend"))); }, child: Container( margin:const EdgeInsets.only(right: 10),
              child:const Image(image: AssetImage("images/icon_friends_add.png"),width: 25(), ()], (Copy the code
  • Above the navigation bar is oneactionsYou can add multiple buttons, it’s an array.
  • Navigator.of(context).push: jump page method, you can directly write to the page to jump to.

2.2 Address Book Header

Let’s first implement the header of the address book. The header cell and the list cell can be shared.

The pages of the address book can be roughly divided into three parts:

  • The head part
  • List some
  • Index bar section

  • Custom cell
class _FriendCell extends StatelessWidget {
  final String? imageUrl;/ / picture URL
  final String? name;/ / nickname
  final String? groupTitle;// Group header headings
  final String? imageAssets;// Local image address
  
  // The cell constructor
  const _FriendCell({this.imageUrl,this.name,this.groupTitle,this.imageAssets});

@override
  Widget build(BuildContext context) {
// Write the code here}}Copy the code
  • Cell layout analysis

Cell includes picture and text. Group cell only contains text. The left side of the cell is the head and the right side is the nickname. You can use Row to layout the left and right sides of the cell. To achieve reuse, you can use a top-down layout with group headers above and cells below. Determines whether the group header is displayed.

  • Code layout

  • Cell code
@override
  Widget build(BuildContext context) {

    return Column(
      children: [
        Container(
          alignment:Alignment.centerLeft,
          padding: const EdgeInsets.only(left: 10), height: groupTitle! =null?30:0, color: GlobalThemeColor, child: groupTitle! =null? Text(groupTitle! ,style:const TextStyle(color: Colors.grey),):null,
        ),
        Container(
          color: Colors.white,
          child: Row(
              children:[
                Container(
                    margin: const EdgeInsets.all(10),
                    width: 34,
                    height: 34,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6.0),
                        image: DecorationImage(
                          image:getImage(),
                        )
                    )
                ),/ / picture
                // ignore: avoid_unnecessary_containers
                Container(
                    width: screenWidth(context)- 54,
                    child: Column(
                      children: [
                        Container(
                          alignment:Alignment.centerLeft,
                          height: 53.5, child:Text( name! , style:const TextStyle(fontSize: 18,color: Colors.black),
                          ),
                        ),
                        Container(
                          height: 0.5,
                          color: GlobalThemeColor,
                        ),/ / the underline],)),/ / nickname[,], [, [, [,], }ImageProvider  getImage(a){
    if(imageUrl == null){
      returnAssetImage(imageAssets!) ; }returnNetworkImage(imageUrl!) ; }Copy the code
  • The list of the head

  • The effect is as follows:

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