Guide

​

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 (settings.name) {   
        case AppRoutes.newComponentViewRoute :      
            return MaterialPageRoute(builder: (_) => NewComponent());
     }​
 }