以下拉值显示图像

时间:2018-01-25 09:45:01

标签: dart dropdown flutter

我尝试创建一个Dart多页面应用程序。

我创建了一个从包含表单的抽屉导航的页面。它有一个容器,用于从下拉按钮获取用户选择的项目。 在这个下拉列表中,我需要在每个项目中给出一个图像。如何通过自定义下拉按钮来完成此操作?有可能吗?

我附上了我的应用程序所需内容的示例图片。

enter image description here

1 个答案:

答案 0 :(得分:1)

这是一个简单的例子,展示如何开始:

enter image description here

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => new _TestState();
}

class _TestState extends State<Test> {
  var _img = new Image.network("https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/TUCPamplona10.svg/500px-TUCPamplona10.svg.png");
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Test Drop"),),
      body: new Center(
        child: new Container (
            height: 50.0,
            child:new DropdownButton(
            items: new List.generate(10, (int index){
          return new DropdownMenuItem(child: new Container(
            padding: const EdgeInsets.only(bottom: 5.0),
            height: 100.0,
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                _img,
                new Text("Under 10")
              ],
            ),
          ));
        }) 
        , onChanged: null),),
      ),
    );
  }
}