Styling Widgets

Most widgets accept a style parameter. Text takes a TextStyle; Container takes a BoxDecoration.

Example: a styled box with styled text inside

Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(12),
    ),
    child: const Text(
      'Styled box',
      style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
    ),
  );
}

Renders a blue box with rounded corners containing bold, white, 18px text reading "Styled box".

Compare this directly to the equivalent CSS from the CSS tutorial's Box Model and Colors lessons, borderRadius, color, fontWeight are all doing exactly the same job CSS properties with nearly identical names would do on the web. Flutter reinvents styling as Dart objects instead of a separate stylesheet language, but the underlying visual concepts transfer directly either way.