Chapter 2, Styling your app theme not working properly

Hi,

I’ve started to learn Flutter through the Flutter apprentice book. I’m on chapter 2, Styling your app.

When I change the Widget build code, the title and primary theme colour disappear.

Initailly I wrote the new code out and then when I didn’t work I copied and pasted it.

Is there something I’m missing?

Here’s the code:


class RecipeApp extends StatelessWidget {
  const RecipeApp({super.key});
  // 1
  @override
  Widget build(BuildContext context) {

    final ThemeData theme = ThemeData();

    return MaterialApp(
 
      title: 'Recipe Calculator',
      
      theme: theme.copyWith(
        colorScheme: theme.colorScheme.copyWith(
          primary: Colors.grey,
          secondary: Colors.black,
        ),
      ),
     
      home: const MyHomePage(title: 'Recipe Calculator'),
    );
   }
}

What mine looks like (Left) Vs What it should look like (Right)

Hi @mil1, thank you for writing! Yes, this is because, in the latest release of Flutter 3.10, the initial project template has changed and it now includes a background color set to the inverse of the primary color (which is white) in the AppBar of MyHomePage. If you remove the backgroundColor from it, then it should be okay now. You can do so by changing appbar to the following:

appBar: AppBar(
  // Here we take the value from the MyHomePage object that was created by
  // the App.build method, and use it to set our appbar title.
  title: Text(widget.title),
),

This will get fixed in the next edition.

Again many thanks for pointing it out :smile:,

~ Alejandro.

2 Likes