Esquinas redondeadas

Parte de la sección Tu primera app del Journey de Flutter de Coddy. Lección 18 de 32.

Para algo más que un color liso, un Container recibe un decoration:. Un BoxDecoration puede redondear las esquinas:

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

BorderRadius.circular(12) redondea cada esquina con una curva de 12 píxeles de ancho.

Observa que color: se movió dentro de BoxDecoration. Un Container no puede tener tanto color: como decoration:: Flutter se detiene con un error, porque no puede saber qué color quieres.

Desafío

Fácil

Redondea las esquinas del cuadro rosa:

reemplaza el color: del Container por una decoration:
haz que sea un BoxDecoration con color: Colors.pink y borderRadius: BorderRadius.circular(16)

Pruébalo tú mismo

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