フラッタで材料設計ドロップダウンボタンをつくる方法

こんにちはそこにコミュニティ.
私はあなたのための新しいウィジェットを再利用する必要があります.


それで、私は材料設計の後で良い探しドロップダウンメニューを探していました.いくつかの変更プロセスの後、私はあなたの共有フォルダに置くステートレスウィジェットの次のコードを思いつきました.
お気軽にあなたのプロジェクトでそれを使用したり、独自の目的のためにそれを調整します.コードの下で、私は若干のデザイン決定を説明します.

Please consider to call at least setState(() {}) in the onChangedCallback method in order to change the items in the dropdown. Also consider, that value has to be an item in values.

マテリアルドロップダウンウィジェット

import 'package:flutter/material.dart';

class MaterialDropdownView extends StatelessWidget {
  final Function onChangedCallback;
  final String value;
  final Iterable<String> values;

  MaterialDropdownView(
      {required this.value,
      required this.values,
      required this.onChangedCallback});

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Container(
        height: 40,
        padding: const EdgeInsets.only(left: 15.0, right: 10.0),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(32.0),
            border: Border.all()),
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: DropdownButtonHideUnderline(
            child: DropdownButton(
                value: this.value,
                items: this
                    .values
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
                onChanged: (newValue) {
                  this.onChangedCallback(newValue);
                }),
          ),
        ),
      ),
    );
  }
}

使い方

MaterialDropdownView(
                    onChangedCallback: (newValue) {
                      setState(() {});
                    },
                    value: 'item1',
                    values: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5'],
                  ),

設計思想

整列する

使用可能な幅全体を充填するドロップダウンボックスを防ぐために、Alignをコンテナから分離しなければなりません.

mouseregion

mouseregionは、ユーザーがマウスでドロップダウンの上にホバリングしているときにクリックカーソルを表示させます.領域がクリック可能であるとき、それはDropDownButtonHandUnlineの親です

ドロップダウン

このウィジェットは、ドロップダウンボタンのデフォルトのアンダーラインを削除します.

以下の投稿をお見逃しなく.
興味がありますか.
あなたが彼の仕事とgift him a sunny dayが好きであるならば、作者を支持することを考えてください.

また、

あなたが逃している可能性があります初心者のための最高のフラッターの記事

フラッタパイオニアのためのルチアーノユング・ 5月3日・ 3分読む

#flutter #discuss #beginners #bestofdev

🦋フラッター-グローバルに変数を管理する

ルチノユング・ 2月10日・ 3分読む

#flutter #dart #bestpractices #programming

🦋フラッタの様々な装置のスクロール可能なリストを取り扱う方法

ルチノユング・ ジュン3・ 2分読む

#flutter #dart #tutorial #programming