如何在Flutter中创建自定义下拉框

用户名

如何在Flutter中创建以下布局?我尝试使用下拉窗口小部件创建它。但是,我无法获得此布局。

是否可以给我一些提示,以了解相同布局的活跃程度

谢谢

需要布局

在此处输入图片说明

点击

在此处输入图片说明

我的代码段

Widget _buildHeading() {
    return Padding(
      padding: const EdgeInsets.only(top: 22.5),
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height * 0.06,
        decoration: BoxDecoration(
          color: Palette.RANDSTAD_DARK_BLUE,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
              child: Text(
                "text bar",
                style: TextStyle(
                  color: Palette.WHITE,
                  height: 1.2,
                  fontSize: 20.0,
                ),
              ),
            ),

            //added
            Container(
                width: 130.0,
                child: DropdownButton<String>(
                  value: dropdownValue,
                  icon: Icon(Icons.arrow_downward),
                  iconSize: 24,
                  iconEnabledColor: Palette.WHITE,
                  dropdownColor: Palette.RANDSTAD_DARK_BLUE,
                  underline: SizedBox(),
                  onChanged: (String newValue) async {
                    setState(() {
                      dropdownValue = newValue;
                    });
                  },
                  items: <String>[
                    'English',
                    'Spanish',
                    'Dutch',
                    'Polish',
                    "French",
                    "German"
                  ].map<DropdownMenuItem<String>>((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child:
                          Text(value, style: TextStyle(color: Palette.WHITE)),
                    );
                  }).toList(),
                ))
            //end added
          ],
        ),
      ),
    );
  }
语素

您可以在AppBar操作中使用PopUpMenuButton。该功能是在下面的示例代码中实现的。您可以将其粘贴到main.dart文件中并运行。

工作代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
    
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Hello World'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var language = 'english';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(widget.title), actions: <Widget>[
        PopupMenuButton(
          child: Row(
            children: [
              Text('$language | '),
              Icon(
                Icons.keyboard_arrow_down,
                color: Colors.white,
              )
            ],
          ),
          onSelected: (value) {
            setState(() {
              language = value;
            });

            print(value);
          },
          itemBuilder: (_) {
            return [
              PopupMenuItem(
                  value: '',
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'change language',
                            style: TextStyle(
                              fontFamily: 'Roboto',
                              fontWeight: FontWeight.w500,
                              fontSize: 14,
                            ),
                          ),
                          Icon(
                            Icons.keyboard_arrow_up,
                            color: Colors.black,
                          )
                        ],
                      ),
                      Divider(
                        color: Colors.grey,
                        thickness: 2,
                      ),
                    ],
                  )),
              PopupMenuItem(
                value: 'english',
                child: Text(
                  'english',
                  style: TextStyle(
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w500,
                      fontSize: 14,
                      color:
                          language == 'english' ? Colors.blue : Colors.black),
                ),
              ),
              PopupMenuItem(
                value: 'espanol',
                child: Text(
                  'espanol',
                  style: TextStyle(
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w500,
                      fontSize: 14,
                      color:
                          language == 'espanol' ? Colors.blue : Colors.black),
                ),
              ),
              PopupMenuItem(
                value: 'nederlands',
                child: Text(
                  'nederlands',
                  style: TextStyle(
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w500,
                      fontSize: 14,
                      color: language == 'nederlands'
                          ? Colors.blue
                          : Colors.black),
                ),
              ),
              PopupMenuItem(
                value: 'polski',
                child: Text(
                  'polski',
                  style: TextStyle(
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w500,
                      fontSize: 14,
                      color: language == 'polski' ? Colors.blue : Colors.black),
                ),
              ),
            ];
          },
        ),
        const SizedBox(
          width: 12,
        )
      ]),
      body: new Center(
        child: Text('DEMO'),
      ),
    );
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Flutter中创建自定义日历

来自分类Dev

如何在Flutter中创建自定义列表?

来自分类Dev

如何在AndroidStudio中创建自定义的“下拉菜单” [Java]

来自分类Dev

如何在Android中创建自定义Spinner工具栏下拉菜单

来自分类Dev

如何在Java FX中设置下拉框的宽度

来自分类Dev

如何在Java FX中设置下拉框的宽度

来自分类Dev

如何在 Angularjs 的下拉框列表中设置值?

来自分类Dev

如何在CSS中自定义下拉菜单?

来自分类Dev

如何在Android中创建自定义警报对话框?

来自分类Dev

如何在Angular 9中创建自定义文本框组件

来自分类Dev

如何在mvc中为文本框创建自定义html帮助器

来自分类Dev

如何在Illustrator插件中创建自定义的About对话框

来自分类Dev

如何在Kendo htmlhelper或Jquery中创建自定义确认对话框

来自分类Dev

如何在Flutter中创建自定义材质文本字段

来自分类Dev

如何在Flutter HTTP发布请求中创建自定义标题

来自分类Dev

如何使自定义扩展的启用或禁用下拉框起作用?

来自分类Dev

如何在自定义对话框中设置自定义按钮?

来自分类Dev

如何在自定义对话框中设置自定义按钮?

来自分类Dev

如何在Flutter中设置自定义FontWeight值

来自分类Dev

如何在Flutter中制作自定义按钮形状

来自分类Dev

如何在Flutter中实现自定义窗口?

来自分类Dev

如何在 Flutter 中自定义 Slider 小部件?

来自分类Dev

如何在ActiveAdmin gem中创建自定义页面

来自分类Dev

如何在dart中创建自定义元素?

来自分类Dev

如何在Django中创建自定义选择字段?

来自分类Dev

如何在Android中创建自定义导航抽屉

来自分类Dev

如何在Laravel 4中创建自定义外观

来自分类Dev

如何在Drupal 7中创建自定义块?

来自分类Dev

如何在AngularJs服务中创建自定义事件

Related 相关文章

  1. 1

    如何在Flutter中创建自定义日历

  2. 2

    如何在Flutter中创建自定义列表?

  3. 3

    如何在AndroidStudio中创建自定义的“下拉菜单” [Java]

  4. 4

    如何在Android中创建自定义Spinner工具栏下拉菜单

  5. 5

    如何在Java FX中设置下拉框的宽度

  6. 6

    如何在Java FX中设置下拉框的宽度

  7. 7

    如何在 Angularjs 的下拉框列表中设置值?

  8. 8

    如何在CSS中自定义下拉菜单?

  9. 9

    如何在Android中创建自定义警报对话框?

  10. 10

    如何在Angular 9中创建自定义文本框组件

  11. 11

    如何在mvc中为文本框创建自定义html帮助器

  12. 12

    如何在Illustrator插件中创建自定义的About对话框

  13. 13

    如何在Kendo htmlhelper或Jquery中创建自定义确认对话框

  14. 14

    如何在Flutter中创建自定义材质文本字段

  15. 15

    如何在Flutter HTTP发布请求中创建自定义标题

  16. 16

    如何使自定义扩展的启用或禁用下拉框起作用?

  17. 17

    如何在自定义对话框中设置自定义按钮?

  18. 18

    如何在自定义对话框中设置自定义按钮?

  19. 19

    如何在Flutter中设置自定义FontWeight值

  20. 20

    如何在Flutter中制作自定义按钮形状

  21. 21

    如何在Flutter中实现自定义窗口?

  22. 22

    如何在 Flutter 中自定义 Slider 小部件?

  23. 23

    如何在ActiveAdmin gem中创建自定义页面

  24. 24

    如何在dart中创建自定义元素?

  25. 25

    如何在Django中创建自定义选择字段?

  26. 26

    如何在Android中创建自定义导航抽屉

  27. 27

    如何在Laravel 4中创建自定义外观

  28. 28

    如何在Drupal 7中创建自定义块?

  29. 29

    如何在AngularJs服务中创建自定义事件

热门标签

归档