0

I want too many option kind of Elevated buttons in one screen, which needed to be scrollable. I have tried Row widget instead of column and gives error, I don't how to place them side by side and below according to the screen size.Pls guide me where I am going wrong? Thanks. The tried code is below:-

  Container(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 70, vertical: 20),
                      child: ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: hobbieslist.length,
                        itemBuilder: (BuildContext context, index) {
                          return  Padding(
                              padding: const EdgeInsets.all(4.0),
                              child: ElevatedButton(
                                child: Text("${hobbieslist[index]["name"]}"
                                  ,style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500,
                                    // color: man ? mRed : Colors.blueGrey
                                  ),
                                ),
                                onPressed: (){
                                  setState(() {
                                    if (selected.length < 3) {
                                      hobbieslist[index]["ontap"] =
                                      !hobbieslist[index]["ontap"];
                                      if (hobbieslist[index]["ontap"]) {
                                        selected.add(hobbieslist[index]["name"]);
                                        print(hobbieslist[index]["name"]);
                                        print(selected);
                                      } else {
                                        selected.remove(hobbieslist[index]["name"]);
                                        print(selected);
                                      }
                                    } else {
                                      if (hobbieslist[index]["ontap"]) {
                                        hobbieslist[index]["ontap"] =
                                        !hobbieslist[index]["ontap"];
                                        selected.remove(hobbieslist[index]["name"]);
                                      } else {

                                        Fluttertoast.showToast( msg: "Can only select 5",
                                            toastLength: Toast.LENGTH_SHORT,
                                            gravity: ToastGravity.BOTTOM,
                                            timeInSecForIosWeb: 3,
                                            backgroundColor: Colors.blueGrey,
                                            textColor: Colors.white,
                                            fontSize: 16.0);
                                      }
                                    }

                                  });
                                },
                                style: ElevatedButton.styleFrom(
                                  primary:  hobbieslist[index]["ontap"] ? mRed : Colors.blueGrey,
                                  onPrimary: white,
                                  elevation: 5,
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20.7)
                                  ),
                                ),
                              )

                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),

I am getting this:-enter image description here

And I want this:- enter image description here

GAGAN SINGH
  • 261
  • 2
  • 17

2 Answers2

0

Do not use Row() instead of Column(), use Row() as the children of Column.

child: Column(
  children: [
   Row(
    children: [
      button1(),
      button2(),
      button3(),
    ]
   ),
   Row(
    children: [
      button4(),
      button5(),
      button6(),
    ]
   ),
 ]
)

You can put rows in a column like this.

aoiTenshi
  • 547
  • 1
  • 6
  • 20
  • Yes,I have tried this and it gives me this error:-RenderBox was not laid out: RenderFlex#89249 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1940 pos 12: 'hasSize' – GAGAN SINGH May 17 '21 at 14:30
  • Because your list does not have height. You should wrap your Listview.builder with SizedBox() with a specific height or Expanded(). This may help you https://stackoverflow.com/questions/52801201/flutter-renderbox-was-not-laid-out – aoiTenshi May 17 '21 at 14:35
  • Can you try to give height property to your most-parent container widget, too. – aoiTenshi May 17 '21 at 14:40
  • I have tried code of the link sent by you and now it is showing all the buttons in list view horizontal. I have to slide them to right . It is not coming in one screen – GAGAN SINGH May 17 '21 at 14:44
  • should I try grid view builder? – GAGAN SINGH May 17 '21 at 14:47
  • Make the row parent widget and put columns inside it. Just reverse the rows and columns maybe? – aoiTenshi May 17 '21 at 14:52
0

For achieving this requirement u should use Chips[https://api.flutter.dev/flutter/material/FilterChip-class.html]

var hobbies = ["a", "b","c","d"];

Scaffold(body:Wrap(children:[]) )
 generate_tags() {
    return hobbies.map((hobby) => buildChip(hobby)).toList();
  }

  buildChip(name) {
    return FilterChip(
        selected: selected_tags.contains(name),
        selectedColor: Colors.blue.shade800,
        disabledColor: Colors.blue.shade400,
        labelStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        label: Text("#${name}"));
  }

I guess that will work .

Rajshekhar
  • 571
  • 5
  • 9