How to change design and color of Flutter web app
What is Material design 3? How would we apply this theme to new Flutter 3.0? Well, let’s try to answer the questions one after another.
Firstly, Material design 3 is the next generation design language.
It’s good news that Flutter has supported Material design 3 from the very beginning. As a result, what we have seen till now, designed in Material design 2.
We’ve been building a web app where users can write their blogs and share with other members. However, initially we have used the Material design 2 theme.
As a result, our old Firebase, Provider web app will have a different look.
Let’s see the homepage with the old theme first.
To apply Material design 2 theme, we used the following code.
return MaterialApp(
title: 'Provider Firebase Blog',
debugShowCheckedModeBanner: false,
theme: ThemeData(
buttonTheme: Theme.of(context).buttonTheme.copyWith(
highlightColor: Colors.black45,
),
primarySwatch: Colors.deepOrange,
textTheme: GoogleFonts.latoTextTheme(
Theme.of(context).textTheme,
),
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: const ChatHomePage(),
);However, with the new Material design 3 theme, the homepage will look different now.
Not only on the home page, the new Material design 3 theme will reflect in each page, as an outcome.
We’ve chosen the light theme.
Finally, after signing in, users can click the “Let’s Blog” button and join other members.
In the next section we’ll look at how we have changed Material design from 2 to 3.
Moreover, we will also learn Material design 3 in Flutter 3.0 great detail.
So stay tuned.
Leave a Reply