Note: If you don’t have flutter installed you can use the website zapp.run and start from step 4

1. First, make sure you have Flutter installed on your machine. If you don't, you can follow the instructions here to install it: **https://flutter.dev/docs/get-started/install**
2. Create a new Flutter project. There are two ways to do this:
   • Open VSCode and press F1. Then type flutter new project. (This is more GUI based)
   • Open a terminal and navigate to the directory where you want to create your project. Then, run the following command.
3. In the lib directory, you will find a file called main.dart. This is the main entry point for your app.

1. At this point run your app and you should have the default flutter template code working.

2. Start by deleting everything in the main.dart file and replace it with this code:

   // import the material.dart from the flutter package. This holds the default styles. 
   import 'package:flutter/material.dart';
   
   // This is the main entry point of the app. When it is launched this is what runs.
   void main() {
     runApp(const MyApp());
   }
   
   // Widget is just a class. So we are extending the capability of a StatelessWidget.
   class MyApp extends StatelessWidget {
     // constructor
   	const MyApp({super.key});
   
     // override the base functionality
     @override
     Widget build(BuildContext context) {
   		// Material App root widget
       return const MaterialApp(
         title: 'Todo App',
         home: Scaffold(),
       );
     }
   }
   

   Refresh and now you should have an empty page.

3. Now create a new page called Home Screen. This would be a stateful widget. Make sure to import material UI and return Scaffold();

• Try it yourself first and then refer to it.

1. Now we need to tell our main app that we have a new page that it needs to route to. So we need to import the home screen page and render the HomeScreen widget.

• Try it yourself first and then refer to it.

1. Now let’s start designing the Home Screen. We need to store the todo items somehow. We can use a list for that. Create a list before the @override. List<String> _items = [];

2. Let's start styling our Home Screen. Add an AppBar on the top with the text “Tasks”. If you want you can even change the color and styles.

• Try it yourself first and then refer to it.