Flutter User Interface Development

Flutter User Interface Examples

Page 1

Question 1 Code:

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('Home')),  
        body: Center(child: Text('Welcome Home')),  
      ),
    );
  }
}

• This code defines a simple Flutter application that has a Scaffold with an AppBar titled "Home" and a body that centers a Text widget displaying "Welcome Home".

Question 2 Code:

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('Profile')),  
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Name: John Doe'),
              Text('Age: 30'),
            ],
          ),
        ),
      ),
    );
  }
}

• This code creates a simple Profile page with an AppBar titled "Profile" and the body contains a centered Column with two Text widgets displaying a name and an age.

Page 2

Question 3 Code:

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('Contacts')),  
        body: ListView(
          children: [
            ListTile(title: Text('Alice')),  
            ListTile(title: Text('Bob')),  
            ListTile(title: Text('Charlie')),  
          ],
        ),
      ),
    );
  }
}

• This code sets up a Contacts page with an AppBar titled "Contacts" and a ListView displaying three ListTile widgets for names Alice, Bob, and Charlie.

Question 4 Code:

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('Settings')),  
        body: Center(
          child: Switch(value: true, onChanged: (bool newValue) {}),  
        ),
      ),
    );
  }
}

• In this code, a Settings page comprises an AppBar titled "Settings" and a body that centers a Switch widget which represents a toggle for an on/off setting.

Page 3

Question 5 Code:

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('Messages')),  
        body: ListView(
          children: [
            ListTile(
              title: Text('Message 1'),  
              subtitle: Text('Hello!'),  
              trailing: IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {},
              ),
            ),
            ListTile(
              title: Text('Message 2'),  
              subtitle: Text('Hi!'),
              trailing: IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }
}

• This code creates a Messages page featuring an AppBar titled "Messages" and a ListView containing two ListTiles with messages and delete buttons attached.

Question 6 Code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailsScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),  
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),  
      body: Center(child: Text('Details Screen')),  
    );
  }
}

• Here, the code comprises a routing example with a Home screen and a Details screen. The Home screen has a button that navigates to the Details screen when pressed. A request for an interface illustrating navigation (arrow) is also included.

Page 4

Question 7 Code:

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('Login')),  
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(decoration: InputDecoration(labelText: 'Username')),  
              TextField(decoration: InputDecoration(labelText: 'Password')),  
              ElevatedButton(
                onPressed: () {},
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• This code snippet creates a Login interface that contains a Username and Password TextField, with a Login button below them within a padded column layout.

Question 8 Code:

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('Tasks')),  
        body: ListView.builder(
          itemCount: 5,
          itemBuilder: (context, index) {
            return ListTile(
              leading: Checkbox(value: false, onChanged: (bool? value) {}),
              title: Text('Task ${index + 1}'),
            );
          },
        ),
      ),
    );
  }
}

• This segment of code displays a Tasks interface featuring a ListView where each item contains a Checkbox and a Task title generated dynamically based on the index of the loop.

Page 5

Question 9 Code:

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('Gallery')),  
        body: GridView.count(
          crossAxisCount: 2,
          children: [
            Image.network('https://via.placeholder.com/150'),
            Image.network('https://via.placeholder.com/150'),
            Image.network('https://via.placeholder.com/150'),
            Image.network('https://via.placeholder.com/150'),
          ],
        ),
      ),
    );
  }
}

• This code delineates a Gallery page that utilizes a GridView to display images fetched from the web, organized in two columns.

Question 10 Code:

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('Product')),  
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Text('Product Name: Widget 1'),
              Text('Price: \$100'),
              ElevatedButton(
                onPressed: () {},
                child: Text('Buy Now'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• The final code illustrates a Product interface which showcases a product's name and price with a button for purchasing the item based on the layout of a padded Column within a Scaffold.