Flutter Question posted in
The official Flutter documentation can be found here.

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

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?

enter image description here

Tags:

2

Answers


  1. 0

    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 🙂

    Login or Signup to reply.
  2. 0

    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),
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search