Skip to content

README.md

Latest commit

 

History

History
244 lines (200 loc) · 6.65 KB

README.md

File metadata and controls

244 lines (200 loc) · 6.65 KB
Raw

Experiment 3 - Part A: Responsive UI

Try APK

Aim

To design a responsive UI that adapts to different screen sizes.

Objective

The objective of this experiment is to create a Flutter project that demonstrates the concept of responsive UI design. The UI should adjust its layout and appearance based on the screen size of the device.

System Requirements

  • Flutter SDK: version 2.0.0 or higher
  • IDE: Visual Studio Code (Supported) or android studio (Supported) or IntelliJ IDEA (Supported).
  • Operating System: Windows (7 or higher), macOS (10.12 or higher), or Linux (Ubuntu, Debian, Fedora, CentOS, or similar)

Procedure

  1. Create a new Flutter project by running the following command in your terminal:

    flutter create my_flutter_app

    This command will create a Flutter project directory called my_flutter_app that contains a simple demo app using Material Components.

  2. Change to the Flutter project directory:

    cd my_flutter_app

  3. Open the lib/main.dart file in your Flutter project.

  4. Replace the existing code with the following code snippet:

    import 'package:flutter/material.dart';

void main() {
runApp(const MainApp());
}

class MainApp extends StatelessWidget {
const MainApp({super.key});

@override
Widget build(BuildContext context) {
    return const MaterialApp(
    title: 'Responsive UI',
    home: ResponsiveHomePage(),
    );
}
}

class ResponsiveHomePage extends StatelessWidget {
const ResponsiveHomePage({super.key});

@override
Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
        title: const Text('Responsive UI'),
    ),
    body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth >= 600) {
            // For Wide Screen (Tablet/Desktop)
            return _buildWideContainers();
        } else {
            // For Narrow Screen (Phone)
            return _buildNarrowContainers();
        }
        },
    ),
    );
}

Widget _buildWideContainers() {
    return Container(
    color: Colors.blue,
    child: const Center(
        child: Text(
        'You are using a Wide screen!',
        style: TextStyle(
            fontSize: 26, color: Colors.white, fontWeight: FontWeight.bold),
        ),
    ),
    );
}

Widget _buildNarrowContainers() {
    return Container(
    color: Colors.green,
    child: const Center(
        child: Text(
        'You are using a Narrow screen!',
        style: TextStyle(fontSize: 16, color: Colors.white),
        ),
    ),
    );
}
}

  5. Save the file.

  6. Run your Flutter project using the following command:

    flutter run

    Select the appropriate device to run the app.

  7. To hot reload the app and see the changes you made to the code, enter r. To quit the app, enter q.

Output

Recording.2024-07-13.170832.mp4

Extra Practice

To further enhance your understanding of responsive UI design in Flutter, you can try to implement the following additional features:

  1. Divide the screen into multiple sections based on the screen size.

Recording.2024-07-13.203728.mp4
Solution 
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Responsive UI',
      home: ResponsiveHomePage(),
    );
  }
}

class ResponsiveHomePage extends StatelessWidget {
  const ResponsiveHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Responsive UI'),
      ),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth >= 600) {
            // For Wide Screen (Tablet/Desktop)
            return _buildLargeScreenLayout();
          } else {
            // For Narrow Screen (Phone)
            return _buildSmallScreenLayout();
          }
        },
      ),
    );
  }

  Widget _buildLargeScreenLayout() {
    return Row(
      children: <Widget>[
        Expanded(
          child: Container(
            color: Colors.blue,
            child: const Center(
              child: Text(
                'Left Container\n(Wide Screen)',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.green,
            child: const Center(
              child: Text(
                'Right Container\n(Wide Screen)',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildSmallScreenLayout() {
    return Column(
      children: <Widget>[
        Expanded(
          child: Container(
            color: Colors.blue,
            child: const Center(
              child: Text(
                'Top Container\n(Narrow Screen)',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.green,
            child: const Center(
              child: Text(
                'Bottom Container\n(Narrow Screen)',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Conclusion

In this experiment, we successfully designed a responsive UI that adapts to different screen sizes using Flutter. The UI layout and appearance adjust dynamically based on the screen size of the device, providing an optimal user experience.

References