Nel post precedente abbiamo visto la differenza tra i widget Stateless e i widget Stateful. In questo presenteremo alcuni dei widget più comuni in Flutter, come l'appbar, i container o i button.
Per semplicità, ho preparato un'app con un menu principale da cui è possibile scegliere quale widget visualizzare: per il momento mettiamo da parte come costruire il menu e il sistema di navigazione a pagine (lo vedremo nei prossimi articoli) e concentriamoci solo sui differenti widget.
La struttura dell'app, oltre al file main.dart prevede una sottocartella in cui è presente un file per ogni tipologia di widget presente.
Ad esempio quello relativo ai button (button_widget.dart) ha questo codice:
import 'package:flutter/material.dart';
class ButtonWidget extends StatelessWidget {
const ButtonWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
children: <Widget>[
const SizedBox(height: 20),
ElevatedButton(
style: buttonStyle,
onPressed: () {},
child: const Text('Elevated Button'),
),
const SizedBox(height: 20),
MaterialButton(
minWidth: 250.0,
onPressed: () {},
colorBrightness: Brightness.dark,
color: Colors.deepPurpleAccent,
elevation: 20.0,
splashColor: Colors.green,
highlightElevation: 1.0,
child: const Text("Material Button"),
),
const SizedBox(height: 20),
TextButton(
onPressed: () {},
child: const Text("Text Button"),
style: buttonStyle,
),
const SizedBox(height: 20),
OutlinedButton(
onPressed: () {},
child: const Text("Outlined Button"),
style: buttonStyle,
),
const SizedBox(height: 20),
IconButton(
color: Colors.purple,
splashColor: Colors.yellow,
// highlightColor: Colors.red,
icon: const Icon(
Icons.build,
size: 40.0,
),
onPressed: () {}),
const SizedBox(height: 20),
FloatingActionButton(
heroTag: "btn1",
mini: true,
backgroundColor: Colors.green,
child: const Icon(
Icons.mic,
size: 25.0,
color: Colors.white,
),
onPressed: () {}),
const SizedBox(height: 20),
FloatingActionButton(
heroTag: "btn2",
backgroundColor: Colors.green,
child: const Icon(
Icons.alarm,
size: 30.0,
color: Colors.white,
),
onPressed: () {}),
],
),
),
);
}
static ButtonStyle buttonStyle = ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
overlayColor: MaterialStateProperty.all<Color>(Colors.yellow),
);
}
dove possiamo riconoscere un widget principale di tipo StatelessWidget il cui albero è (i widget SizedBox sono inseriti solo per distanziare i pulsanti):
Con questo codice riusciamo a mostrare sulla pagina questo risultato
Se guardiamo il codice di textfield_widget.dart troveremo sempre un widget StatelessWidget
import 'package:flutter/material.dart';
class TextfieldWidget extends StatelessWidget {
const TextfieldWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
children: const <Widget>[
Padding(
padding: EdgeInsets.all(30.0),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
filled: true,
hintStyle: TextStyle(color: Colors.black45),
hintText: "Type in your text"),
),
),
Padding(
padding: EdgeInsets.all(30.0),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
style: BorderStyle.none,
),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
filled: true,
hintStyle: TextStyle(color: Colors.black45),
hintText: "Type in your text"),
),
)
],
),
),
);
}
}
con questa struttura
che permette di mostrare in pagina questi due campi di inserimento
Come per gli articoli precedenti potete trovare questo codice completo tra le mie repo GitHub: https://github.com/luigimicco/flutter_widgets quindi lascio a voi analizzare nel dettaglio gli altri widget definiti nei restanti file.
Buon lavoro !
Commenti
Posta un commento