Flutter UI Widgets

Nov 9 2021 · Dart 2.14, Flutter 2.5, VS Code 1.61

Part 1: Flutter UI Widgets

12. Make Your App Design Responsive

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 11. Display Dialogs Next episode: 13. Explore Cupertino Widgets

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

Making your apps adapt to different screen sizes is essential in giving your users a good in-app experience. Flutter offers us various widgets to help with building responsive apps. But do we really need this for our app? Well let’s find out. I’ll change the device orientation to landscape mode. You can see that the ArticleCard widgets doesn’t really look nice. They are quite big for this view.

...
@override
Widget build(BuildContext context) {
  bool isPortrait =
      MediaQuery.of(context).orientation == Orientation.portrait;
  ...
    child:
        isPortrait ? TallCard(article: article) : WideCard(article: article),
  );
}
...
...
@override
Widget build(BuildContext context) {
  bool isPortrait =
      MediaQuery.of(context).orientation == Orientation.portrait;
  return Container(
    height: isPortrait ? 130 : 150,
...
// Remove the SizedBox() in btw items in the Column
// Card
...
child: LayoutBuilder(
  builder: (context, constraints) {
    bool isTablet = constraints.maxWidth > 600;
    return isTablet
        ? WideCard(article: article)
        : TallCard(article: article);
  },
),
...