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:

---

---