Fluent learning (4) listview

flutter Study (4)ListView

One . Basic list components

• Vertical list
• Vertical text list
• Horizontal list
• Dynamic list
• Matrix list

Two . List parameters

3、 ... and . Vertical list

• Basic list

  import 'package:flutter/material.dart';
  import 'package:testforgramma/main_bk2.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    // const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
        appBar: AppBar(title: Text('FltterDemo')),
        body: HomeContent(),
      ));
    }
  }
  
  
  class HomeContent extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return ListView(
        children: <Widget>[
          ListTile(
            title: Text(" The Winter Olympics ", style: TextStyle(fontSize: 24)),
            subtitle: Text("2022 The Beijing Winter Olympics went smoothly ", style: TextStyle(fontSize: 18)),
          )
        ],
      );
    }
  }
  

  

  • Use the shortcut key of extracting code just learned hey

    Draw it out

    

    import 'package:flutter/material.dart';
    import 'package:testforgramma/main_bk2.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(title: Text('FltterDemo')),
          body: HomeContent(),
        ));
      }
    }
    
    class HomeContent extends StatelessWidget {
      // const HomeContent({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return ListView(
          children: <Widget>[
            buildListTile(),
            buildListTile(),
            buildListTile(),
            buildListTile(),
          ],
        );
      }
    
      ListTile buildListTile() {
        return const ListTile(
          title: Text(" The Winter Olympics ", style: TextStyle(fontSize: 24)),
          subtitle: Text("2022 The Beijing Winter Olympics went smoothly ", style: TextStyle(fontSize: 18)), // Secondary title 
        );
      }
    }
    

    

  • ListTile Icon can be added

    leading attribute

      ListTile buildListTile() {
        return const ListTile(
          leading: Icon(Icons.search, color: Colors.blue),
          title: Text(" The Winter Olympics ", style: TextStyle(fontSize: 24)),
          subtitle: Text("2022 The Beijing Winter Olympics went smoothly ", style: TextStyle(fontSize: 18)), // Secondary title 
        );
      }
    }
    
    

    

    • Play more icons

      leading It's the icon at the front

      trailing Is the icon behind

      import 'package:flutter/material.dart';
      
      void main() => runApp(MyApp());
      
      class MyApp extends StatelessWidget {
        // const MyApp({Key? key}) : super(key: key);
      
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
              home: Scaffold(
            appBar: AppBar(title: Text('FltterDemo')),
            body: HomeContent(),
          ));
        }
      }
      
      class HomeContent extends StatelessWidget {
        // const HomeContent({Key? key}) : super(key: key);
      
        @override
        Widget build(BuildContext context) {
          return ListView(
            children: const <Widget>[
              ListTile(
                  leading: Icon(Icons.search, color: Colors.blue, size: 40),
                  title: Text(" The Winter Olympics ", style: TextStyle(fontSize: 24)),
                  subtitle: Text("2022 The Beijing Winter Olympics went smoothly ", style: TextStyle(fontSize: 18))),
              // Secondary title 
              ListTile(
                leading: Icon(Icons.ac_unit, color: Colors.blue),
                title: Text(" The Winter Olympics ", style: TextStyle(fontSize: 24)),
                subtitle: Text("2022 The Beijing Winter Olympics went smoothly ", style: TextStyle(fontSize: 18)),
                trailing: Icon(Icons.ac_unit, color: Colors.blue),
              ),
      
              // Secondary title 
              ListTile(
                leading: Icon(Icons.home_max, color: Colors.blue),
                title: Text(" The Winter Olympics ", style: TextStyle(fontSize: 24)),
                subtitle: Text("2022 The Beijing Winter Olympics went smoothly ", style: TextStyle(fontSize: 18)),
                trailing: Icon(Icons.accessibility_new_outlined, color: Colors.blue),
              ),
            ],
          );
        }
      }
      

      

  • leading It can also be a remote picture

    class HomeContent extends StatelessWidget {
      // const HomeContent({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return ListView(
          children: <Widget>[
            ListTile(
                leading: Image.network(
                    "https://tse4-mm.cn.bing.net/th/id/OIP-C.Hi8-77RG-95MCRQF9gaFxgHaHI?w=214&h=206&c=7&r=0&o=5&dpr=1.38&pid=1.7"),
                title: Text(" The Winter Olympics ", style: TextStyle(fontSize: 24)),
                subtitle: Text("2022 The Beijing Winter Olympics went smoothly ", style: TextStyle(fontSize: 18))),
            // Secondary title 
            ListTile(
              leading: Icon(Icons.ac_unit, color: Colors.blue),
              title: Text(" The Winter Olympics ", style: TextStyle(fontSize: 24)),
              subtitle: Text("2022 The Beijing Winter Olympics went smoothly ", style: TextStyle(fontSize: 18)),
              trailing: Icon(Icons.ac_unit, color: Colors.blue),
            ),
    
            // Secondary title 
            ListTile(
              leading: Icon(Icons.home_max, color: Colors.blue),
              title: Text(" The Winter Olympics ", style: TextStyle(fontSize: 24)),
              subtitle: Text("2022 The Beijing Winter Olympics went smoothly ", style: TextStyle(fontSize: 18)),
              trailing: Icon(Icons.accessibility_new_outlined, color: Colors.blue),
            ),
          ],
        );
      }
    }
    

    Loaded this web image , You can't const 了

    

• Graphic list

• Intermediate use Container Artificially enlarge the picture spacing

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    // const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
        appBar: AppBar(title: Text('FltterDemo')),
        body: HomeContent(),
      ));
    }
  }
  
  class HomeContent extends StatelessWidget {
    // const HomeContent({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return ListView(
        padding: EdgeInsets.all(10),
        children: <Widget>[
          Image.network(
            "https://tse4-mm.cn.bing.net/th/id/OIP-C.Hi8-77RG-95MCRQF9gaFxgHaHI?w=214&h=206&c=7&r=0&o=5&dpr=1.38&pid=1.7",
            colorBlendMode: BlendMode.colorBurn,
            color: Colors.blue,
          ),
          Container(
              child: Text(' The title is here ',
                  textAlign: TextAlign.center, style: TextStyle(fontSize: 28)),
              height: 40),
          Image.network(
            "https://tse4-mm.cn.bing.net/th/id/OIP-C.Hi8-77RG-95MCRQF9gaFxgHaHI?w=214&h=206&c=7&r=0&o=5&dpr=1.38&pid=1.7",
            colorBlendMode: BlendMode.colorDodge,
            color: Colors.cyan,
          ),
          Image.network(
            "https://tse4-mm.cn.bing.net/th/id/OIP-C.Hi8-77RG-95MCRQF9gaFxgHaHI?w=214&h=206&c=7&r=0&o=5&dpr=1.38&pid=1.7",
            colorBlendMode: BlendMode.darken,
            color: Colors.blueAccent,
          ),
          Image.network(
              "https://tse4-mm.cn.bing.net/th/id/OIP-C.Hi8-77RG-95MCRQF9gaFxgHaHI?w=214&h=206&c=7&r=0&o=5&dpr=1.38&pid=1.7"),
        ],
      );
    }
  }
  
  

  

Four . Horizontal list

from scrollDirection Property to determine whether the list is horizontal or vertical

Horizontal list height It's adaptive

Vertical list width It's adaptive

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      padding: EdgeInsets.all(10),
      children: <Widget>[
        Container(height: 100, width: 100, color: Colors.deepOrange),
        Container(height: 100, width: 100, color: Colors.deepPurpleAccent),
        Container(height: 100, width: 100, color: Colors.cyanAccent)
      ],
    );
  }
}

In the Container It can limit its height

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FltterDemo')),
      body: HomeContent(),
    ));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 80,
        child: ListView(
          scrollDirection: Axis.horizontal,
          padding: EdgeInsets.all(10),
          children: <Widget>[
            Container(height: 100, width: 100, color: Colors.deepOrange),
            Container(height: 100, width: 100, color: Colors.deepPurpleAccent),
            Container(height: 100, width: 100, color: Colors.cyanAccent)
          ],
        ));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 480,
        child: ListView(
          scrollDirection: Axis.horizontal,
          padding: EdgeInsets.all(10),
          children: <Widget>[
            Container(height: 100, width: 100, color: Colors.deepOrange),
            Container(
                height: 100,
                width: 100,
                color: Colors.deepPurpleAccent,
                child: ListView(
                  children: <Widget>[
                    Image.network(
                      "https://tse4-mm.cn.bing.net/th/id/OIP-C.Hi8-77RG-95MCRQF9gaFxgHaHI?w=214&h=206&c=7&r=0&o=5&dpr=1.38&pid=1.7",
                      colorBlendMode: BlendMode.colorDodge,
                      color: Colors.cyan,
                    ),
                    Text(" The Winter Olympics ")
                  ],
                )),
            Container(height: 100, width: 100, color: Colors.cyanAccent)
          ],
        ));
  }
}

5、 ... and . Dynamic list

• The previous ones are all static lists

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
        appBar: AppBar(title: Text('Flutter list ')),
        body: HomeContent(),
      ));
    }
  }
  
  class HomeContent extends StatelessWidget {
    const HomeContent({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return ListView(
        children: <Widget>[
          ListTile(
            tileColor: Colors.cyanAccent,
            leading: CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://pic.52112.com/2019/12/23/EPS-191223_124/gBShjDAniH_small.jpg"),
            ),
            title: Text(
              'Horse',
              textAlign: TextAlign.end,
            ),
          ),
          Text("1", textAlign: TextAlign.center, style: TextStyle(fontSize: 24)),
          Text("2", textAlign: TextAlign.center, style: TextStyle(fontSize: 24)),
          Text("3", textAlign: TextAlign.center, style: TextStyle(fontSize: 24)),
          Text("4", textAlign: TextAlign.center, style: TextStyle(fontSize: 24)),
        ],
      );
    }
  }
  
  

  

for Loop traversal

• Loop through the data in an array to the page is the loop array

  • First return the list

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(title: Text('Flutter list ')),
          body: HomeContent(),
        ));
      }
    }
    
    class HomeContent extends StatelessWidget {
      const HomeContent({Key? key}) : super(key: key);
    
      List<Widget> _getData() {
        return [
          ListTile(
            tileColor: Colors.cyanAccent,
            leading: CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://pic.52112.com/2019/12/23/EPS-191223_124/gBShjDAniH_small.jpg"),
            ),
            title: Text(
              'Horse',
              textAlign: TextAlign.end,
            ),
          ),
          ListTile(
            title: Text(" I'm a list "),
          ),
          ListTile(title: Text(" I am also a list ")),
          Text("1", textAlign: TextAlign.center, style: TextStyle(fontSize: 24)),
          Text("2", textAlign: TextAlign.center, style: TextStyle(fontSize: 24)),
          Text("3", textAlign: TextAlign.center, style: TextStyle(fontSize: 24)),
          Text("4", textAlign: TextAlign.center, style: TextStyle(fontSize: 24)),
        ];
      }
    
      @override
      Widget build(BuildContext context) {
        return ListView(
          children: this._getData(),
        );
      }
    }
    
    

    

  • Loop list

    class HomeContent extends StatelessWidget {
      List<Widget> list = List.empty(growable: true);
    
      List<Widget> _getData() {
        for (var i = 0; i < 20; i++) {
          list.add(ListTile(title: Text(" The list of the first $i That's ok ")));
        }
        return list;
      }
    
      @override
      Widget build(BuildContext context) {
        return ListView(
          children: this._getData(),
        );
      }
    }
    
    

    Problems encountered ：

    List<Widget> list = new List();
    

    Report errors ：

    The default 'List' constructor isn't available when null safety is enabled. Try using a list literal, 'List.filled' or 'List.generate'.

    Solution reference ：

    Flutter2.2 new List() Have been abandoned Alternative

    Official documents

    

• Get data from the server

  stay lib New in the folder res Folder , newly build listData.dart

    List listData=[
        {
            "title": 'Candy Shop',
            "author": 'Mohamed Chahin',
            "imageUrl": 'https://www.itying.com/images/flutter/1.png',
        },
         {
            "title": 'Childhood in a picture',
            "author": 'Google',
            "imageUrl": 'https://www.itying.com/images/flutter/2.png',
        },
        {
            "title": 'Alibaba Shop',
            "author": 'Alibaba',
            "imageUrl": 'https://www.itying.com/images/flutter/3.png',
        },
        {
            "title": 'Candy Shop',
            "author": 'Mohamed Chahin',
            "imageUrl": 'https://www.itying.com/images/flutter/4.png',
        },
         {
            "title": 'Tornado',
            "author": 'Mohamed Chahin',
            "imageUrl": 'https://www.itying.com/images/flutter/5.png',
        },
        {
            "title": 'Undo',
            "author": 'Mohamed Chahin',
            "imageUrl": 'https://www.itying.com/images/flutter/6.png',
        },
        {
            "title": 'white-dragon',
            "author": 'Mohamed Chahin',
            "imageUrl": 'https://www.itying.com/images/flutter/7.png',
        }      
  
    ];
  
  

  • stay main.dart Introduced inside

    import './res/listData.dart';
    

    Modify what just happened List <Widget> _getdata() Method

      List<Widget> _getData() {
        var tempList = listData.map((value) {
          return ListTile(title: Text(value["title"]));
        });
        //map Method to traverse each item in the list 
        return tempList.toList();
      }
    

    • effect
    

    Perfect that dynamic list

    List<Widget> _getData() {
    
    	var tempList = listData.map( (value) {
    	
    		return ListTile(
    		
    			leading: Image.network(value["imageUrl"]),
    			title: Text(value["title"]),
    			subtitle: Text(value["author"]),
    		);
    	}
    		
    	);
    
    	return tempList.tolist();
    }
    

    • effect

      

ListView.builder Realize the cycle

Normal list

import 'package:flutter/material.dart';
import './res/listData.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text('Flutter list ')), body: HomeContent()));
  }
}

class HomeContent extends StatelessWidget {
  List list_2 = [];
  // Constructor to list Add some data 
  HomeContent() {
    for (var i = 0; i < 20; i++) {
      this.list_2.add(' I am the first $i strip ');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: this.list_2.length,
      // Specify the length 
      itemBuilder: (context, index) {
        return ListTile(title: Text(this.list_2[index]));
        // Each item returns the component 
      },
    );
  }
}

Just that listData.dart The data in it

class HomeContent extends StatelessWidget {
  @override
  ListTile _getListData(context, index) {
    return ListTile(
        leading: Image.network(listData[index]["imageUrl"]),
        title: Text(listData[index]["title"]),
        subtitle: Text(listData[index]["author"]));
    // Each item returns the component 
  }

  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: listData.length,
        // Specify the length 
        itemBuilder: this._getListData // assignment 
        );
  }
}