Fluuter: Material3 App Bar shows no color, only white

Question

I am starting to use Material 3 for flutter. However, even when use the basic counter app that is as default, when I add:

useMaterial3: true,

The app bar goes white, with no background. Even when I set : colorSchemeSeed

Here is my code:

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorSchemeSeed: Colors.red,
        useMaterial3: true,

      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

Why does the app bar turn into a white background?

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
    
        title: Text(widget.title),
      ),
      body: Center(
   
        child: Column(
         
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}

Have you tried defining your AppBar? Is My homepage a Scaffold? — Mariano Zorrilla, Jan 27 '23 at 00:31
Let me know if this works: https://stackoverflow.com/a/74084960/3743245 — Mariano Zorrilla, Jan 29 '23 at 00:56
'backgroundColor' is deprecated and shouldn't be used. And" The named parameter 'surfaceTintColor' isn't defined". That post is old — RJB, Jan 29 '23 at 17:52

score 0 · Answer 1 · answered Jan 27 '23 at 02:42

0

I'm not sure but if you can replace the colorSchemeSeed instead of primaryColor should work

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.red,
        useMaterial3: true,

      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

answered Jan 27 '23 at 02:42

guerrero

13
4

Didn't work.... – RJB Jan 28 '23 at 17:49

Fluuter: Material3 App Bar shows no color, only white

1 Answers1