material ui does not show default colors and shapes when compiled on android

Question

I deleted the android folder and recreate it via flutter create --platforms android .. It compiles and runs, but the material components are showed incorrectly (no default blue, shape etc):

As you can see, for instance, the :

    return Scaffold(
      appBar: AppBar(title: const Text('Acceso'))

is showed with a white background, and the ElevatedButtton is showed rounded and with purple colors.

The widgets are wrapped within a:

  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'App name',
        // initialRoute: ,
        navigatorKey: _navigator,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),

so I was expecting a blue color at least. What could be missing?

Answer 1

Flutter has changed its default theme blue color to purple and some of its widgets(if you set useMaterial3: true in ThemeData )

After editing your question, there are 2 ways, To change app theme color you need to add

  colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),

inside your ThemeData

if you create a new project with Flutter version 3.16.9, your Material app looks like this:

@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    useMaterial3: true,
  ),
  home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
  }
  }

the second way is only changing AppBar, You need to add appBarTheme: AppBarTheme(color: Colors.blue), in MaterialApp/theme

For Example:

MaterialApp(
    title: 'App name',
    // initialRoute: ,
    navigatorKey: _navigator,
    theme: ThemeData(
      appBarTheme: AppBarTheme(  //Add here
        color: Colors.blue
      ),                        // until here
      primarySwatch: Colors.blue,
    ),
);

Happy Coding :)

Answer 2

New Flutter versions use colorScheme instead primarySwatch.

 Widget build(BuildContext context) {
    return MaterialApp(
        title: 'App name',
        // initialRoute: ,
        navigatorKey: _navigator,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        ),