How should we organise our Flutter work flow? Certainly there are several aspects that we have to concentrate on. But the first two steps require our attention at present.
Firstly, we need a good theme.
Secondly, we need to change screens. In short, we should be able to navigate from one page to the other.
For the first case, we can use the Flutter theme property of the MaterialApp Widget, to control the design across the entire app.
However, we can do that in various ways.
Since we have been building a Web app with Firebase, Firestore and Provider packages, we need to make our theme simple.
Previously, we have been building an interesting Quiz App. While building the app, we have learned a few important concepts on the theme.
We have used a custom theme class where we have declared many static constant Color properties.
And later, we have used those properties in our Flutter app.
The same thing happens here.
Although in the Quiz App we have used a dark theme, here we will stick to the light one.
As always, later we can change this theme from light to dark.
As we have done the same thing in the Quiz App.
We have changed the color scheme light replacing the green by pinkish color.
We want to do that centrally, from the same custom theme class.
import 'package:flutter/material.dart';
class CustomTheme {
static final theme = ThemeData(
primarySwatch: Colors.blue,
textTheme: const TextTheme(
bodyText2: TextStyle(fontSize: 25, height: 1.4),
caption: TextStyle(fontSize: 20, height: 1.4),
headline1: TextStyle(
fontSize: 50,
fontWeight: FontWeight.w800,
color: Colors.black,
),
headline2: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
appBarTheme: const AppBarTheme(
color: Colors.transparent,
elevation: 0,
iconTheme: IconThemeData(color: Colors.black),
),
);
}After that, we have passed that theme as an argument to the MaterialApp theme property.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../model/bog_post.dart';
import '../model/user.dart';
import 'blog_home_page.dart';
import '../model/custom_theme.dart';
class BlogWebApp extends StatelessWidget {
const BlogWebApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
Provider<List<BlogPost>>(create: (context) => blogPosts),
Provider<User>(
create: (context) => User(
name: 'Angel\'s Blog',
profilePicture:
'https://cdn.pixabay.com/photo/2018/03/24/00/36/girl-3255402_960_720.png',
),
),
],
child: MaterialApp(
title: 'Angel\'s Blog',
theme: CustomTheme.theme,
home: const BlogHomePage(),
),
);
}
}As a result, we have our home page as follows.
Since this web app hosts a blog, we expect people will read the blogs.
Therefore, we have kept the background light. Moreover, we have kept enough white space around.
Flutter work flow next step
After the theme, the next major step we take to maintain the flutter work flow is navigation.
What is Flutter Navigation? Moreover, what is Flutter Navigator? Are they the same? Or, are they different?
Above all, the answer lies in a widget.
Although Route is a widget, it still represents a new screen. Or, a new page.
In our case, on the home page, we have the list of blogs. Right?
As we click any one of the blogs, it will take us to the blog detail page.
For example, we navigate to the second route with the help of Navigator.
However, we need to understand the context.
What is the context?
Moreover, why do we need it?
Most apps use different screens. And, for that we need a router widget.
What is a navigator and routes in Flutter?
To begin with, we’ll see how a navigator and routes work in Flutter.
Firstly, we want a simple example. So the beginners can understand. Moreover, a better flutter developer must understand how routes work.
Secondly, to keep it simple, we navigate from the first screen to the second.
Further, we’ll learn how we can handle multiple routes. Above all, how we can pass data while navigating to a second page.
As we have said, route is a widget. Navigator is also another widget.
In our case, the user should click any one of the blog posts to see the detail page.
import 'package:flutter/material.dart';
import '../model/bog_post.dart';
import 'blog_page.dart';
class BlogListTileClass extends StatelessWidget {
const BlogListTileClass({
Key? key,
required this.post,
}) : super(key: key);
final BlogPost post;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
InkWell(
child: Text(
post.title,
style: TextStyle(color: Colors.blueAccent.shade700),
),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) {
return BlogPage(post: post);
},
));
},
),
const SizedBox(height: 10),
SelectableText(
post.date,
style: Theme.of(context).textTheme.caption,
),
],
);
}
}As we see in the above code, each blog title takes us to the detail page.
And, finally, in the blog detail page we can see the title, date, and body.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../controller/blog_scaffolding_controller.dart';
import '../controller/constrained_controller.dart';
import '../model/bog_post.dart';
import '../model/user.dart';
class BlogPage extends StatelessWidget {
final BlogPost post;
const BlogPage({
Key? key,
required this.post,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final user = Provider.of<User>(context);
return BlogScaffoldingControl(
children: [
ConstrainedControllerCentre(
child: Column(
children: [
CircleAvatar(
backgroundImage: NetworkImage(user.profilePicture),
radius: 70.0,
),
const SizedBox(height: 20.0),
Text(
user.name,
style: Theme.of(context).textTheme.headline5,
),
],
),
),
const SizedBox(height: 40.0),
SelectableText(
post.title,
style: Theme.of(context).textTheme.headline1!.copyWith(
fontSize: 40.0,
),
),
const SizedBox(
height: 20,
),
SelectableText(
post.date,
style: Theme.of(context).textTheme.caption,
),
const SizedBox(
height: 20,
),
SelectableText(post.body),
],
);
}
}To follow this flutter work flow we can take a look at this branch of GitHub repository.
Leave a Reply