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),
    ],
)

GridView.builder(
  itemCount: 20,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
  ),
  itemBuilder: (context, index) {
    return Container(
      color: Colors.primaries[index % Colors.primaries.length],
      child: Center(child: Text('Item $index')),
    );
  },
)

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

    SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Column(
        children: List.generate(20, (index) => Text('Elemento $index')),
        ),
    )

Text('Hello, World!')

Text(
    'Titolo',
    style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
        color: Colors.blue,
        letterSpacing: 1.2,
    ),
)

Text(
    'Questo è un testo molto lungo che verrà troncato...',
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
)

RichText(
    text: TextSpan(
        text: 'Flutter ',
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: [
            TextSpan(
                text: 'è fantastico',
                style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
            ),
        ],
    ),
)

Text(
    'Ciao!',
    style: TextStyle(
        fontFamily: 'Roboto',
        fontSize: 20,
    ),
)

MaterialApp(
    theme: ThemeData(
        fontFamily: 'Montserrat', // Tutti i Text() useranno questo font
    ),
    home: MyHomePage(),
)

flutter:
    fonts:
        - family: Montserrat
          fonts:
            - asset: assets/fonts/Montserrat-Regular.ttf

Text(
    'Titolo con font personalizzato',
    style: TextStyle(fontFamily: 'Montserrat'),
)

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

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

//Usato per ritagliare un widget (es. immagine) all’interno di un rettangolo con angoli arrotondati.
ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.network('https://picsum.photos/200'),
)
 
//Usato per ritagliare il contenuto in una forma ovale o circolare (funziona bene su contenitori quadrati).
ClipOval(
  child: Image.network(
    'https://picsum.photos/200',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
)
 
//Consente di ritagliare un widget secondo una forma completamente personalizzata, definita da un oggetto CustomClipper<Path>.
ClipPath(
  clipper: TriangleClipper(),
  child: Image.network('https://picsum.photos/300'),
)
 
class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(size.width / 2, 0); // top
    path.lineTo(0, size.height);   // bottom left
    path.lineTo(size.width, size.height); // bottom right
    path.close();
    return path;
  }
 
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
 
// Container di per sé non ritaglia il contenuto. Ma se aggiungiamo:
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
  ),
  clipBehavior: Clip.antiAlias,
  child: Image.network('https://picsum.photos/200'),
)

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'));
    }),
)