Flutter에서 머티리얼 디자인 드롭다운 버튼을 만드는 방법

안녕하세요 개발자 커뮤니티입니다.

재사용할 수 있는 새 위젯이 있습니다.


그래서 머티리얼 디자인에 이어 보기 좋은 드롭다운 메뉴를 찾고 있었습니다. 몇 가지 변경 프로세스 후에 공유 폴더에 배치할 상태 비저장 위젯에 대한 다음 코드를 생각해 냈습니다.
프로젝트에서 자유롭게 사용하거나 자신의 목적에 맞게 조정하십시오. 코드 아래에서 몇 가지 디자인 결정에 대해 설명하겠습니다.

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'],
                  ),

디자인 결정

맞추다

드롭다운 상자가 사용 가능한 전체 너비를 채우지 않도록 하려면 정렬을 컨테이너에서 분리해야 합니다.

마우스 지역

MouseRegion을 사용하면 사용자가 마우스로 드롭다운을 가리킬 때 클릭 커서를 표시할 수 있습니다. 영역을 클릭할 수 있을 때만 표시하는 DropdownButtonHideUnderline의 부모입니다.

드롭다운버튼숨기기밑줄

이 위젯은 DropdownButton의 기본 밑줄을 제거합니다.


다음 게시물을 놓치지 않도록.
에 관심이 있습니까?

그의 작품과 gift him a sunny day이 마음에 든다면 저자를 지원하는 것을 고려하십시오.

당신은 또한 좋아할 수 있습니다

놓쳤을 수도 있는 초보자를 위한 최고의 Flutter 게시물

The Flutter Pioneers를 위한 Luciano Jung ・ 5월 3일 ・ 3분 읽기

#flutter #discuss #beginners #bestofdev

🦋Flutter - 전역 변수 관리

루치아노 정 ・ 2월 10일 ・ 3 min read

#flutter #dart #bestpractices #programming

🦋Flutter에서 다양한 위젯의 스크롤 가능한 목록을 처리하는 방법

정루치아노 ・ 6월 3일 ・ 2 min read

#flutter #dart #tutorial #programming