User Interface Design using Flutter

Exercise - 1: Flutter and Dart SDK

• 1b. Write a simple Dart program to understand the basic language.
// hello.dart void main() { print('Hello, Dart!'); // Variables String name = 'Alice'; int age = 25; double height = 5.6; bool isStudent = true; // Lists List hobbies = ['reading', 'coding', 'hiking']; // Function call greetUser(name); // Control flow if (age >= 18) { print('$name is an adult.'); } else { print('$name is a minor.'); } // Loop print('Hobbies:'); for (var hobby in hobbies) { print('- $hobby'); } } // Function definition void greetUser(String username) { print('Welcome, $username!'); }

---

---

Exercise - 2:

• 2. a) Explore various Flutter widgets (Text, Image, Container, etc.).
Text('Hello, World!',style: TextStyle(fontSize: 24, color: Colors.red),), Image.file(File('asset/images/Screenshot.png'), width: 200, height: 200,), Container( padding: EdgeInsets.all(16), color: Colors.green, child: Text('Inside a container'), )
• 2. b) Implement different layout structures using Row, Column, and Stack Widget.
mainAxisAlignment: MainAxisAlignment.center, children: < Widget >[ Text('Username'), SizedBox(height: 20), Text('Password'), SizedBox(height: 20), ElevatedButton( onPressed: () {}, child: Text('Click Me'), ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Icon(Icons.home, size: 40), Icon(Icons.search, size: 40), Icon(Icons.settings, size: 40), ], ), Stack( alignment: Alignment.center, children: [ Container( width: 200, height: 200, color: Colors.blue, ), Container( width: 100, height: 100, color: Colors.red, ), Text( 'Center', style: TextStyle(color: Colors.white, fontSize: 20), ), ], )

---

---

Exercise - 3:

• 3 a) Design a responsive UI that adapts to different screen sizes.
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Responsive UI Demo', home: ResponsiveUI(), // <- This is your Scaffold-based widget ); } } class ResponsiveUI extends StatelessWidget { @override Widget build(BuildContext context) { final screenWidth = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar(title: Text("Responsive UI")), body: LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth > 600) { // Tablet/Desktop Layout return Row( children: [ Expanded(child: Container(color: Colors.blue, child: Center(child: Text("Sidebar")))), Expanded(flex: 2, child: Container(color: Colors.white, child: Center(child: Text("Main Content")))), ], ); } else { // Mobile Layout return Column( children: [ Container(height: 100, color: Colors.blue, child: Center(child: Text("Top Bar"))), Expanded(child: Container(color: Colors.white, child: Center(child: Text("Main Content")))), ], ); } }, ), ); } }
• 3 b) Implement media queries and breakpoints for responsiveness.
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } // Root widget class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Media Query Breakpoints Demo', home: ResponsiveLayout(), ); } } // Main responsive widget using breakpoints class ResponsiveLayout extends StatelessWidget { @override Widget build(BuildContext context) { double screenWidth = MediaQuery.of(context).size.width; if (screenWidth < 600) { // Small screen: Mobile return Scaffold( appBar: AppBar(title: Text("Mobile Layout")), body: Center(child: Text("This is a Mobile Layout", style: TextStyle(fontSize: 16))), ); } else if (screenWidth >= 600 && screenWidth < 1200) { // Medium screen: Tablet return Scaffold( appBar: AppBar(title: Text("Tablet Layout")), body: Center(child: Text("This is a Tablet Layout", style: TextStyle(fontSize: 20))), ); } else { // Large screen: Desktop return Scaffold( appBar: AppBar(title: Text("Desktop Layout")), body: Center(child: Text("This is a Desktop Layout", style: TextStyle(fontSize: 24))), ); } } }

---

---

Exercise - 4:

• 4 a) Set up navigation between different screens using Navigator.
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } // Root widget class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Navigator Demo', home: FirstScreen(), ); } } // First Screen class FirstScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("First Screen")), body: Center( child: ElevatedButton( child: Text("Go to Second Screen"), onPressed: () { // Navigation using direct push Navigator.push( context, MaterialPageRoute(builder: (context) => SecondScreen()), ); }, ), ), ); } } // Second Screen class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Second Screen")), body: Center( child: ElevatedButton( child: Text("Back to First Screen"), onPressed: () { Navigator.pop(context); // Go back }, ), ), ); } }
• 4 b) Implement navigation with named routes.
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Named Routes Demo', initialRoute: '/', routes: { '/': (context) => HomeScreen(), '/second': (context) => SecondScreen(), }, ); } } // Home Screen class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Home Screen")), body: Center( child: ElevatedButton( child: Text("Go to Second Screen"), onPressed: () { Navigator.pushNamed(context, '/second'); // Using named route }, ), ), ); } } // Second Screen class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Second Screen")), body: Center( child: ElevatedButton( child: Text("Back to Home"), onPressed: () { Navigator.pop(context); // Go back }, ), ), ); } }