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

Now that we’ve learned about the responsive layout widgets `MediaQuery` and `LayoutBuilder`, we’ll use them to fix a broken layout in a simple Flutter application. The following Flutter application has only one screen.

import 'package:flutter/material.dart';

class FlutterIsLove extends StatelessWidget {
  final double size;

  const FlutterIsLove({Key? key, required this.size}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        FlutterLogo(size: size),
        Icon(Icons.favorite, color: Colors.red, size: size),
      ],
    );
  }
}

import 'package:device_preview/device_preview.dart';
import 'package:flutter/material.dart';

import 'flutter_is_love.dart';

void main() {
  runApp(const ResponsiveWidgetsChallenge());
}

class ResponsiveWidgetsChallenge extends StatelessWidget {
  const ResponsiveWidgetsChallenge({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: 'Responsive and adaptive UI in Flutter',
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            title: const Text('Challenge'),
          ),
          body: const SafeArea(
            child: Center(child: FlutterIsLove(size: 200.0)),
          ),
        ),
      ),
    );
  }
}

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

The screen consists of the Flutter logo and a red heart icon. In `main.dart`, we pass their sizes when we construct the `FlutterIsLove` widget in **line 34**. For this example, we want them to have width and height equal to 200 pixels. In `flutter_is_love.dart`, we define `FlutterIsLove`. It consists of a `Column` widget with the two images spaced evenly in the available space, but when there isn’t enough vertical space, the layout is broken.

Apply what you’ve learned about MediaQuery and LayoutBuilder in a coding challenge.

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

Challenge: Measure your Sizes - Responsive UI Widgets