We have been building a funny recipe app in Flutter. In the first part, we have built a categories page. But in a very simple way. Now we want to use Flutter navigation to send data.
That means when user clicks a category, it takes her to that category page.
As a result, she can press the back button, and come back.
Let us see where we had left before.
As we can see, we had not used any custom theme. Although we can use custom font. In addition, we can apply a custom theme across the app.
How to add a custom Font
Firstly, we can use Google font package for Flutter. It’s a convenient way to different fonts across the app.
In fact, in a previous article, we have discussed that.
But this time we will download Google fonts. After that, we will add the fonts in pubspec.yaml file as follows.
fonts:
- family: Raleway
fonts:
- asset: assets/fonts/Raleway-Regular.ttf
- asset: assets/fonts/Raleway-Bold.ttf
weight: 700
- asset: assets/fonts/Raleway-Black.ttf
weight: 900
- family: RobotoCondensed
fonts:
- asset: assets/fonts/RobotoCondensed-Regular.ttf
- asset: assets/fonts/RobotoCondensed-Bold.ttf
weight: 700
- asset: assets/fonts/RobotoCondensed-Light.ttf
weight: 300
- asset: assets/fonts/RobotoCondensed-Italic.ttf
style: italicNext we will customise our theme in MaterialApp Widget. Later we will take that part to a separate class.
Subsequently, we have used our fonts and changed the color across the app.
import 'package:flutter/material.dart';
import 'coo_king_kong_home.dart';
class CooKingKongApp extends StatelessWidget {
const CooKingKongApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
canvasColor: const Color.fromRGBO(255, 254, 229, 1),
fontFamily: 'Raleway',
textTheme: ThemeData.light().textTheme.copyWith(
bodySmall: const TextStyle(
color: Color.fromRGBO(20, 51, 51, 1),
),
bodyMedium: const TextStyle(
color: Color.fromRGBO(20, 51, 51, 1),
),
titleSmall: const TextStyle(
fontSize: 20,
fontFamily: 'RobotoCondensed',
fontWeight: FontWeight.bold,
),
titleMedium: const TextStyle(
fontSize: 30,
fontFamily: 'RobotoCondensed',
fontWeight: FontWeight.bold,
),
titleLarge: const TextStyle(
fontSize: 40,
fontFamily: 'RobotoCondensed',
fontWeight: FontWeight.bold,
),
),
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.pink)
.copyWith(secondary: Colors.amber),
),
home: const CooKingKongHome(),
);
}
}As a result, our CooKingKong App will have a different look.
Now the previous look is no longer there. Secondly, we will press each category so that we can go to that particular page.
That is our next challenge.
Flutter navigation send data
How does the Flutter navigation work? We have discussed in a previous lesson.
Navigator.push method places one page on top of the other pages.
Navigator.pop method displaces that page, so that the page below can emerge. It’s a simple mechanism.
But there are other better ways to handle the same problem.
Why? Because this simple mechanism is okay with simple apps where we deal with one, or two pages.
What happens when there are many pages?
Certainly, we need a better mechanism. We will discuss that topic in our next section.
This time we will only pass data from categories item page to an individual category page.
To do that, we need a Widget that has a tapping facility. So a user can tap any category to see what items it contains.
import 'package:flutter/material.dart';
import 'individual_category_page.dart';
/// TODO: this page displays each category by name and color
/// we will add a method that will take us to individual
/// category page
class CategoryItem extends StatelessWidget {
const CategoryItem({
Key? key,
required this.id,
required this.title,
required this.color,
}) : super(key: key);
final String id;
final String title;
final Color color;
void selectCategory(BuildContext context) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return IndividualCategoryPage(
id: id,
title: title,
color: color,
);
},
),
);
}
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => selectCategory(context),
splashColor: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(15),
child: Container(
//margin: const EdgeInsets.all(8.0),
child: Center(
child: Text(
title,
style: Theme.of(context).textTheme.titleSmall,
textAlign: TextAlign.center,
),
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
color.withOpacity(0.6),
color,
],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
borderRadius: BorderRadius.circular(15.0),
),
),
);
}
}In the above code, we send data through class constructor. We have defined that mechanism in a separate method.
void selectCategory(BuildContext context) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return IndividualCategoryPage(
id: id,
title: title,
color: color,
);
},
),
);
}Meanwhile we call that method inside Inkwell Widget.
return InkWell(
onTap: () => selectCategory(context),
...We could have used the GestureDetector Widget. But InkWell gives us more freedom to use the custom theme color.
splashColor: Theme.of(context).primaryColor,How a Widget receives data
The mechanism is same. It receives data through class constructor.
Therefore, if we take a look at the individual category page, we can see that it receives data through class constructor.
import 'package:flutter/material.dart';
class IndividualCategoryPage extends StatelessWidget {
const IndividualCategoryPage({
Key? key,
required this.id,
required this.title,
required this.color,
}) : super(key: key);
final String id;
final String title;
final Color color;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Container(
color: color,
child: Text(
title,
style: Theme.of(context).textTheme.titleLarge,
),
),
),
);
}
}Now we can click any category, and see the same title in the AppBar, body and the same color.
Finally, we have sent data to a page. However, we have not been able to show everything in this section.
If you want to clone this step please visit the respective branch of GitHub Repository.
In the next section we will discuss the named route, that will make our code cleaner and robust.
Leave a Reply