Dr. K. Sandeep: 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
          },
        ),
      ),
    );
  }
}

Exercise - 5:

5 a) Learn about stateful and stateless widgets.

 1. Stateless Widget
	A StatelessWidget is immutable: once it is built, it cannot change its state during runtime.
	Used when the UI does not depend on dynamic data (e.g., labels, static layouts). 
 2. Stateful Widget
	A StatefulWidget can change during runtime using setState(). 

StatelessWidget → UI never changes.

StatefulWidget → UI can change with setState().

5 b) Implement state management using set State and Provider.

//Add provider to pubspec.yaml:
//dependencies:
//  flutter:
//    sdk: flutter
//  provider: ^6.0.5

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

// State Class
class CounterModel with ChangeNotifier {
  int _count = 0;

int get count => _count;

void increment() {
    _count++;
    notifyListeners(); // notifies all listening widgets
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CounterModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: CounterScreen());
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var counter = Provider.of<CounterModel>(context);

return Scaffold(
      appBar: AppBar(title: Text("Provider Example")),
      body: Center(
        child: Text("Count: ${counter.count}", style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Exercise - 6:

6 a) Create custom widgets for specific UI elements.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Simple Avatar UI")),
        body: Center(
          child: CustomAvatar(
            imageUrl: "imageUrl",
            name: "Sandeep",
          ),
        ),
      ),
    );
  }
}

//  Custom Widget (Avatar)
class CustomAvatar extends StatelessWidget {
  final String imageUrl;
  final String name;

CustomAvatar({required this.imageUrl, required this.name});

@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        CircleAvatar(
          radius: 50,
          backgroundImage: NetworkImage(imageUrl),
        ),
        SizedBox(height: 10),
        Text(
          name,
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
      ],
    );
  }
}

6 b) Apply styling using themes and custom styles.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Theming Example",

// Global Theme
      theme: ThemeData(
        primarySwatch: Colors.teal,
        textTheme: TextTheme(
          bodyMedium: TextStyle(fontSize: 16, color: Colors.black87),
          titleLarge: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),

home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Themes & Styles"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Uses global theme (titleLarge)
            Text(
              "Welcome to Flutter!",
              style: Theme.of(context).textTheme.titleLarge,
            ),
            SizedBox(height: 20),

// Custom Style applied locally
            Text(
              "This text has custom style",
              style: TextStyle(
                fontSize: 18,
                color: Colors.purple,
                fontWeight: FontWeight.w600,
                letterSpacing: 1.2,
              ),
            ),
            SizedBox(height: 20),

// Widget with custom background styling
            Container(
              padding: EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.teal.shade100,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Text(
                "Styled Container",
                style: TextStyle(fontSize: 16, color: Colors.teal.shade900),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Exercise - 7:

7 a) and b) Design a form with various input fields. Implement form validation and error handling

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Form Validation Example",
      home: FormScreen(),
    );
  }
}

class FormScreen extends StatelessWidget {
  final _formKey = GlobalKey<FormState>();

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Form with Validation")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // Name Field
              TextFormField(
                decoration: InputDecoration(labelText: "Name"),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return "Name is required";
                  }
                  return null;
                },
              ),

// Email Field
              TextFormField(
                decoration: InputDecoration(labelText: "Email"),
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return "Email is required";
                  }
                  if (!value.contains("@")) {
                    return "Enter a valid email";
                  }
                  return null;
                },
              ),

// Password Field
              TextFormField(
                decoration: InputDecoration(labelText: "Password"),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.length < 6) {
                    return "Password must be at least 6 characters";
                  }
                  return null;
                },
              ),

// Age Field
              TextFormField(
                decoration: InputDecoration(labelText: "Age"),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return "Age is required";
                  }
                  if (int.tryParse(value) == null) {
                    return "Enter a valid number";
                  }
                  return null;
                },
              ),

SizedBox(height: 20),

ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text("Form Submitted Successfully!")),
                    );
                  }
                },
                child: Text("Submit"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3 comments:

Dawid123August 26, 2025 at 6:34 PM
The blog on user interface design using Flutter highlights its flexibility and performance benefits. Businesses aiming for seamless cross-platform apps can greatly benefit from these insights. To achieve professional results, consider collaborating with experts Hire Flutter Developers for building engaging and responsive applications.
Syam ATSSeptember 4, 2025 at 3:31 PM
Very good information. Thanks for sharing valuable information with us. Keep sharing .Fore More :-
Best Python training in Hyderabad keyword
anjani02September 6, 2025 at 3:10 PM
Pega software course: Learn end‑to‑end Pega development—case lifecycles, data objects, UI, and workflow automation—with live expert sessions, labs, and CSA/CSSA‑aligned projects for job‑ready skills.