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

Test your understanding of the `Column` widget.

**(True or False)** When designing for screens of different sizes, you should try to avoid `SizedBox` with fixed size values as children of your `Column` widgets.

(True or False) When designing for screens of different sizes, you should try to avoid <code>SizedBox</code> with fixed size values as children of your <code>Column</code> widgets.

The space between `1` and `3` is equal to the space at the end of the column.

The space at the end of the column is one-sixth of the available space.

The space between `3` and `4` is double the space between `1` and `2`.

The space at the top of the column, before `1`, is one-fourth of the available space.

Given the following code:

```Dart
Column(
  children: const [
    Spacer(flex: 3),
    Text('1'),
    Spacer(),
    Text('2'),
    Spacer(flex: 5),
    Text('3'),
    Spacer(flex: 2),
    Text('4'),
    Spacer(flex: 1)
  ],
),
```
**(Select all that apply.)** Which sentences are correct?

Given the following code:
<pre><code class="language-Dart">Column(
 children: const [
 Spacer(flex: 3),
 Text('1'),
 Spacer(),
 Text('2'),
 Spacer(flex: 5),
 Text('3'),
 Spacer(flex: 2),
 Text('4'),
 Spacer(flex: 1)
 ],
),
</code></pre>
(Select all that apply.) Which sentences are correct?

Because the size calculation can be done more quickly, saving both compiling and rendering time.

One is not better than the other. They are two ways of implementing the same exact layout.

Because it gives you more flexibility over where to add empty space and how big you can make that empty space.

Why is the `Spacer` approach better than setting the `mainAxisAlignment` property in the layout used in the `Column` lesson?

Why is the <code>Spacer</code> approach better than setting the <code>mainAxisAlignment</code> property in the layout used in the <code>Column</code> lesson?

`Column` widget

<code>Column</code> widget

Do you know why `Row` and `Column` have so many things in common? Let’s find out in the next quiz.

Test your understanding of multi-child widgets for responsive UI in Flutter through this quiz.

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

Quiz: Multi-child Layout Widgets