Inscription
- Holding the sword in the world, starting from your accumulation, wherever you go, you must strive for perfection, that is, toss every day.

important news

• NetEase Cloud [Fun Big Front-End] Supporting Course

• EDU supporting tutorial

• A series of articles on the accumulation of bits and pieces developed by Flutter

1 Add dependencies

flutter_tag_layout: ^0.0.3

• 1

The github source code is here
The latest version of pub.flutter-io.cn is here

2 guide pack

where text labels are used

import 'package:flutter_tag_layout/flutter_tag_layout.dart';

• 1

3 Label creation text

class TextTagPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<TextTagPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("文本标签"),
        ),
        body: Container(
          margin: EdgeInsets.all(30.0),
          child: Row( children :  [ 
            TextTagWidget ( "Text Tag" ) , 
            TextTagWidget ( "Test" ) , 
          ] ) , 
        ) ) ; 
  } 
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

The operation effect is as follows:

4 Use with flow layout

class TextWarpTagPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class  _FirstPageState  extends  State < TextWarpTagPage >  {
  
  ///Text tag collection 
  List < String > tagList =  [ "text tag" ,  "test" ,  "what is this" ,  "good morning" , "eat" ,  "one more time" ] ;

  @override
  Widget build(BuildContext context) {
    List<Widget> itemWidgetList = [];

    for (var i = 0; i < tagList.length; i++) {
      var str = tagList[i];
      itemWidgetList.add(TextTagWidget("$str"));
    }

    return  Scaffold ( 
        appBar :  AppBar ( 
          title :  Text ( "Text Label" ) , 
        ) , 
        body :  Container ( 
          margin : EdgeInsets . only ( top :  30.0 , left :  10 , right :  10 ) ,

          ///Flow layout 
          child :  Wrap ( 
              spacing :  8.0 , 
              runSpacing :  8.0 ,

              /// Subtag 
              children : itemWidgetList ) , 
        ) ) ; 
  } 
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

The operation effect is as follows:

complete