# Creating a new screen

### How do I add a new screen?

in the project, there is a blank screen at `lib/magaza_ui/screens/blank.dart` already configured for you to use. 

* Make a copy of the blank.dart file. rename it to something unique
* in the code, rename the **BlankPage** class into the name of your choice

![](https://436780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1f1D_inwZ2KLboxO9P%2F-M2h0ylRZ7kzdyG9U6xS%2F-M2hA0sqnMXDxmb3XMxs%2Fimage.png?alt=media\&token=dffb5605-549d-490e-9387-ff5b71517d64)

In your \`lib/main.dart\`, import the new file and create a new route for the newly created screen. See examples below:

![Imported Screens](https://436780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1f1D_inwZ2KLboxO9P%2F-M2h0ylRZ7kzdyG9U6xS%2F-M2hAa3MPgFJ8z9iB44u%2Fimage.png?alt=media\&token=7dfbae41-13b6-476a-afb8-90cf85a9ca77)

![Defined routes with their Class names](https://436780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1f1D_inwZ2KLboxO9P%2F-M2h0ylRZ7kzdyG9U6xS%2F-M2hAeCWxGaFk6SLD_jG%2Fimage.png?alt=media\&token=b8323c33-4afa-4440-a3fa-76dd4ec4ff78)