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.