2.2: Primi widget di Flutter

Container(
    width: 150,
    height: 100,
    padding: EdgeInsets.all(12),
    margin: EdgeInsets.only(top: 20),
    alignment: Alignment.center,
    decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.black, width: 2),
        boxShadow: [
            BoxShadow(
                color: Colors.black26,
                blurRadius: 6,
                offset: Offset(2, 2),
            )
        ],
    ),
    child: Text("Decorato"),
)

Center(
    child: Text("Centrato!"),
)

Padding(
padding: EdgeInsets.all(16.0),
child: Text("Ciao mondo!"),
)

Padding(
padding: EdgeInsets.only(left: 12, top: 8),
child: Icon(Icons.star),
)

SizedBox(
    width: 100,
    height: 50,
    child: Text("Contenuto"),
)

SizedBox(height: 20)

Column(
    children: [
        Text("Titolo"),
        SizedBox(height: 16),
        Text("Descrizione"),
    ],
)

Row(
    children: [
        Icon(Icons.star),
        Spacer(),
        Icon(Icons.settings),
    ],
)

Row(
    children: [
        Text("Indietro"),
        Spacer(),
        Text("Avanti"),
    ],
)

ConstrainedBox(
    constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 50,
    ),
    child: Container(color: Colors.amber),
)

Column(
    children: [
        Text("Titolo"),
        ElevatedButton(onPressed: () {}, child: Text("Azione")),
    ],
)

Row(
    children: [
        Icon(Icons.star),
        Text("Preferito"),
    ],
)

Stack(
    children: [
        Image.asset("bg.jpg"),
        Positioned(
            bottom: 10,
            left: 10,
            child: Text("Testo sopra immagine"),
        )
    ],
)

Positioned(
    top: 10,
    left: 20,
    child: Text("Posizionato"),
)

ListView(
    children: [
        ListTile(title: Text("Elemento 1")),
        ListTile(title: Text("Elemento 2")),
    ],
)

GridView.count(
    crossAxisCount: 2,
    children: [
        Container(color: Colors.blue),
        Container(color: Colors.green),
    ],
)

Row(
    children: [
        Expanded(
            flex: 2,
            child: Container(color: Colors.red),
        ),
        Expanded(
            flex: 1,
            child: Container(color: Colors.green),
        ),
    ],
)

Image.network(
    'https://picsum.photos/500/300',
    height:100,
    ...
)

Image.asset(
    'assets/images/image.png',
    height:100,
    ...
)

import 'package:flutter/material.dart';
 
void main() {
  runApp(ImageFitAlignmentDemo());
}
 
class ImageFitAlignmentDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image Fit & Alignment Explorer')),
        body: ImageFitExplorer(),
      ),
    );
  }
}
 
class ImageFitExplorer extends StatefulWidget {
  @override
  _ImageFitExplorerState createState() => _ImageFitExplorerState();
}
 
class _ImageFitExplorerState extends State<ImageFitExplorer> {
  BoxFit _fit = BoxFit.contain;
  Alignment _alignment = Alignment.center;
  BlendMode _blendMode = BlendMode.srcOver;
  bool _useColor = false;
 
  final Map<BoxFit, String> fitDescriptions = {
    BoxFit.fill: "Riempi tutto lo spazio distorcendo l'immagine se necessario.",
    BoxFit.contain:
        "L'immagine si adatta interamente mantenendo le proporzioni.",
    BoxFit.cover: "Copre tutto lo spazio ritagliando l'immagine se serve.",
    BoxFit.fitWidth: "Si adatta alla larghezza mantenendo le proporzioni.",
    BoxFit.fitHeight: "Si adatta all'altezza mantenendo le proporzioni.",
    BoxFit.none: "L'immagine resta della dimensione originale (non scala).",
    BoxFit.scaleDown: "Come 'none', ma si riduce se è troppo grande.",
  };
 
  final Map<Alignment, String> alignmentDescriptions = {
    Alignment.topLeft: "Allinea in alto a sinistra.",
    Alignment.topCenter: "Allinea in alto al centro.",
    Alignment.topRight: "Allinea in alto a destra.",
    Alignment.centerLeft: "Allinea al centro sinistra.",
    Alignment.center: "Allinea perfettamente al centro.",
    Alignment.centerRight: "Allinea al centro destra.",
    Alignment.bottomLeft: "Allinea in basso a sinistra.",
    Alignment.bottomCenter: "Allinea in basso al centro.",
    Alignment.bottomRight: "Allinea in basso a destra.",
  };
 
  final Map<BlendMode, String> blendModeDescriptions = {
    BlendMode.clear: "Rende trasparente la parte coperta.",
    BlendMode.src: "Usa solo il colore sorgente.",
    BlendMode.dst: "Mantiene solo il colore di sfondo.",
    BlendMode.srcOver:
        "Sovrappone il colore sorgente al colore di sfondo (default).",
    BlendMode.dstOver: "Sovrappone il colore di sfondo al sorgente.",
    BlendMode.srcIn:
        "Mostra solo le parti dove sorgente e sfondo si sovrappongono.",
    BlendMode.dstIn: "Mantiene lo sfondo solo dove c'è il sorgente.",
    BlendMode.srcOut: "Mostra sorgente solo dove non c'è sfondo.",
    BlendMode.dstOut: "Mantiene sfondo solo dove non c'è sorgente.",
    BlendMode.srcATop:
        "Mostra il sorgente sopra lo sfondo, solo nelle aree comuni.",
    BlendMode.dstATop:
        "Mostra sfondo sopra il sorgente, solo nelle aree comuni.",
    BlendMode.xor: "Unisce sorgente e sfondo escludendo le aree comuni.",
    BlendMode.plus: "Somma i colori.",
    BlendMode.modulate: "Moltiplica i colori tra loro.",
    BlendMode.screen: "Effetto schermo (inverso del multiply).",
    BlendMode.overlay: "Combinazione tra multiply e screen.",
    BlendMode.darken: "Tiene il colore più scuro tra sorgente e sfondo.",
    BlendMode.lighten: "Tiene il colore più chiaro.",
    BlendMode.colorDodge:
        "Schiarisce lo sfondo per riflettere il colore del sorgente.",
    BlendMode.colorBurn:
        "Scurisce lo sfondo per riflettere il colore del sorgente.",
    BlendMode.hardLight: "Combina overlay e multiply a seconda del colore.",
    BlendMode.softLight: "Effetto luce morbida.",
    BlendMode.difference: "Differenza assoluta tra i colori.",
    BlendMode.exclusion: "Simile a difference ma meno estremo.",
    BlendMode.multiply: "Moltiplica i colori tra sorgente e sfondo.",
    BlendMode.hue: "Applica tonalità del sorgente al colore di sfondo.",
    BlendMode.saturation: "Applica saturazione del sorgente.",
    BlendMode.color: "Applica colore del sorgente, mantenendo luminosità.",
    BlendMode.luminosity:
        "Applica luminosità del sorgente al colore di sfondo.",
  };
 
  final List<BoxFit> fitOptions = BoxFit.values;
  final List<Alignment> alignmentOptions = [
    Alignment.topLeft,
    Alignment.topCenter,
    Alignment.topRight,
    Alignment.centerLeft,
    Alignment.center,
    Alignment.centerRight,
    Alignment.bottomLeft,
    Alignment.bottomCenter,
    Alignment.bottomRight,
  ];
 
  final List<BlendMode> blendModes = BlendMode.values;
 
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        children: [
          Expanded(
            child: Container(
              width: double.infinity,
              color: Colors.grey[300],
              child: Image.network(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
                fit: _fit,
                alignment: _alignment,
                color: _useColor ? Colors.red.withValues(alpha: 0.5) : null,
                colorBlendMode: _blendMode,
              ),
            ),
          ),
          SizedBox(height: 20),
          Row(
            children: [
              Text("BoxFit:"),
              SizedBox(width: 8),
              DropdownButton<BoxFit>(
                value: _fit,
                onChanged: (value) => setState(() => _fit = value!),
                items:
                    fitOptions
                        .map(
                          (fit) => DropdownMenuItem(
                            value: fit,
                            child: Text(fit.toString().split('.').last),
                          ),
                        )
                        .toList(),
              ),
              SizedBox(width: 12),
              Expanded(child: Text(fitDescriptions[_fit] ?? "")),
            ],
          ),
          Row(
            children: [
              Text("Alignment:"),
              SizedBox(width: 8),
              DropdownButton<Alignment>(
                value: _alignment,
                onChanged: (value) => setState(() => _alignment = value!),
                items:
                    alignmentOptions
                        .map(
                          (align) => DropdownMenuItem(
                            value: align,
                            child: Text(align.toString().split('.').last),
                          ),
                        )
                        .toList(),
              ),
              SizedBox(width: 12),
              Expanded(child: Text(alignmentDescriptions[_alignment] ?? "")),
            ],
          ),
          Row(
            children: [
              Checkbox(
                value: _useColor,
                onChanged: (value) => setState(() => _useColor = value!),
              ),
              Text("Usa Color Blend"),
              SizedBox(width: 8),
              DropdownButton<BlendMode>(
                value: _blendMode,
                onChanged: (value) => setState(() => _blendMode = value!),
                items:
                    blendModes
                        .map(
                          (mode) => DropdownMenuItem(
                            value: mode,
                            child: Text(mode.toString().split('.').last),
                          ),
                        )
                        .toList(),
              ),
              SizedBox(width: 12),
              Expanded(child: Text(blendModeDescriptions[_blendMode] ?? "")),
            ],
          ),
        ],
      ),
    );
  }
}
 

Icon(
    Icons.star,
)

Row(
    children: [
        Icon(Icons.location_on, color: Colors.red, size: 30),
        SizedBox(width: 8),
        Text("Palermo, Sicilia"),
    ],
)

ListTile(
    leading: Icon(Icons.account_circle),
    title: Text('Mario Rossi'),
    subtitle: Text('Online'),
    trailing: Icon(Icons.chat),
    onTap: () {
        print('Chat con Mario');
    },
)

Wrap(
    spacing: 8,
    runSpacing: 4,
    children: List.generate(6, (index) {
        return Chip(label: Text('Item $index'));
    }),
)