Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
383 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
383 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
We take content rights seriously. If you suspect this is your content, claim it here.
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