groups_field

1
import 'package:flutter/material.dart';
2
import 'package:groups_field/groups_field.dart';
3

4
void main() {
5
  runApp(const MyApp());
6
}
7

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

11
  // This widget is the root of your application.
12
  @override
13
  Widget build(BuildContext context) {
14
    return MaterialApp(
15
      title: 'Flutter Demo',
16
      theme: ThemeData(
17
        // This is the theme of your application.
18
        //
19
        // Try running your application with "flutter run". You'll see the
20
        // application has a blue toolbar. Then, without quitting the app, try
21
        // changing the primarySwatch below to Colors.green and then invoke
22
        // "hot reload" (press "r" in the console where you ran "flutter run",
23
        // or simply save your changes to "hot reload" in a Flutter IDE).
24
        // Notice that the counter didn't reset back to zero; the application
25
        // is not restarted.
26
        primarySwatch: Colors.blue,
27
      ),
28
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
29
    );
30
  }
31
}
32

33
class Tag {
34
  int id;
35
  String name;
36

37
  Tag({
38
    required this.id,
39
    required this.name,
40
  });
41
}
42

43
class MyHomePage extends StatefulWidget {
44
  const MyHomePage({
45
    required this.title,
46
    Key? key,
47
  }) : super(key: key);
48

49
  // This widget is the home page of your application. It is stateful, meaning
50
  // that it has a State object (defined below) that contains fields that affect
51
  // how it looks.
52

53
  // This class is the configuration for the state. It holds the values (in this
54
  // case the title) provided by the parent (in this case the App widget) and
55
  // used by the build method of the State. Fields in a Widget subclass are
56
  // always marked "final".
57

58
  final String title;
59

60
  @override
61
  _MyHomePageState createState() => _MyHomePageState();
62
}
63

64
class _MyHomePageState extends State<MyHomePage> {
65
  late final Group<String> simpleGroup;
66
  late final Group<Tag> tagsGroup;
67

68
  @override
69
  void initState() {
70
    super.initState();
71

72
    simpleGroup = Group<String>(
73
        attribute: "",
74
        getString: (value) => value,
75
        onCreate: (text) async => text,
76
        existFields: [
77
          "First simple group",
78
          "Second simple group",
79
        ],
80
        fieldBuilder: (value) {
81
          return Container(
82
            margin: EdgeInsets.symmetric(
83
              horizontal: 2,
84
              vertical: 3,
85
            ),
86
            decoration: BoxDecoration(
87
              borderRadius: BorderRadius.circular(6),
88
              color: Color(0xFF9eabc0),
89
            ),
90
            child: Row(
91
              mainAxisSize: MainAxisSize.min,
92
              children: [
93
                Container(
94
                  padding: EdgeInsets.only(
95
                    top: 3,
96
                    right: 3,
97
                    bottom: 3,
98
                    left: 6,
99
                  ),
100
                  decoration: BoxDecoration(
101
                    color: Colors.white.withOpacity(0.3),
102
                  ),
103
                  child: Text(
104
                    "Simple group! ",
105
                    style: TextStyle(
106
                      color: Color(0xFFffffff),
107
                    ),
108
                  ),
109
                ),
110
                Container(
111
                  padding: EdgeInsets.symmetric(
112
                    horizontal: 6,
113
                    vertical: 3,
114
                  ),
115
                  child: Text(
116
                    value,
117
                    style: TextStyle(
118
                      color: Color(0xFFffffff),
119
                      fontWeight: FontWeight.bold,
120
                    ),
121
                  ),
122
                ),
123
              ],
124
            ),
125
          );
126
        });
127

128
    int _idForCreatedTag = 2;
129

130
    final tagsSuggestions = [
131
      Tag(id: 1, name: "First tag"),
132
      Tag(id: 2, name: "Second tag"),
133
    ];
134

135
    tagsGroup = Group<Tag>(
136
      attribute: "#",
137
      getString: (value) => value.name,
138
      onCreate: (text) async => Tag(id: _idForCreatedTag++, name: text),
139
      existFields: [
140
        Tag(id: 0, name: "0"),
141
        Tag(id: 1, name: "1"),
142
      ],
143
      suggestions: tagsSuggestions,
144
      suggestionBuilder: (tag) {
145
        return Container(
146
          margin: EdgeInsets.symmetric(
147
            horizontal: 6,
148
            vertical: 3,
149
          ),
150
          padding: EdgeInsets.symmetric(
151
            horizontal: 6,
152
            vertical: 3,
153
          ),
154
          decoration: BoxDecoration(
155
            borderRadius: BorderRadius.circular(6),
156
            color: Color(0xFF53b9ea),
157
          ),
158
          child: Text(
159
            tag.name,
160
            style: TextStyle(
161
              color: Color(0xFFffffff),
162
            ),
163
          ),
164
        );
165
      },
166
      fieldBuilder: (value) {
167
        return Container(
168
          margin: EdgeInsets.symmetric(
169
            horizontal: 2,
170
            vertical: 3,
171
          ),
172
          padding: EdgeInsets.symmetric(
173
            horizontal: 6,
174
            vertical: 3,
175
          ),
176
          decoration: BoxDecoration(
177
            borderRadius: BorderRadius.circular(6),
178
            color: Color(0xFF53b9ea),
179
          ),
180
          child: Text(
181
            "#" + value.name,
182
            style: TextStyle(
183
              color: Color(0xFFffffff),
184
            ),
185
          ),
186
        );
187
      },
188
    );
189
  }
190

191
  @override
192
  Widget build(BuildContext context) {
193
    return Scaffold(
194
      body: Container(
195
        margin: const EdgeInsets.symmetric(
196
          horizontal: 6,
197
          vertical: 3,
198
        ),
199
        padding: const EdgeInsets.symmetric(
200
          horizontal: 12,
201
          vertical: 12,
202
        ),
203
        decoration: BoxDecoration(
204
          color: Colors.white,
205
          border: Border.all(
206
            color: Colors.lightBlue,
207
          ),
208
        ),
209
        child: Column(
210
          children: [
211
            Row(
212
              children: [
213
                Container(
214
                  margin: EdgeInsets.only(right: 12),
215
                  child: const Text(
216
                    "Search:",
217
                    style: TextStyle(
218
                      fontWeight: FontWeight.bold,
219
                    ),
220
                  ),
221
                ),
222
                Expanded(
223
                  child: GroupsField(
224
                    isScrollable: true,
225
                    groups: [
226
                      simpleGroup,
227
                      tagsGroup,
228
                    ],
229
                  ),
230
                ),
231
              ],
232
            ),
233
            Row(
234
              children: [
235
                Container(
236
                  margin: EdgeInsets.only(right: 12),
237
                  child: const Text(
238
                    "Search:",
239
                    style: TextStyle(
240
                      fontWeight: FontWeight.bold,
241
                    ),
242
                  ),
243
                ),
244
                Expanded(
245
                  child: GroupsField(
246
                    isScrollable: false,
247
                    groups: [
248
                      simpleGroup,
249
                      tagsGroup,
250
                    ],
251
                  ),
252
                ),
253
              ],
254
            ),
255
            Row(
256
              children: [
257
                Container(
258
                  margin: EdgeInsets.only(right: 12),
259
                  child: const Text(
260
                    "Search:",
261
                    style: TextStyle(
262
                      fontWeight: FontWeight.bold,
263
                    ),
264
                  ),
265
                ),
266
                Expanded(
267
                  child: GroupsField(
268
                    isScrollable: false,
269
                    textFieldDecoration: InputDecoration(
270
                      hintText: 'Some hint?',
271
                    ),
272
                    groups: [
273
                      simpleGroup,
274
                      tagsGroup,
275
                    ],
276
                  ),
277
                ),
278
              ],
279
            ),
280
          ],
281
        ),
282
      ),
283
    );
284
  }
285
}
286