Alert box with multi select chip in flutter

2,856

In AlertDialog's content use Container and constraints, and in Container's child wrap SingleChildScrollView then wrap MultiSelectChip

code snippet

return AlertDialog(
            title: Text("Report Video"),
            content: Container(
              constraints: BoxConstraints(
                  maxHeight: 100.0,
              ),
              child: SingleChildScrollView(
                child: MultiSelectChip(
                  reportList,
                  onSelectionChanged: (selectedList) {
                    setState(() {
                      selectedReportList = selectedList;
                    });
                  },
                ),
              ),
            ),
            actions: <Widget>[
              FlatButton(
                child: Text("Report"),
                onPressed: () => Navigator.of(context).pop(),
              )
            ],
          );
        })

full code

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  List<String> reportList = [
    "Not relevant",
    "Illegal",
    "Spam",
    "Offensive",
    "Uncivil",
    "a123",
    "b234",
    "c2314",
    "aaaa",
    "a",
    "1Not relevant",
    "2Illegal",
    "3Spam",
    "4Offensive",
    "5Uncivil",
    "6a123",
    "7b234",
    "8c2314",
    "9aaaa",
    "0a",
    "Not relevant",
    "Illegal",
    "Spam",
    "Offensive",
    "Uncivil",
    "a123",
    "b234",
    "c2314",
    "aaaa",
    "a",
    "1Not relevant",
    "2Illegal",
    "3Spam",
    "4Offensive",
    "5Uncivil",
    "6a123",
    "7b234",
    "8c2314",
    "9aaaa",
    "0a",
  ];
  List<String> selectedReportList = List();
  _showReportDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          //Here we will build the content of the dialog
          return AlertDialog(
            title: Text("Report Video"),
            content: Container(
              constraints: BoxConstraints(
                  maxHeight: 100.0,
              ),
              child: SingleChildScrollView(
                child: MultiSelectChip(
                  reportList,
                  onSelectionChanged: (selectedList) {
                    setState(() {
                      selectedReportList = selectedList;
                    });
                  },
                ),
              ),
            ),
            actions: <Widget>[
              FlatButton(
                child: Text("Report"),
                onPressed: () => Navigator.of(context).pop(),
              )
            ],
          );
        });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("Report"),
              onPressed: () => _showReportDialog(),
            ),
            Text(selectedReportList.join(" , ")),
          ],
        ),
      ),
    );
  }
}
class MultiSelectChip extends StatefulWidget {
  final List<String> reportList;
  final Function(List<String>) onSelectionChanged;
  MultiSelectChip(this.reportList, {this.onSelectionChanged});
  @override
  _MultiSelectChipState createState() => _MultiSelectChipState();
}
class _MultiSelectChipState extends State<MultiSelectChip> {
  // String selectedChoice = "";
  List<String> selectedChoices = List();
  _buildChoiceList() {
    List<Widget> choices = List();
    widget.reportList.forEach((item) {
      choices.add(Container(
        padding: const EdgeInsets.all(2.0),
        child: ChoiceChip(
          label: Text(item),
          selected: selectedChoices.contains(item),
          onSelected: (selected) {
            setState(() {
              selectedChoices.contains(item)
                  ? selectedChoices.remove(item)
                  : selectedChoices.add(item);
              widget.onSelectionChanged(selectedChoices);
            });
          },
        ),
      ));
    });
    return choices;
  }
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: _buildChoiceList(),
    );
  }
}

Share:
2,856
Author by

HARISH

Updated on December 14, 2022

Comments

  • HARISH 11 minutes

    I have a multiselect chip in my app , but when since the data in the AlertDialog depends dynamically, it will be 1 or 100, so I have added SingleChildScrollView over the alert Dialog to give scrolling if there are more entries , but when I added SingleChildScrollView my alert box goes to top of the screen like this, I want it to align in center,

    If I removed the SingleChildScrollView then It will come like this which I wanted. but If there are lot of entries I cant select because It cant cover the entire data?

    Is there any way where I can align it to center of screen with scroll enabled?

    Thanks

    showDialog(
                context: context,
                builder: (BuildContext context) {
                  return SingleChildScrollView(
                      child: AlertDialog(
                    title: Text("choose items"),
                    content: MultiSelectChip(
                      reportList,
                      onSelectionChanged: (selectedList) {
                        setState(() {
                          listSelectedItem = selectedList;
                        });
                      },
                    ),
                    actions: <Widget>[
                      FlatButton(
                          child: Text("CANCEL"),
                          onPressed: () {
                            setState(() {
                              dropdownSelected = null;
                              listSelectedItem.clear();
                            });
                            Navigator.of(context).pop();
                          }),