如何在Ffltter中自定义下拉按钮和项目? [英] How to customize Dropdown Button and items in flutter?
本文介绍了如何在Ffltter中自定义下拉按钮和项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
今天我试着设计一个带有自定义项目的下拉按钮,我可以一键选择所有项目或取消选择所有项目。但是我不懂怎么做的方法。所以请帮助我的人如何接近所需的设计,下面我放置了我的设计和所需的设计。 下面是我的代码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownvalue = 'Apple';
var items = ['Apple','Banana','Grapes','Orange','watermelon','Pineapple'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DropDownList Example"),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("DropDownButton"),
Container(
height: 40,
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
border: Border.all(
color: Colors.grey, style: BorderStyle.solid, width: 0.80),
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
elevation: 0,
value: dropdownvalue,
icon: Icon(Icons.keyboard_arrow_down),
items:items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items)
);
}
).toList(),
onChanged: (String? newValue){
setState(() {
dropdownvalue = newValue!;
});
},
),
),
),
],
),
],
),
),
);
}
}
推荐答案
您可以为此使用dropdown_button2Package:
import 'package:flutter/material.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownvalue = 'Apple';
var items = [
'Apple',
'Banana',
'Grapes',
'Orange',
'watermelon',
'Pineapple'
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DropDownList Example"),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("DropDownButton"),
Container(
height: 40,
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
border: Border.all(color: Colors.grey, style: BorderStyle.solid, width: 0.80),
),
child: DropdownButtonHideUnderline(
child: DropdownButton2(
hint: Text(
'Select Item',
style: TextStyle(
fontSize: 14,
color: Theme.of(context).hintColor,
),
),
items: items
.map((item) => DropdownMenuItem<String>(
value: item,
child: Text(
item,
style: const TextStyle(
fontSize: 14,
),
),
))
.toList(),
value: dropdownvalue,
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
buttonHeight: 40,
buttonWidth: 140,
itemHeight: 40,
),
)),
],
),
],
),
),
);
}
}
最终结果:
这篇关于如何在Ffltter中自定义下拉按钮和项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文