單擊時添加相同的小部件 -Flutter

Question

我正面臨着困難。 當我單擊按鈕時，我希望它顯示在底部並帶有刪除選項。 multi_select_chip 的選項不適用於 SDK 2.12 版，誰能告訴我怎么做？

添加按鈕是個好主意嗎，創建一個新的小部件將與我剛剛單擊的按鈕中的數據相結合會是什么樣子？

我是顫振的新手，任何幫助都會非常有用。

 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(() {});
      },
        )
      ]),
 ] ),);
}
}

Answer 1

這是示例。

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(),
    );
  }
}