“Flutter” Container, Image and ListView controls

This is 14 days of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021

The Container control

The Container Widget can be used to create a visible rectangle element. Containers can be decorated with boxdecorations, such as backgrounds, borders, or shadows. Container also allows you to set margins, inner margins, and size constraints. In addition, Containers can use matrices to transform in three dimensions.

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text('Hello Flutter'),
        alignment: Alignment.topCenter,
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
            color: Colors.blue,
            width: 2.0(), (), (), (); }}Copy the code

The Image control

Image control is used to display images. Image.asset imports local images and Image.network imports network images.

Introducing web images

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
        child: Image.network(
          "https://flutter.cn/static/4ea7d7f5f72649f0bcec.png",
          alignment: Alignment.topLeft,
          // color: Colors.blue,
          // colorBlendMode: BlendMode.luminosity,fit: BoxFit.contain, repeat: ImageRepeat.repeat, ), ), ); }}Copy the code

Round the corners of the image

1. Implemented using BoxDecoration

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
          width: 300,
          height: 300,
          decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(150),
            image: DecorationImage(
              image: NetworkImage(
                  "https://flutter.cn/static/4ea7d7f5f72649f0bcec.png"), fit: BoxFit.contain, repeat: ImageRepeat.repeat, ), )), ); }}Copy the code

2. Use ClipOval

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            "https://flutter.cn/static/4ea7d7f5f72649f0bcec.png",
            height: 200,
            width: 200, fit: BoxFit.cover, ), ), ), ); }}Copy the code

Importing local images

1. Create three directories

   Project root directory \images\(2.0x/3.0x/4.0x)

2. Place the images into images and these three folders

3. Configure the pubspec.yaml file

   Configure assets under Flutter:

flutter:
  uses-material-design: true
  assets:
    - images/1.jpg
    - 2.0 x/images / 1. JPG
    - 3.0 x/images / 1. JPG
Copy the code

4. Use in code

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.asset(
            "images/1.jpg",
            height: 200,
            width: 200, fit: BoxFit.cover, ), ), ), ); }}Copy the code

The ListView control

A vertical list

Lists default to vertical lists:

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        // Other widgets can be placed in the array
        ListTile(
          // Set the front icon
          leading: Icon(
            Icons.settings,
            // Change the icon style
            color: Colors.yellow,
            size: 30,
          ),
          title: Text(
            'Light up your Vue tech stack, swastika Nuxt.js practice Notes come'.// Set the font
            style: TextStyle(
              fontSize: 16,
            ),
          ),
          subtitle: Text('As a Vuer (VUE developer), if you don't know the framework, then your VUE stack isn't lit up yet'),
          // Set the back icon
          trailing: Icon(Icons.sentiment_satisfied_sharp),
        ),
        ListTile(
          title: Text('How to Build a Front-end Development environment with Docker'),
          subtitle: Text(Docker can be used in a variety of ways, in addition to deploying projects, but also),
        ),
        ListTile(
          title: Text('How to do front-end Code Review'),
          subtitle: Text('Learn from the Internet giants and conduct front-end Co from the four perspectives of code format, code error, code habit and code optimization'),),,); }}Copy the code

The level of the list

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 240,
      child: ListView(
        // Configure the orientation, default is vertical list
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.yellow,
          ),
          Container(
            width: 180,
            color: Colors.orange,
            // List nesting
            child: ListView(
              children: <Widget>[
                Image.network(
                  "https://flutter.cn/static/4ea7d7f5f72649f0bcec.png",
                ),
                Image.network(
                  "https://flutter.cn/static/4ea7d7f5f72649f0bcec.png",
                ),
              ],
            ),
          ),
          Container(
            width: 180, color: Colors.red, ), ], ), ); }}Copy the code

Dynamic list

Dynamic lists can loop through data dynamically.

class HomeContent extends StatelessWidget {
  // Customize private methods
  List<Widget> _getData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text('this is list $i'))); }return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this._getData(), ); }}Copy the code

Using external data:

// lib/res/listData.dart
List listData = [
  {
    "title": "4 years of experience, 2 months of naked resignation, 40 interviews, Change of mentality and experience summary"."author": "It's the end of the day."."imgUrl":
        "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78e7025d384846e9b0314a53a2adab36~tplv-k3u1fbpfcp-zoom-crop-mark:1304: 1304:1304:734.awebp?"}, {"title": "Am I still on the right path? Summary of half-year study and work of a front end rookie in 2021"."author": "Frozen fish"."imgUrl":
        "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4a813587ec84152b243c3d54323d01e~tplv-k3u1fbpfcp-zoom-crop-mark:1304: 1304:1304:734.awebp?",}];// lib/main.dart
import 'res/listData.dart'; .class HomeContent extends StatelessWidget {
  // Customize private methods
  List<Widget> _getData() {
    var tempList = listData.map((value) {
      return ListTile(
        leading: Image.network(value["imgUrl"]),
        title: Text(value["title"]),
        subtitle: Text(value["author"])); });return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this._getData(), ); }}Copy the code

Using a ListView. Builder:

class HomeContent extends StatelessWidget {
  List<Widget> _getData() {
    var tempList = listData.map((value) {
      return ListTile(
        leading: Image.network(value["imgUrl"]),
        title: Text(value["title"]),
        subtitle: Text(value["author"])); });return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: this._getData().length,
      itemBuilder: (context, index) {
        return this._getData()[index]; }); }}Copy the code

Is equivalent to:

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: listData.length,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Image.network(listData[index]["imgUrl"]),
          title: Text(listData[index]["title"]),
          subtitle: Text(listData[index]["author"])); }); }}Copy the code