Hi! I want to put a button to add more chip widget in a list of chip widgets. Please help me!
2
You can use ActionChip on Wrap
ActionChip
Wrap
Wrap( children: [ ActionChip( label: Icon(Icons.add), onPressed: () {}, ), ActionChip(..., ], )
I write code for adding new button dynamically as you asked:
import 'package:flutter/material.dart'; void main() => runApp(MainApplication()); class MainApplication extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: HomePage()); } } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { List<String> _selectedChips = []; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Home Page'), ), body: CategoryPage( selectedList: _selectedChips, )); } } class CategoryPage extends StatefulWidget { final List<String> selectedList; CategoryPage({this.selectedList = const []}); @override _CategoryPageState createState() => _CategoryPageState(); } class _CategoryPageState extends State<CategoryPage> { List<String> data = ['Add', 'Food', 'Entertainment', 'Other', 'Clear']; List<String> selectedList = []; @override void initState() { super.initState(); selectedList = widget.selectedList; } @override Widget build(BuildContext context) { return Scaffold( body: Wrap( spacing: 6, runAlignment: WrapAlignment.center, crossAxisAlignment: WrapCrossAlignment.center, children: data.map( (dataItem) { return FilterChip( label: Text(dataItem), selected: selectedList.contains(dataItem), backgroundColor: Colors.grey, selectedColor: Colors.white, elevation: 3, labelStyle: TextStyle( color: !selectedList.contains(dataItem) ? Colors.white : Colors.black, ), onSelected: (bool selected) { setState( () { if (dataItem == 'Add') { addElement(dataItem: dataItem, newItem: "item New"); } }, ); }, ); }, ).toList(), ), ); } void addElement({String? dataItem, String? newItem}) { setState(() => data.insert(data.indexOf(dataItem!) + 1, newItem!)); } }
Click here to cancel reply.
2
Answers
You can use
ActionChip
onWrap
I write code for adding new button dynamically as you asked: