Gain insights into responsive and adaptive UI in Flutter, explore powerful widgets, external packages, and hands-on coding to build user-friendly, cross-platform applications.

app.tar.gz

why_matters_job

run_local_files

Flutter is an open-source software development kit (SDK) created by Google to support cross-platform application development for online and in the most popular consumer operating systems. Understanding Flutter’s user interface (UI) approach can help unlock robust application development across all these environments.

This course will introduce you to the core concepts of responsive and adaptive UI in Flutter. You’ll start with common layout widgets before exploring application development using the most powerful widgets. Next, you’ll explore external packages that can extend responsiveness and adaptiveness beyond the core Flutter UI. At each step, you’ll see examples comparing and contrasting responsive and adaptive UIs with applications that do not invoke these principles. Finally, you’ll build functional widgets and application UI with hands-on coding environments

By the end of this course, you’ll be able to build user-friendly applications in Flutter using responsive and adaptive UI principles.

Responsive and Adaptive UI in Flutter

In most Flutter smartphone applications, widgets that need to be repeated on the screen are often implemented using `ListView` widgets. These widgets might not scale well when the same application is run on larger screens. For example, the application in the code below has a list of courses on the first screen.

import 'package:flutter/material.dart';

import 'profile_view.dart';
import 'settings_view.dart';

class AppMenu extends StatelessWidget {
  const AppMenu({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
        right: false,
        child: Column(
          children: <Widget>[
            _AppMenuButton(
              icon: const Icon(Icons.account_circle),
              title: 'Profile',
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ProfileView()),
                );
              },
            ),
            _AppMenuButton(
              icon: const Icon(Icons.settings),
              title: 'Settings',
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SettingsView()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class _AppMenuButton extends StatelessWidget {
  final Icon icon;
  final String title;
  final Function() onPressed;
  const _AppMenuButton({
    Key? key,
    required this.icon,
    required this.title,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final canFitTitle = constraints.maxWidth > 180;

        return canFitTitle
            ? ListTile(
                leading: icon,
                title: Text(title),
                onTap: onPressed,
              )
            : IconButton(
                onPressed: onPressed,
                icon: icon,
              );
      },
    );
  }
}

abstract class AppLayout {
  static const double widthFirstBreakpoint = 450.0;
  static const double maximumContentWidthDetail = 700.0;
}


import 'dart:math';

import 'package:flutter/material.dart';
import 'data/course.dart';
import 'app_layout.dart';
import 'completed_indicator.dart';

class CourseDetails extends StatelessWidget {
  final Course course;

  const CourseDetails({Key? key, required this.course}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false,
        child: LayoutBuilder(builder: (context, constraints) {
          final totalWidth = constraints.maxWidth;
          final extraContentPadding =
              max<double>(totalWidth - AppLayout.maximumContentWidthDetail, 0) / 2;

          return Stack(
            children: <Widget>[
              Column(
                children: <Widget>[
                  // The scrollable widget takes all available space, after the
                  // bottom area takes whatever it needs.
                  Expanded(child: _scrollableView(extraContentPadding)),
                  _bottomArea(extraContentPadding),
                ],
              ),
              Positioned(
                child: FloatingActionButton(
                  onPressed: () {
                    // Navigate back.
                    Navigator.of(context).pop();
                  },
                  child: const Icon(Icons.close),
                  mini: true,
                ),
                top: 16,
                left: 16,
              )
            ],
          );
        }),
      ),
    );
  }

  Widget _scrollableView(double extraContentPadding) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0),
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: extraContentPadding),
              child: Container(
                height: 200,
                color: course.color,
                child: const Center(
                  child: Icon(Icons.image),
                ),
              ),
            ),
            const SizedBox(height: 61),
            Padding(
              padding:
                  EdgeInsets.symmetric(horizontal: 16.0 + extraContentPadding),
              child: Column(
                children: [
                  Container(
                    color: Colors.grey,
                    height: 0.5,
                  ),
                  const SizedBox(height: 20),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      course.title,
                      style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w800,
                      ),
                    ),
                  ),
                  const SizedBox(height: 5),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      course.description,
                      style: const TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w300,
                        color: Colors.grey,
                      ),
                    ),
                  ),
                  const SizedBox(height: 30),
                  ...course.lessons.map((lesson) {
                    return Row(
                      children: [
                        const Text("• "),
                        Expanded(
                          child: Text(lesson),
                        ),
                      ],
                    );
                  }),
                ],
              ),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }

  Widget _bottomArea(double extraContentPadding) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: extraContentPadding),
      child: Container(
        decoration: BoxDecoration(color: Colors.white, boxShadow: [
          // Box shadow. It must be visible only on the top.
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: -1,
            blurRadius: 7,
            offset: const Offset(0, -6),
          )
        ]),
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: CompletedIndicator(
                percent: course.completed, color: course.color),
          ),
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';

class CompletedIndicator extends StatelessWidget {
  final double percent;
  final Color color;

  const CompletedIndicator(
      {Key? key, required this.percent, required this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'Completed ${percent * 100}%',
          style: const TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w300,
          ),
        ),
        const SizedBox(height: 8),
        LinearPercentIndicator(
          lineHeight: 10,
          percent: percent,
          progressColor: color,
          backgroundColor: Colors.grey,
        ),
      ],
    );
  }
}

import 'package:flutter/material.dart';

class ProfileView extends StatelessWidget {
  const ProfileView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      body: Center(
        child: Column(
          children: const [
            SizedBox(height: 120.0),
            CircleAvatar(
              child: Icon(
                Icons.face,
                size: 100.0,
              ),
              radius: 78.0,
            ),
            SizedBox(height: 8),
            Text(
              "Your name",
              style: TextStyle(fontSize: 24.0),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class SettingsView extends StatelessWidget {
  const SettingsView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          ListTile(
            leading: const Icon(Icons.notifications),
            title: const Text('Push notifications'),
            trailing: Switch(value: true, onChanged: (_) {}),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'profile_view.dart';
import 'settings_view.dart';

class AppDrawer extends StatelessWidget {
  const AppDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.green[400],
            ),
            child: const Text(
              'Menu',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          ListTile(
            leading: const Icon(Icons.account_circle),
            title: const Text('Profile'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const ProfileView()),
              );
            },
          ),
          ListTile(
            leading: const Icon(Icons.settings),
            title: const Text('Settings'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SettingsView()),
              );
            },
          ),
        ],
      ),
    );
  }
}

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

import 'data/course.dart';
import 'completed_indicator.dart';
import 'course_details.dart';

class CourseView extends StatelessWidget {
  final Course course;

  const CourseView({
    Key? key,
    required this.course,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      splashColor: Colors.transparent,
      onTap: () {
        Navigator.push(
          context,
          CupertinoModalPopupRoute(
            builder: (context) => CourseDetails(course: course),
          ),
        );
      },
      child: Card(
        elevation: 1,
        shadowColor: Colors.black45.withAlpha(125),
        semanticContainer: true,
        shape: const BeveledRectangleBorder(),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    height: 200,
                    color: course.color,
                    child: const Center(
                      child: Icon(Icons.image),
                    ),
                  ),
                  const SizedBox(height: 24),
                  Text(
                    course.title,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    course.description,
                    style: const TextStyle(fontSize: 12),
                  ),
                ],
              ),
              const SizedBox(height: 24),
              CompletedIndicator(
                percent: course.completed,
                color: course.color,
              )
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'app_menu.dart';
import 'drawer.dart';
import 'course_view.dart';
import 'data/course.dart';
import 'app_layout.dart';

class CourseList extends StatelessWidget {
  const CourseList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final smallerDevice = width < AppLayout.widthFirstBreakpoint;

    final courseList = Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView.separated(
        itemBuilder: (_, index) => CourseView(course: Course.shortList[index]),
        separatorBuilder: (_, __) => const SizedBox(height: 15),
        itemCount: Course.shortList.length,
      ),
    );
    return Scaffold(
      backgroundColor: Colors.green[900],
      appBar: AppBar(
        title: const Text('Not a fully responsive app'),
      ),
      drawer: smallerDevice ? const AppDrawer() : null,
      body: smallerDevice
          ? courseList
          : Row(
              children: [
                const Expanded(
                  flex: 1,
                  child: AppMenu(),
                ),
                Expanded(
                  flex: 6,
                  child: courseList,
                ),
              ],
            ),
    );
  }
}


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

import 'course_list.dart';

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

class CoursesApp extends StatelessWidget {
  const CoursesApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DevicePreview(
      tools: const [
        DeviceSection(),
      ],
      builder: (context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        useInheritedMediaQuery: true,
        builder: DevicePreview.appBuilder,
        locale: DevicePreview.locale(context),
        title: 'Not a fully responsive app',
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: const CourseList(),
      ),
    );
  }
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

In `course_list.dart`, we create a list of `CourseView` widgets from **lines 17** to **22**. Because we implemented `CourseView` without limiting the width of the widget, the list is going to take the entire available width. It’s too wide for larger screens.

On wider screens, such as those on tablets, we should limit the width of each `CourseView` widget and fit at least two of them in a single row. We can achieve this result by replacing `ListView` with other widgets, such as `Wrap`, `GridView`, or third-party packages. The only way we can achieve the best result in our own applications is by creating a custom widget that only follows our desired design. For example, look at the following code.

Learn to create your own custom grid when you need to adapt the number of rows and columns to the screen's width.

Introduction

Basic Single-Child Layout Widgets

Basic Multi-Child Layout Widgets

The Problem of Starting with a Smartphone

Measure your Sizes - Responsive UI Widgets

Different Widgets for Different Sizes

Avoid Gigantic Widgets

Adaptive Design

External Packages

Conclusion

Appendix: Other Resources

Custom Grid for Special Cases