Flutter Travelling Couple Leading Page - Flutter Web Series 2

First, let’s start with adding a responsive layout file "Responsive.dart" are adding in the lib folder then go to main.dart.

Responsive.dart file code :

import'package:flutter/material.dart';

	class ResponsiveLayout extends StatelessWidget {
	final Widget largeScreen;
	final Widget mediumScreen;
	final Widget smallScreen;

	const ResponsiveLayout(
	{Key key,
	@required this.largeScreen,
	this.mediumScreen,
	this.smallScreen})
	: super(key: key);

	static bool isSmallScreen(BuildContext context) {
	return MediaQuery.of(context).size.width < 800;
	}

	static bool isMediumScreen(BuildContext context) {
	return MediaQuery.of(context).size.width > 800 &&
	MediaQuery.of(context).size.width < 1200;
	}

	static bool isLargeScreen(BuildContext context) {
	return MediaQuery.of(context).size.width > 800;
	}

	@override
	Widget build(BuildContext context) {
	return LayoutBuilder(
	builder: (context, constraints) {
	if (constraints.maxWidth > 800) {
	return largeScreen;
	} else if (constraints.maxWidth < 1200 && constraints.maxWidth > 800) {
	return mediumScreen ?? largeScreen;
	} else {
	return smallScreen ?? largeScreen;
	}
	},
	);
	}
	}

With the help of a Responsive layout file, we can set the layout page is too small or medium or large according to web browser size.

Once we create a responsive layout file, then we create or edit our main.dart file.

The Main.dart file we will discuss in the next chapter of this series.

ScreenShot : 

Demo Site: http://travellingcouple.nikhil.cf/

Next Article are coming soon on FLUTTERCENTRAL.COM

__________________________________________________________________________________________

For More Info About Flutter :
Check Out Live Flutter Web Demo: http://nikhil.cf/

Follow us on Github Account : https://github.com/nikhil269