skip to Main Content

Good evening,

I would like to know if it is possible to put a create button in the application and when users click on it, it should create a button next to it that will serve as a storage category.

Thanks in advance

Create a button but imposssible.

2

Answers


  1. Chosen as BEST ANSWER

    Thank you very much.

    I am not far from the truth. I have an error: Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: RenderSemanticsAnnotations#dd25b relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1972 pos 12: 'hasSize'


  2. The question explanation it not enough but as I understand :

    First you need to store the buttons in the list

    List<Widget> buttons = <Widget>[];
    

    Create the button widget you want to be created, for example:

    
    class CreatedButtonWidget extends StatelessWidget {
      const CreatedButtonWidget({
        super.key,
      });
    
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: const EdgeInsets.all(10),
          child: MaterialButton(
            onPressed: () {},
            color: Colors.orange,
            child: const Text("Button"),
          ),
        );
      }
    }
    

    Then the Widget that will add the new button is ListView.builder as you can use the buttons list with it :

    ListView.builder(
      itemCount: buttons.length,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
        return buttons[index];
       },
     ),
    

    Then create the method that will add the new widget to the UI:

    void _createNewButton() {
        setState(
          () {
            buttons.add(
              const CreatedButtonWidget(),
            );
          },
        );
      }
    

    finally create a static button that when user press on it, it will create the new button :

    MaterialButton(
      onPressed: () {
        _createNewButton();
      },
      color: Colors.cyan,
      shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(15),
       ),
       child: const Text("Create Button"),
     ),
    

    Full code:

    class CreateButtonWidget extends StatefulWidget {
      const CreateButtonWidget({super.key});
    
      @override
      State<CreateButtonWidget> createState() => _CreateButtonWidgetState();
    }
    
    class _CreateButtonWidgetState extends State<CreateButtonWidget> {
      List<Widget> buttons = <Widget>[];
    
      void _createNewButton() {
        setState(
          () {
            buttons.add(
              const CreatedButtonWidget(),
            );
          },
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Button generator"),
            backgroundColor: Colors.cyan[200],
          ),
          body: Column(
            children: <Widget>[
              Row(
                children: [
                  buttons.isEmpty
                      ? const Text("No Buttons yet")
                      : Expanded(
                          child: SizedBox(
                            height: context.screenHeight * .08,
                            child: ListView.builder(
                              itemCount: buttons.length,
                              scrollDirection: Axis.horizontal,
                              itemBuilder: (context, index) {
                                return buttons[index];
                              },
                            ),
                          ),
                        ),
                ],
              ),
              Center(
                child: MaterialButton(
                  onPressed: () {
                    _createNewButton();
                  },
                  color: Colors.cyan,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: const Text("Create Button"),
                ),
              )
            ],
          ),
        );
      }
    }
    
    class CreatedButtonWidget extends StatelessWidget {
      const CreatedButtonWidget({
        super.key,
      });
    
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: const EdgeInsets.all(10),
          child: MaterialButton(
            onPressed: () {},
            color: Colors.orange,
            child: const Text("Button "),
          ),
        );
      }
    }
    

    Hope that’s help you !!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search