Angoli arrotondati

Fa parte della sezione La tua prima app del percorso Flutter di Coddy. Lezione 18 di 32.

Per qualcosa di più di un semplice colore, un Container accetta una decoration:. Un BoxDecoration può arrotondare gli angoli:

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.indigo,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text('Rounded'),
)

BorderRadius.circular(12) arrotonda ogni angolo con una curva larga 12 pixel.

Nota che color: è stato spostato all'interno di BoxDecoration. Un Container non può avere sia color: sia decoration:: Flutter si interrompe con un errore, perché non può capire quale colore vuoi.

Sfida

Facile

Arrotonda gli angoli del riquadro rosa:

sostituisci il color: del Container con decoration:
usa un BoxDecoration con color: Colors.pink e borderRadius: BorderRadius.circular(16)

Provalo tu

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            padding: EdgeInsets.all(16),
            color: Colors.pink,
            child: Text('Sale', style: TextStyle(fontSize: 32, color: Colors.white)),
          ),
        ),
      ),
    );
  }
}