skip to Main Content

enter image description here

Hi! I want to put a button to add more chip widget in a list of chip widgets. Please help me!

2

Answers


  1. You can use ActionChip on Wrap

    Wrap(
        children: [
          ActionChip(
            label: Icon(Icons.add),
            onPressed: () {},
          ),
          ActionChip(...,
        ],
      )
    
    Login or Signup to reply.
  2. I write code for adding new button dynamically as you asked:

    enter image description here

    enter image description here

    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!));
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search