Add the same Widget on click -Flutter

Question

I'm facing difficulties to make it. When I click the button, I would like it to appear at the bottom with a delete option. The option with multi_select_chip does not work well with SDK version 2.12, Can anyone tell me how to do it?

Is adding buttons a good idea, and what would it look like to create a new widget that will be combined with data from the button that I just clicked?

I am new to flutter, and any help will be really useful.

 class Demo extends StatefulWidget {
 @override
 _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
List<Widget> widgets = <Widget>[];

@override
 Widget build(BuildContext context) {
return Center(
  child: Column(
    children: widgets,
  ),
);
}

  Widget show() {
   return Center(
     child: Column(
    children: widgets,
    ),
    );
  }

 @override
void initState() {
widgets = <Widget>[
  // Text(
  //   "This is a sample text",
  //   style: TextStyle(fontSize: 40),
  // ),
       Container(
       padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Wrap(
              spacing: 8.0,
              // line interval
              runSpacing: 8.0,
              children: <Widget>[
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 70, height: 35),
                  child: ElevatedButton(
                      child: Text(
                        'Lion',
                        style: TextStyle(fontSize: 13),
                      ),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                const SizedBox(width: 8.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 125, height: 35),
                  child: ElevatedButton(
                      child: Text(
                        'Flamingo',
                        style: TextStyle(fontSize: 13),
                      ),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                const SizedBox(width: 8.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 105, height: 35),
                  child: ElevatedButton(
                      child: Text(
                        'Hippo',
                        style: TextStyle(fontSize: 13),
                      ),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                // ]),
                // const SizedBox(width: 80.0),
                // Row(children: <Widget>[
                //   const SizedBox(width: 40.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 100, height: 35),
                  child: ElevatedButton(
                      child:
                          Text("Horse", style: TextStyle(fontSize: 13)),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                const SizedBox(width: 8.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 135, height: 35),
                  child: ElevatedButton(
                      child: Text("Tiger",
                          style: TextStyle(fontSize: 13)),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
                const SizedBox(width: 4.0),
                ConstrainedBox(
                  constraints:
                      const BoxConstraints.tightFor(width: 70, height: 35),
                  child: ElevatedButton(
                      child: Text("INNE", style: TextStyle(fontSize: 13)),
                      onPressed: () {
                        debugPrint("clicked");
                        debugPrint('widgets: $widgets');
                        widgets.insert(1, SampleContainer());
                        setState(() {});
                      },
                      style: ElevatedButton.styleFrom(
                          primary: purple, elevation: 10)),
                ),
              ]),
        ]),
  ),
];
 }

 // Widget show() {
  //   return SampleContainer();
  // }

   }

      class SampleContainer extends StatefulWidget {
   @override
 _SampleContainerState createState() => _SampleContainerState();
}.  

  class _SampleContainerState extends State<SampleContainer> {
  @override
 Widget build(BuildContext context) {
return Container(
  padding: EdgeInsets.all(16.0),
  child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Wrap(
            spacing: 8.0,
            // line interval
            runSpacing: 8.0,
            children: <Widget>[
    const SizedBox(width: 40.0),
    ElevatedButton(
      child: Text("INNE"),
      onPressed: () {
        setState(() {});
      },
        )
      ]),
 ] ),);
}
}

Vadim Popov · Accepted Answer · 2021-07-07 15:56:38Z

1

Here is the example.

import 'package:flutter/material.dart';

class WidgetPicker extends StatefulWidget {
  const WidgetPicker({Key key}) : super(key: key);

  @override
  _WidgetPickerState createState() => _WidgetPickerState();
}

class _WidgetPickerState extends State<WidgetPicker> {
  List<String> values = [
    'Hello',
    'Hello2',
    'Hello3',
  ];

  List<String> pickedValues = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildValues(),
          const SizedBox(
            height: 30,
          ),
          _buildPickeds(),
        ],
      ),
    );
  }

  Widget _buildValues() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: values
          .map(
            (value) => GestureDetector(
              onTap: () {
                if (pickedValues.contains(value)) {
                  pickedValues.remove(value);
                } else {
                  pickedValues.add(value);
                }
                setState(() {});
              },
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 10,
                ),
                color: Colors.blueGrey,
                child: Text(
                  value,
                ),
              ),
            ),
          )
          .toList(),
    );
  }

  Widget _buildPickeds() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: pickedValues
          .map(
            (value) => GestureDetector(
              onTap: () {
                if (pickedValues.contains(value)) {
                  pickedValues.remove(value);
                } else {
                  pickedValues.add(value);
                }
                setState(() {});
              },
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 10,
                ),
                color: Colors.red,
                child: Text(
                  value,
                ),
              ),
            ),
          )
          .toList(),
    );
  }
}

answered Jul 7, 2021 at 15:56

Vadim Popov

7728 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

azeter09 Over a year ago

Do U know how to make a search items from list and also add new container in that way?

Vadim Popov Over a year ago

@azeter09 I think yes. Create a new question and I'll help you

azeter09 Over a year ago

Here is a link after changes: stackoverflow.com/questions/68296971/…

Vadim Popov Over a year ago

@azeter09 ok, 1-2 hours)

Collectives™ on Stack Overflow

Add the same Widget on click -Flutter

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related