Flutter 드롭다운 예제
Flutter에서 드롭다운 위젯은 사용자에게 옵션 목록을 제공하는 데 사용됩니다. 이 위젯은 일반적으로 사용자가 선택 목록에서 옵션을 선택해야 하는 양식에서 사용됩니다. 드롭다운 위젯은 사용하기 쉽고 사용자가 옵션을 선택할 수 있는 매끄럽고 직관적인 방법을 제공합니다.
드롭다운 위젯 만들기
Flutter에서 드롭다운 위젯을 만드는 것은 간단합니다. 드롭다운 위젯을 생성하려면 목록에 표시될 옵션을 지정해야 합니다. 다음은 드롭다운 위젯을 만드는 방법의 예입니다.
String dropdownValue = 'One';
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
이 예에서는 DropdownButton 위젯이 생성되고 value 매개변수가 dropdownValue로 설정됩니다. items 매개변수는 드롭다운 목록에 표시될 문자열 목록입니다. 'onChanged' 매개변수는 사용자가 목록에서 옵션을 선택할 때 호출될 함수로 설정됩니다.
드롭다운 위젯 사용자 정의
드롭다운 위젯은 앱의 스타일과 디자인에 맞게 사용자 정의할 수 있습니다. 다음은 드롭다운 위젯을 사용자 지정하는 방법에 대한 몇 가지 예입니다.
드롭다운 버튼 아이콘 변경
드롭다운 버튼에 표시되는 아이콘을 변경하려면 icon 매개변수를 사용할 수 있습니다. 다음은 예입니다.
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_forward),
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
);
이 예에서 icon 매개변수는 Icons.arrow_forward 아이콘이 있는 Icon 위젯으로 설정됩니다.
드롭다운 버튼 색상 변경
드롭다운 버튼의 색상을 변경하려면 style 매개변수를 사용할 수 있습니다. 다음은 예입니다.
DropdownButton<String>(
value: dropdownValue,
style: TextStyle(color: Colors.red),
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
);
이 예에서 style 매개변수는 Colors.red로 설정된 color와 함께 TextStyle 객체로 설정됩니다.
더 많은 예
이것은 플러터 드롭다운 예제입니다. 드롭다운을 통해 하나 이상의 항목을 선택할 수 있습니다. 드롭다운은 일반적으로 gridview 및 listview와 같은 데이터 목록을 표시하는 다른 유형의 위젯보다 작은 공간을 차지합니다.
이 예제에는 종속성이 필요하지 않습니다.
(ㅏ). 메인 다트
이것은 이 프로젝트에서 작성해야 하는 유일한 파일입니다.
가져오기를 추가하여 시작합니다.
import 'package:flutter/material.dart';
이 material.dart는 드롭다운을 포함하여 사용할 여러 플러터 머티리얼 디자인 구성 요소에 대한 액세스를 제공합니다.
상태 클래스를 확장하여 MyAppState를 만듭니다. MyApp은 상태가 생성되는 사용자 정의 StatefulWidget입니다.
class MyAppState extends State<MyApp> {
이 클래스 내에서 드롭다운에 렌더링될 항목 목록을 정의합니다.
List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
그런 다음 드롭다운 메뉴 항목 목록과 선택한 항목을 보관할 문자열을 포함하여 인스턴스 필드를 두 개 더 추가합니다.
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _selectedFruit;
그런 다음 initState() 클래스를 재정의합니다.
void initState() {
_dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
_selectedFruit = _dropDownMenuItems[0].value;
super.initState();
}
다음은 드롭다운 메뉴 항목을 빌드하고 가져오는 방법입니다.
List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
List<DropdownMenuItem<String>> items = new List();
for (String fruit in fruits) {
items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
}
return items;
}
드롭다운 항목을 변경하는 방법은 다음과 같습니다.
void changedDropDownItem(String selectedFruit) {
setState(() {
_selectedFruit = selectedFruit;
});
}
마지막으로 build() 메서드를 재정의합니다.
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: new AppBar(
title: new Text("DropDown Button Example"),
),
body: new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text("Please choose a fruit: "),
new DropdownButton(
value: _selectedFruit,
items: _dropDownMenuItems,
onChanged: changedDropDownItem,
)
],
)),
),
),
);
}
다음은 main.dart의 전체 코드입니다.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
State<StatefulWidget> createState() {
return new MyAppState();
}
}
class MyAppState extends State<MyApp> {
List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _selectedFruit;
void initState() {
_dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
_selectedFruit = _dropDownMenuItems[0].value;
super.initState();
}
List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
List<DropdownMenuItem<String>> items = new List();
for (String fruit in fruits) {
items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
}
return items;
}
void changedDropDownItem(String selectedFruit) {
setState(() {
_selectedFruit = selectedFruit;
});
}
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: new AppBar(
title: new Text("DropDown Button Example"),
),
body: new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text("Please choose a fruit: "),
new DropdownButton(
value: _selectedFruit,
items: _dropDownMenuItems,
onChanged: changedDropDownItem,
)
],
)),
),
),
);
}
}
데모
데모는 다음과 같습니다.
위 코드의 라이센스는 Apache 버전 2.0입니다.
결론
드롭다운 위젯은 사용자에게 옵션 목록을 제공하는 데 사용되는 Flutter의 중요한 위젯입니다. 이 위젯은 사용하기 쉽고 앱의 스타일과 디자인에 맞게 사용자 정의할 수 있습니다. 제공된 예제를 사용하여 앱의 요구 사항을 충족하는 드롭다운 위젯을 만들 수 있습니다.