1

I want to put custom widget: https://github.com/GotJimmy/accordion as AlertDialog content. In general, it works with approach as below:

showAlertDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            scrollable: true,
            title: Text("Select category"),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: MediaQuery.of(context).size.height,
                  width: MediaQuery.of(context).size.width,
                  child: Accordion(
                    maxOpenSections: 1,
                    headerTextStyle: TextStyle(color: Colors.white, fontSize: 17, fontWeight: FontWeight.bold),
                    leftIcon: Icon(Icons.audiotrack, color: Colors.white),
                    children: [
                      AccordionSection(
                        isOpen: true,
                        headerText: 'Introduction',
                        content: Icon(Icons.airplanemode_active, size: 200, color: Colors.amber),
                      ),
                      AccordionSection(
                        isOpen: true,
                        headerText: 'About Us',
                        content: Icon(Icons.airline_seat_flat, size: 120, color: Colors.blue[200]),
                      ),
                      AccordionSection(
                        isOpen: true,
                        headerText: 'Company Info',
                        content: Icon(Icons.airplay, size: 70, color: Colors.green[200]),
                      ),
                      AccordionSection(
                        isOpen: true,
                        headerText: 'Contact',
                        content: Icon(Icons.contact_page, size: 300, color: Colors.grey),
                      ),
                      AccordionSection(
                        isOpen: false,
                        headerText: 'Technical Jobs',
                        content: Icon(Icons.computer, size: 200, color: Colors.amber),
                      ),
                      AccordionSection(
                        isOpen: false,
                        headerText: 'Administrative Jobs',
                        content: Icon(Icons.emoji_people, size: 200, color: Colors.amber),
                      ),
                      AccordionSection(
                        isOpen: false,
                        headerText: 'Culture',
                        content: Icon(Icons.calculate_rounded, size: 200, color: Colors.green),
                      ),
                      AccordionSection(
                        isOpen: false,
                        headerText: 'Community',
                        content: Icon(Icons.commute_outlined, size: 200, color: Colors.blueAccent),
                      ),
                      AccordionSection(
                        isOpen: false,
                        headerText: 'Friends Of Us',
                        content: Icon(Icons.child_friendly, size: 200, color: Colors.red),
                      ),
                      AccordionSection(
                        isOpen: false,
                        headerText: 'Map',
                        content: Icon(Icons.map, size: 200, color: Colors.blue),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        });
  }

However, I'm not satisfied with that. I want to force alert dialog to fit child widget height whan items are expanded/collapsed to avoid redundant empty space below my expandable list - dialog size should be changed on expand/collaps group when required or display scrollbar if there's no room to display all items. This is what I'm getting now:

enter image description here

Any ideas?

user1209216
  • 7,404
  • 12
  • 60
  • 123
  • This is a tough problem! You've probably already come accross it, but I found [this github issue](https://github.com/flutter/flutter/issues/18108) which discusses a similar problem, except with ListViews. The issue is that these have unconstrained height by default, and by forcing them into a container you get extra space you don't want. I thought for a second that using a `CustomScrollView`with slivers could help, but even if it would for normal lists, the Accordion is not supported. – fravolt May 20 '21 at 12:01
  • From the Github issue above specifically, the last comment mentions an answer they wrote on StackOverflow on the original question, [link to answer](https://stackoverflow.com/a/65188394/15469537), which measures the view and adjusts the size accordingly. While not an ideal solution, this might help you to come up with something that works for your purpose – fravolt May 20 '21 at 12:09
  • Well, must say that question is mine, however I am unable to apply the same solution here. – user1209216 May 20 '21 at 16:13

0 Answers0