Widget di layout di base
Padroneggi widget di layout essenziali come Row, Column, Container e Stack per creare interfacce utente strutturate e responsive.
Widget di layout di base è una lezione Flutter Mobile Development gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Flutter Mobile Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Flutter Mobile Development include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Why Layouts Matter
In Flutter, tutto è un widget! Per creare interfacce utente complesse e belle, è necessario disporre questi widget sullo schermo.
I widget di layout sono widget speciali progettati per aiutarti a organizzare altri widget, definendone le dimensioni, la posizione e il modo in cui interagiscono tra loro.
Meet the Container
Il widget Container è uno dei widget di layout più versatili. Pensalo come una scatola personalizzabile che può contenere un singolo widget figlio.
Puoi usarlo per:
- Aggiungere spaziatura interna (padding) o margini
- Impostare colori di sfondo o decorazioni
- Definire larghezza e altezza specifiche
- Trasformare la sua posizione o rotazione
Simple Colored Box
Creiamo un Container di base con un widget Text come figlio. Notiamo come abbiamo impostato il suo color e il suo padding.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Container Demo')),
body: Center(
child: Container(
padding: const EdgeInsets.all(20.0),
color: Colors.blueAccent,
child: const Text(
'Hello from Container!',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}Horizontal with Row
Quando hai bisogno di disporre più widget fianco a fianco in orizzontale, il widget Row è quello che fa per te. Accetta un elenco di widget come suoi children.
Row cerca automaticamente di adattare i suoi figli lungo l'asse orizzontale ed è possibile controllare il loro allineamento all'interno della riga.
Row of Buttons
Ecco come puoi posizionare tre pulsanti l'uno accanto all'altro usando una Row. Aggiungeremo un po' di spaziatura tra loro.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Row Demo')),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
],
),
),
),
);
}
}Vertical with Column
Proprio come Row dispone i widget in orizzontale, il widget Column li dispone in verticale, uno sotto l'altro.
Accetta inoltre un elenco di children e ti consente di controllare il loro allineamento verticale.
Stacked Text Fields
Creiamo un semplice modulo di login utilizzando una Column per impilare verticalmente due TextField e un pulsante.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Column Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(labelText: 'Username'),
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
),
),
ElevatedButton(onPressed: () {}, child: const Text('Login')),
],
),
),
),
);
}
}Aligning Children
Sia Row che Column utilizzano due importanti proprietà per l'allineamento:
mainAxisAlignment: come vengono posizionati i figli lungo l'asse principale (orizzontale perRow, verticale perColumn). Esempi:start,center,end,spaceAround.crossAxisAlignment: come vengono posizionati i figli lungo l'asse perpendicolare (verticale perRow, orizzontale perColumn). Esempi:start,center,end,stretch.
Queste ti offrono un controllo preciso sui tuoi layout!
Overlapping with Stack
Sometimes you need to place widgets on top of each other, like text over an image. That's where the Stack widget comes in.
Stack allows you to layer multiple children widgets. You can control their exact position within the stack using the Positioned widget.
Image with Text Overlay
Let's put some text directly on top of an image using a Stack. We'll use Positioned to place the text precisely.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Stack Demo')),
body: Center(
child: SizedBox(
width: 300,
height: 200,
child: Stack(
children: <Widget>[
Image.network(
'https://picsum.photos/300/200',
fit: BoxFit.cover,
),
const Positioned(
bottom: 10,
left: 10,
child: Text(
'Beautiful Scenery',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
shadows: [
Shadow(blurRadius: 5, color: Colors.black)
],
),
),
),
],
),
),
),
),
);
}
}Layout Challenge
Which of the following widgets are primarily used for arranging multiple children widgets in a single direction (either horizontally or vertically)?
Layouts Mastered!
Great job! You've now mastered the fundamental layout widgets in Flutter:
Container: A versatile box for single children, offering padding, margin, color, and size control.Row: Arranges multiple children horizontally.Column: Arranges multiple children vertically.Stack: Layers children on top of each other, often used withPositioned.
Understanding these is key to building any Flutter UI!
Domande Frequenti
La lezione «Widget di layout di base» è gratuita?
Sì — il testo completo di «Widget di layout di base» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Flutter Mobile Development, passa a CoddyKit PRO. Il corso Flutter Mobile Development include 4 lezioni in totale.
Cosa imparerò in «Widget di layout di base»?
Padroneggi widget di layout essenziali come Row, Column, Container e Stack per creare interfacce utente strutturate e responsive. Eserciti Flutter Mobile Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Flutter Mobile Development?
Non è richiesta alcuna esperienza precedente. Flutter Mobile Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Widget di layout di base»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Flutter Mobile Development?
Sì. Ogni lezione Flutter Mobile Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Widget Stateless e Stateful
- Widget di layout di base
- Elementi interattivi dell'interfaccia
- Creare liste scorrevoli con ListView