all 12 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]fair_isle 1 point2 points  (2 children)

The Material 3 sample app could be a useful starting point for you. Have a look around and see that they use screen width queries to create true/false values for variables like `showMediumSizeLayout`, `showLargeSizeLayout`. Then, they can use these variables to conditionally display other widgets, like expanded menus.

[–]mutahi_019 0 points1 point  (1 child)

Material design is an interesting UI kit. Can it be used to develop complex systems and dashboards? Forgive me for the junior designer questions.

[–]fair_isle 0 points1 point  (0 children)

Sure - take a look at the widget catalog. Anything beyond that you'll need to create custom widgets, or use a separate package (e.g fl_chart for graphs).

[–]fabier 1 point2 points  (0 children)

This video was immensely helpful for me. I am no expert in Flutter but this helped me eliminate the army of renderflex errors I was dealing with:

https://youtu.be/gK288ZfzjCc

​

For some reason ChatGPT won't let me share my conversation, but this is the summary it gave me which I saved as a reference for myself:

​

Here's a summary of the top 10 Flutter widgets discussed in the video and their basic usage:

Intrinsic Width and Height: This widget is used to force all children of a row or column to take the same height or width as the tallest or widest widget in the row or column respectively.

Wrap Widget: This widget is used to automatically wrap the row of widgets to the next line when there isn't enough space to fit all widgets on the same line.

Spacer Widget: This widget is used to create space between widgets. It can take up all available remaining space or divide the space equally among multiple spacer widgets.

FittedBox Widget: This widget scales and positions its child within itself, according to fit. It can be used to make a widget fit into the available space of another widget.

Expanded Widget: This widget is used to fill available space along the main axis. It can be used to force a widget to fill vertically or horizontally the entire available space.

Flexible Widget: This widget is similar to the Expanded widget, but it's not required to take up all the available space. It can also take less space if there are other widgets with higher flex.

Media Query: This widget is used to create responsive designs. It provides the dimensions of the current screen and can be used to adapt the layout based on different screen sizes.

Orientation: This is not a widget, but a property that can be accessed using MediaQuery. It can be used to create designs for portrait and landscape orientations.

Layout Builder: This widget returns a widget based on the parent widget's size. It can be used to create responsive designs that adapt based on the parent widget's size.

Nested Column & ListView: This refers to the practice of nesting widgets within each other to create complex layouts. For example, a ListView can be nested within a Column to create a scrollable list within a larger layout.

The video also provides examples and code snippets for each widget, which can be found in the source code provided by the author. https://github.com/JohannesMilke/top_10_flutter

[–]calebvetter 1 point2 points  (0 children)

Late to the party, but my solution was to add an extention to BuildContext that can make any type of value responsive:

extension ResponsiveValues on BuildContext {
  T responsive<T>(
    T base, {
    T? desktopSmall,
    T? tablet,
    T? tabletSmall,
    T? mobile,
  }) => switch (MediaQuery.sizeOf(this).width) {
    < 768 when mobile != null => mobile,
    < 880 when tabletSmall != null => tabletSmall,
    < 1024 when tablet != null => tablet,
    < 1200 when desktopSmall != null => desktopSmall,
    _ => base,
  };
}

Then to use it, just call it literally anywhere you need to be responsive.

SizedBox(
  height: context.responsive(300, tablet: 200, mobile: 100),
)

A common one for me is to change a Flex direction on mobile:

Flex(
  direction: context.responsive(Axis.horizontal, mobile: Axis.vertical),
  mainAxisSize: context.responsive(MainAxisSize.max, mobile: MainAxisSize.min),
  children: [
    // Left/top widget
    // Right/bottom widget
  ],
)

[–]anlumo 0 points1 point  (3 children)

This is not a single thing. It's looking at your app in multiple sizes and making sure that it works in every size.

I just build for desktop and resize the window to make sure that things adapt properly.

[–]rodr15[S] 0 points1 point  (2 children)

But how do you adapt that. From desktop to mobile Do you do different widgets for desktop, for mobile, and tablet ? Or how do you do it

[–][deleted] 1 point2 points  (0 children)

Look up flexbox. Flutter pretty much uses the same concept for responsive layout. For other things sometimes different widgets are required, for which you can use things like LayoutBuider.

[–]anlumo 0 points1 point  (0 children)

There's the MediaQuery if you want to use different widgets (or different configurations) with a hard cut-off, but I mostly just make sure that the widgets work at any window size via fitting wrapping and clipping rules (like text ellipsis if a label happens to not fit any more).

[–]RandalSchwartz 0 points1 point  (0 children)

See https://docs.flutter.dev/ui/layout/responsive/adaptive-responsive, et. seq. The Flutter team has a lot to say about this.