Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
367 views

05 AMP in Flutter LAB 1 (First Flutter App)

This document provides instructions for creating a basic Flutter app. It outlines three learning goals: how to create a new Flutter app, understand the basic app structure, and use hot reload. It then provides steps to create a new project and run a starter app, and demonstrates how to use hot reload to quickly update text on the running app. Finally, it lists steps to create a simple "Hello World" app by replacing the code in the main file.

Uploaded by

DANIEL ABERA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
367 views

05 AMP in Flutter LAB 1 (First Flutter App)

This document provides instructions for creating a basic Flutter app. It outlines three learning goals: how to create a new Flutter app, understand the basic app structure, and use hot reload. It then provides steps to create a new project and run a starter app, and demonstrates how to use hot reload to quickly update text on the running app. Finally, it lists steps to create a simple "Hello World" app by replacing the code in the main file.

Uploaded by

DANIEL ABERA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Learning Outcomes / Goals 

● How to create a new Flutter app  

● Basic structure of a Flutter app 

● Using hot reload for a quicker development cycle 

Exercise 1 
In this exercise, you will create your first Flutter app 

Steps for Creating and Running Flutter Application 

1. Invoke V
​ iew > Command Palette​. 

2. Type “flutter”, and select the ​Flutter: New Application Project​. 

3. Enter a project name, such as ​myapp​


, and press Enter. 

4. Create or select the parent directory for the new project folder. 

5. Wait for project creation to complete and the m


​ ain.dart​file to appear. 

6. Locate the VS Code status bar (the blue bar at the bottom of the window): 

7. Select a device from the Device Selector area 

8. Invoke R
​ un > Start Debugging​ or press F
​ 5​
. 

After the app build completes, you’ll see the starter app on your 

device. 

 
 

Try hot reload 

Flutter offers a fast development cycle with ​Stateful Hot Reload​, the ability to reload 
the code of a live running app without restarting or losing app stat 

 
1. Open​ ​lib/main.dart​.

2. Change the string 

'You have p
​ushed​the button this many times' 

to 

'You have c
​licked​the button this many times' 

3. Save your changes: invoke Save All, or click Hot Reload  

.You’ll see the updated string in the running app almost immediately. 

Exercise 2 
In this exercise, you will create a simple “Hello World” Flutter app 

1. Delete all of the code from ​lib/main.dart  


2. Replace it with the following code, which displays "Hello World" in the center of the 

screen 

import​ ​'package:flutter/material.dart'​;

void​ main() => runApp(​MyApp​());

class​ ​MyApp​ ​extends​ ​StatelessWidget​ {


​@override
​Widget​ build(​BuildContext​ context) {
​return​ ​MaterialApp​(
title: ​'Welcome to Flutter'​,
home: ​Scaffold​(
appBar: ​AppBar​(
title: ​const​ ​Text​(​'Welcome to Flutter'​),
),
body: ​const​ ​Center​(
child: ​const​ ​Text​(​'Hello World'​),
),
),
);
}
}
 

Run the app​. You should see the following on your device 

. 

You might also like