# Guide

​

## Start Building Your App <a href="#start-building-your-app" id="start-building-your-app"></a>

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** <a href="#how-to-navigate-between-screens" id="how-to-navigate-between-screens"></a>

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

```
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());
     }​
 }
```