Let’s download Responsive Builder.
Open up pubspec.yaml and put it right under dependencies like so:
|
1 2 3 4 5 6 |
dependencies: responsive_builder: css_colors: ^1.1.0 google_fonts: ^2.0.0 ... ... |
Flutter will then attempt to install it. Once done, go to header_view.dart and double click on the Container in build function.
Wrap with widget, and type ResponsiveBuilder.
Once you typed ResponsiveBuilder, it’ll say that the property is erroneous. Naturally, there is no child property.
If you cmd + click on ResponsiveBuilder, it’ll give us this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class ResponsiveBuilder extends StatelessWidget { final Widget Function( BuildContext context, SizingInformation sizingInformation, ) builder; ... ... const ResponsiveBuilder({ // builder is required at constructor required this.builder, }) : super(key: key); ... ... } |
We see that there is a property called builder that is of type Function. And we instantly know that when we initialize a constructor for ResponsiveBuilder, we need to pass in a function for property builder. It has a named constructor property which takes in a function like so:
|
1 2 3 4 5 |
return ResponsiveBuilder( builder: () { // code } } |
We need to provide a function to draw for when size is a certain height or width. Notably, if its isMobile, then we return a certain Container with its text, buttons, boxes, etc. And if its web, then we return a certain container with other laid out text, buttons, boxes, etc.
The reason why we need to provide it is because ResponsiveBuilder overrides a build function. Inside this build function, it accesses the builder property and then execute it and passes the context and sizingInformation data in. Hence, we’re providing a function for property builder. Builder then executes our provided function and passes in data for us to use.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Widget build(BuildContext context) { return LayoutBuilder(builder: (context, boxConstraints) { var mediaQuery = MediaQuery.of(context); var sizingInformation = SizingInformation( deviceScreenType: getDeviceType(mediaQuery.size, breakpoints), refinedSize: getRefinedSize( mediaQuery.size, refinedBreakpoint: refinedBreakpoints, ), screenSize: mediaQuery.size, localWidgetSize: Size(boxConstraints.maxWidth, boxConstraints.maxHeight), ); return builder(context, sizingInformation); // builders has reference to our provided function and executes it. }); } |
Let’s change the property to builder by using cmd + dot.
Once it becomes builder property, let’s change the provided parameter to a function by providing two parameters. We’re not going to use context, but we will use sizingInformation. Thus, we just give ‘_’ as the context.
Its an arrow function so it returns the container automatically. We do not want that. We want to put code before returning so that we can use the size information and figure out whether we’re on mobile or web.
Thus, highlight the arrow and cmd + dot.
We analyze size object to see if it isMobile. If it is. We want to return a Container instance.
We then cmd + dot and select extract Widget. Give it the name HeaderMobileView().
Let’s specify the size of the Container for the mobile header view by saying we want it to be 90% of the mobile height. Remember that in MediaQuery, it will return width and height for when the app is resized to mobile sizes. Height will then be 9.0 of that height, and width stays the same.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class HeaderMobileView extends StatelessWidget { const HeaderMobileView({ Key key, }) : super(key: key); @override Widget build(BuildContext context) { final width = MediaQuery.of(context).size.width; final height = MediaQuery.of(context).size.height; return Container(height: height * 0.9, width: width); } } |
