Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
173 views
in Technique[技术] by (71.8m points)

How to display an Icon and Text for each item of DropdownButton in Flutter?

I want to display a Row for each DropdownMenuItem of DropdownButton in Flutter. I want to display an icon and a text in the Row.

If anybody can please help me with it.

This is how I've tried. I've tried to add the Icon and Text in a Row for each item in the DropdownButton.

    class _LoginPageState extends State<LoginPage> {
  Widget dropdownValue = Row(
    children: [Icon(Icons.star), Text("One")],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Container(
        child: ListView(
          padding: EdgeInsets.all(20.0),
          children: [
            Padding(padding: EdgeInsets.all(displayHeight(context) * 0.02)),
            Center(
              child: Image(
                image: AssetImage('assets/images/sendmelogo.png'),
                height: displayHeight(context) * 0.07,
              ),
            ),
            Padding(padding: EdgeInsets.all(displayHeight(context) * 0.02)),
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: Colors.grey[200],
              ),
              // padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
              padding: EdgeInsets.all(10.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("Sending to:", textAlign: TextAlign.start),
                  DropdownButton<Widget>(
                    value: dropdownValue,
                    icon: Icon(Icons.arrow_downward),
                    iconSize: 24,
                    elevation: 16,
                    style: TextStyle(color: Colors.deepPurple),
                    underline: Container(
                      height: 2,
                      color: Colors.deepPurpleAccent,
                    ),
                    onChanged: (Widget newValue) {
                      setState(() {
                        dropdownValue = newValue;
                      });
                    },
                    items: <Widget>[
                      Row(
                        children: [Icon(Icons.star), Text("One")],
                      ),
                      Row(
                        children: [Icon(Icons.plus_one), Text("Two")],
                      )
                    ].map<DropdownMenuItem<Widget>>((Widget value) {
                      return DropdownMenuItem<Widget>(
                        value: value,
                        child: Container(
                          child: value,
                        ),
                      );
                    }).toList(),
                  ),
                ],
              ),
            ),
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
DropdownButton<String>(
  items: <String>['Hillary', 'Joe', 'Felix', 'Monica'].map((name) {
    return DropdownMenuItem<String>(
      value: name,
      // Your row here:
      child: Row(
      children: [
        Icon(Icons.person),
        Text(name),
      ],
    ),
  );
  }).toList(),
  onChanged: (selectedName) {
    // do some action here
  },
),

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...