Impostare lo stile in una DropdownButton in Flutter
Una delle cose che mi piace molto di Flutter è la presenza di componenti che servono solo a svolgere ruoli ben definiti.
Ad esempio DecoratedBox, che ci serve per decorare altri componenti.
Certo, a volte può risultare confusionario, ci si deve fare l'abitudine.
Detto ciò, vediamo un esempio:
import 'package:flutter/material.dart';
void main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.deepPurple,
),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Test'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
DecoratedBox(
decoration: BoxDecoration(
color: Colors.lightBlue,
border: Border.all(
color: Colors.blueGrey,
width: 3,
),
borderRadius: BorderRadius.circular(10),
boxShadow: const <BoxShadow>[
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.57),
blurRadius: 1,
)
],
),
child: Padding(
padding: const EdgeInsets.only(
left: 20,
right: 20,
),
child: DropdownButton(
value: "Roma",
items: const [
DropdownMenuItem(
value: "Roma",
child: Text("Roma"),
),
DropdownMenuItem(
value: "Milano",
child: Text("Milano"),
),
DropdownMenuItem(
value: "Napoli",
child: Text("Napoli"),
)
],
onChanged: (value) {
print("Hai selezionato $value");
},
icon: const Padding(
padding: EdgeInsets.only(left: 20),
child: Icon(Icons.arrow_circle_down_sharp),
),
iconEnabledColor: Colors.white,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
),
dropdownColor: Colors.amber,
underline: Container(),
isExpanded: true,
),
),
),
],
),
);
}
}
Dentro al DecoratedBox impostiamo un classico child, Padding, e poi al suo interno la nostra DropdownButton.
Enjoy!
dart flutter decoratedbox dropdownbutton
Commentami!