【问题标题】:How to add different images in a dropdown in flutter如何在颤动的下拉列表中添加不同的图像
【发布时间】:2019-05-10 11:03:07
【问题描述】:

我试着做一个这样的下拉菜单:

我在 stackoverflow 中找到了这个在下拉列表中添加图片的示例,但目前它是一个列表,我不知道如何添加不同的图片

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),),
   ),
  );
 }
 }

【问题讨论】:

  • 那你的问题是什么?您希望您的图像不仅出现在菜单列表项中,而且还出现在主 DropdownButton 上?
  • 我搜索以在下拉菜单中添加图像,如屏幕截图。该代码示例仅适用于一张图片,我不知道如何修改此代码以添加更多图片,例如我的屏幕截图。

标签: flutter dropdown


【解决方案1】:

我用 JSON 做到了。您可以在下拉列表中调用多个值。

import "package:flutter/material.dart";
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;


class TestApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<TestApp> {
  String _mySelection;

  final String url = "http://webmyls.com/php/getdata.php";

  List data = List(); //edited line

  Future<String> getSWData() async {
    var res = await http
        .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);

    setState(() {
      data = resBody;
    });

    print(resBody);

    return "Sucess";
  }

  @override
  void initState() {
    super.initState();
    this.getSWData();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Hospital Management"),
      ),
      body: new Center(
        child: new DropdownButton(
          items: data.map((item) {
            return new DropdownMenuItem(
              child: Row(
                children: <Widget>[
                   Text(item['item_name']),
                ],
              ),
              value: item['id'].toString(),
            );
          }).toList(),
          onChanged: (newVal) {
            setState(() {
              _mySelection = newVal;
            });
          },
          value: _mySelection,
        ),
      ),
    );
  }
}

修改这个,

 children: <Widget>[
 Text(item['item_name']),
 Text(item['item_name']),
 Text(item['item_name']),
 ],

【讨论】:

    猜你喜欢
    • 2014-10-27
    • 2020-01-25
    • 1970-01-01
    • 1970-01-01
    • 2021-10-26
    • 2023-04-11
    • 2020-03-17
    • 2015-01-25
    • 2020-06-10
    相关资源
    最近更新 更多