[英]How to add decoration DropdownButton in Flutter
I have a dropdown button as you can see below.我有一个下拉按钮,如下所示。
child: DropdownButton<String>(
value: dropDownValue,
icon: Icon(Icons.keyboard_arrow_down),
iconSize: 15,
elevation: 16,
style: TextStyle(color: Colors.grey),
underline: Container(
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0, style: BorderStyle.solid),
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
),
),
onChanged: (String newValue) {
setState(() {
dropDownValue = newValue;
});
},
items: [dropDownValue,...snapshot.data.data]
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value.name),
);
}).toList(),
),
I want to shape it like in the image by using decoration in Container, but i can't shape it the way i want我想通过在容器中使用装饰来像图像中那样塑造它,但我无法按照我想要的方式塑造它
But right now this is the image I have.但现在这就是我的形象。 How do I add an edge to my dropdown button?
如何为下拉按钮添加边缘? Is there a known way for this?
有没有已知的方法?
You can copy paste run full code below您可以在下面复制粘贴运行完整代码
You can use DropdownButtonFormField
with InputDecoration
set fillColor
and hintText
您可以将
DropdownButtonFormField
与InputDecoration
设置fillColor
和hintText
使用
code snippet代码片段
DropdownButtonFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[800]),
hintText: "Name",
fillColor: Colors.blue[200]),
value: dropDownValue,
working demo工作演示
full code完整代码
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,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
String dropDownValue;
List<String> cityList = [
'Ajman',
'Al Ain',
'Dubai',
'Fujairah',
'Ras Al Khaimah',
'Sharjah',
'Umm Al Quwain'
];
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
void initState() {
//setFilters();
super.initState();
}
setFilters() {
setState(() {
dropDownValue = cityList[2];
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropdownButtonFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[800]),
hintText: "Name",
fillColor: Colors.blue[200]),
value: dropDownValue,
onChanged: (String Value) {
setState(() {
dropDownValue = Value;
});
},
items: cityList
.map((cityTitle) => DropdownMenuItem(
value: cityTitle, child: Text("$cityTitle")))
.toList(),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
You can just wrap your DropdownButton
widget into DecoratedBox
:您可以将
DropdownButton
小部件包装到DecoratedBox
中:
return DecoratedBox(
decoration: ShapeDecoration(
color: Colors.cyan,
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0, style: BorderStyle.solid, color: Colors.cyan),
borderRadius: BorderRadius.all(Radius.circular(25.0)),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 0.0),
child: DropdownButton<String>(
value: dropdownValue,
icon: Icon(null),
elevation: 16,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
underline: SizedBox(),
items: <String>['City', 'Country', 'State']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
);
Output: Output:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.