Start Building Your App

This App guides you throughout building your app, providing the steps and procedure to customize.

Contents discussed in this section:

  • How to add new Component?

  • How to add new Stylesheet?

  • How to navigate between screens?

How to add new Component

  • Create a new folder, say NewComponent and place it under /lib/views/ .

  • Create a new file index.dart within this folder.

  • Name the class same as that of folder name.

class NewComponent extends StatefulWidget { @override NewComponentState createState() => new NewComponentState(); . . . . . .}class NewComponentState extends State { . . . . . .​}

How to navigate between screens

Create a new static variable for the new screen you want to route/navigate to in the /lib/constants/app_routes.dart

class AppRoutes {
static const newComponentViewRoute = "new_component_view_route";

Then go to /lib/utils/router.dart , and add the page class to route to

import 'package:appname/views/NewComponent/index.dart';​
import 'package:foodie/constants/app_routes.dart';
​Route generateRoute(RouteSettings settings) {
switch ( {
case AppRoutes.newComponentViewRoute :
return MaterialPageRoute(builder: (_) => NewComponent());