Experiment 1

III Year I Semester	User Interface Design using Flutter	L	T	P	C
		0	0	2	1

Course Objectives:

• Learns to Implement Flutter Widgets and Layouts

• Understands Responsive UI Design and with Navigation in Flutter

• Knowledge on Widges and customize widgets for specific UI elements, Themes

• Understand to include animation apart from fetching data

Course Outcomes: 

1. Install Flutter and Dart SDK to learn basic app development.

2. Use Flutter widgets like Text, Image, and Container to build layouts with Row, Column, and Stack.

3. Create responsive designs for different screen sizes using media queries.

4. Set up navigation between screens using Navigator and named routes.

5. Manage app states with stateful and stateless widgets using setState and Provider.

6. Fetch data from REST APIs and enhance apps with animations and custom widgets.

List of Experiments: 

Students need to implement the following experiments

Text Books:

1. Marco L. Napoli, Beginning Flutter: A Hands-on Guide to App Development.

2. Rap Payne, Beginning App Development with Flutter: Create Cross-Platform Mobile Apps 1st Edition, Apres

3. Richard Rose, Flutter & Dart Cookbook, Developing Full stack Applications for the Cloud, Oreilly.

 

Experiment 1: Setting Up Flutter and Dart 

a) Install Flutter and Dart SDK

Description: Set up the Flutter environment by installing the Flutter SDK and Dart SDK.

S✅ Step 1: Download the Flutter SDK from the official website

1. Open your browser and go to the official Flutter download page:
   🔗 https://flutter.dev/docs/get-started/install
   
   

2. Click on the “Windows” tab.
   
   

3. Click Download Flutter SDK to download the latest stable release.
   
   

• It will download a ZIP file named similar to flutter_windows_3.x.x-stable.zip.
  
  

• File size will be around 1.2 – 1.5 GB, depending on the version.
  
  

---

✅ Step 2: Extract the downloaded zip file to a desired location

1. Navigate to your Downloads folder where the ZIP file is saved.
   
   

2. Right-click on the ZIP file and choose “Extract All…”.
   
   

3. Choose a convenient location to extract it, for example:
   📁 C:\flutter
   
   

4. Wait for the extraction to complete (takes ~1-3 minutes depending on your system speed).
   
   

✔️ After extraction, your folder structure should look like:

C:\flutter

  ├── bin

  ├── dev

  ├── examples

  └── other subfolders

---

✅ Step 3: Add the Flutter bin directory to your system's PATH

1. Press Win + S (search), type “env”, and select:
   
   👉 Edit the system environment variables
   
   

2. In the System Properties window that opens, click on:
   
   🔘 Environment Variables…
   
   

3. Under “System variables”, find and select Path, then click:
   
   ✏️ Edit
   
   

Click New, and enter the path to Flutter’s bin directory:


C:\flutter\bin

4. 
   

5. Click OK to close all dialogs.
   
   

✔️ This ensures that you can run Flutter commands like flutter doctor from any Command Prompt or PowerShell window.

---

✅ Step 4: Run flutter doctor in the terminal to verify the installation

1. Open Command Prompt or PowerShell.
   
   

Type the following command:

flutter doctor

2. 
   

3. Press Enter.
   
   

4. You will see an output showing installation checks for:
   
   

• Flutter
  
  

• Dart
  
  

• Android toolchain (if Android Studio is installed)
  
  

• Chrome (if doing web development)
  
  

• VS Code or Android Studio plugins (if installed)
  
  

✔️ Sample Output:

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, 3.x.x, on Microsoft Windows [Version 10.0.xxxx], locale en-IN)

[√] Android toolchain - develop for Android devices (Android SDK version xx.x.x)

[√] Chrome - develop for the web

[√] Visual Studio Code (version x.x.x)

[√] Connected device (2 available)

• No issues found!

5. If any issues are listed (marked with [!]), read the recommendations to resolve them (e.g., installing Android Studio or accepting Android SDK licenses).
   
   

---

🎯 Final Verification

✅ To confirm your Flutter installation is fully operational:

• Run flutter --version to check the installed version.
  
  

Create a sample app using:


flutter create my_app

cd my_app

flutter run

• 
  

✔️ This will launch your first sample Flutter app on your connected device or emulator.

b) Write a Simple Dart Program

Description: Create a basic Dart program to understand language syntax and structure.

 void main() 

{ 

   print('Hello, Dart!'); 

}