Responsiveness in Flutter

Help General
1

Hello everyone, great to be here!

I’m curious—how do you approach responsiveness in your Flutter projects? I’d really appreciate any recommended resources to help me improve.

Thank you!

4 Likes
2

Hi,

Welcome! I found this talk by @filip to be really helpful.

Edit: sorry… you probably meant responsiveness as in “mobile responsive” vs an app which is fast to respond.

5 Likes
3

thanks a bunch!
about to dig in !

1 Like
4

You don’t want pixel perfect. You want responsive. And Flutter has many amazing tools to make responsive layouts, like LayoutBuilder for breakpoints, and Flex (Row/Column) widgets for adaptive sizing. Figma and other mockup tools are generally very poor at representing this… I wish there was a great tool to recommend. Oh, and familiarize yourself with less-referenced layout widgets like FittedBox, FractionallySizedBox, AspectRatio, Spacer, Wrap, and learn when to use double.infinity for a width or height rather than querying with MediaQuery for the useless screen size. This is a great writeup from the author of Boxy on the fundamentals of Flutter layout including MediaQuery: MediaQuery - ping's notes.

12 Likes
5

Thanks Randal!
amazing tips

6

Just swop some of the code out

SizedBox(
  width: MediaQuery.of(context).size.width * 0.8,
  height: MediaQuery.of(context).size.width * 0.1,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('Do a Thing'),
  ),
),

to

SizedBox(
  width: MediaQuery.sizeOf(context).width * 0.8,
  height: MediaQuery.sizeOf(context).width * 0.1,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('Do a Thing'),
  ),
),
7

If you are referring the responsive in the sense of large and small devices, I have used the below approach on some projects.

import 'package:flutter/material.dart';

import 'const/const.dart';
import 'pages/page.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wide/Narrow',
      theme: ThemeData(
        colorScheme: darkColorScheme,
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Wide/Narrow'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({required this.title, super.key});
  final String title;
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.sizeOf(context);
    switch (size.width) {
      case < 600:
        return const Narrow();
      case >= 600:
        return const Wide();
    }
    return const Placeholder();
  }
}
1 Like
8

Please don’t abuse MediaQuery like that. Use FractionalSizedBox and AspectRatio

10 Likes
9

It is this

1 Like
10

AdaptiveScaffold and the surrounding widgets and helpers are very useful for this.

See also Adaptive design | Flutter

6 Likes
11

thanks Johan

1 Like
12

thank you very much

13

And flutter_adaptive_scaffold is a first-party package (from the flutter team), ensuring Flutter implements material 3 intentions properly.

4 Likes
14

I did thread post in May on X/Twitter about some things I usually like to cover in responsive navigation design and also in how it transitions between media sizes.

I have no idea if I still have the media for the posts or if I can even post videos here, but here is a link to it on X/Twitter anyway. x.com

This is a reasonably complex adaptive scaffold, handling also edge cases of what happens when you have more destinations in larger media than you can fit on smaller media, and resize to small media from large media.

My intent has been to make this available as a package, but never gotten around to it. Also the mentioned material adaptive scaffold package is pretty good too, even if it does not do all the things shown in the linked example. You could build what it does with it though.

5 Likes
15

FWIW, the doc that @olof linked (Adaptive design | Flutter) was recently rewritten by the team and represents our view on what the best practices are.

Ultimately, though, everybody’s in control of their own app and will have their own preferences/approaches.

1 Like
16

@olof
Those are my suggestions too, I recorded some videos based in the new docs and the great talk by flutter team. I have two videos about adaptive scaffold package too (AdaptiveScaffold and Adaptive Layout) , the repos are available too. :blush:

3 Likes
17

how to get that sample repo.?
is there any example repo.

18

Yes it is really :100:
Thanks for sharing

19

The flutter_layout_grid package is really helpful for doing responsive layouts. It’s quite similar to CSS grid if you’re familiar with that.

20

Below is great package for adapting screen and font size.

1 Like