Flutter web — How to build a responsive flutter website

Flutter provides cross-platform app development using a single code base. So I thought it will be really fun to build a website using Flutter. Make a website responsive is also super easy with flutter.

The development of websites using Flutter is easy to use and there is no need to write additional code for the development of websites using flutter. We all know that all software companies are moving to the development of flutter. Flutter already has a massive community of users who are there to help you when you require assistance. Web development with Flutter is the same as app development in flutter. It is possible to create a responsive website by using the same base of code.

In this video tutorial, I’ll teach you how to create an adaptive website with the same Flutter code. We are talking about responsive websites, which means the site should appear good across all platforms, desktops as well as mobile. When we design the widget for a Flutter application, we specify both height and width of the widget.

Here’s the trick to create a responsive flutter web user interface. The primary issue you’ll encounter is the size of your device. The width of mobile devices is smaller than desktop. Therefore, if the width of the widget is 30 and is attractive on a mobile device, it won’t look exactly the same on a desktop.

In order to create a dynamic width, you must utilize the % per cent of width. Instead of providing an unchanging width, such as 30, it is recommended to offer the width in the form of 30 per cent of the size of your device. It’s not an easy task, but don’t worry about it because this is an advantage of the large Flutter community. There’s a Flutter plugin called flutter sizer. The flutter website is completely responsive and easy to build if you will use this flutter plugin. To make this flutter tutorial easy to understand, I am showing the responsive dart file which I build. All you need to do is add this responsive dart class to the flutter project. I am using MediaQuery to get the width of the device whether it is a desktop or mobile device, Flutter Web design keep remain stable. Flutter web development is the same as flutter app development. You don’t need to write extra code for flutter web development. If you are new to flutter all development you can join Free Class for Flutter App Development.

To make the flutter website responsive, you should add this code to your flutter project. It is a flutter web 2.0 and the null safety dart version. I am using the same code for flutter eCommerce app development. How to Build & Release Flutter app for iOS

Watch On Youtube

watch more fluter tutorial videos on my channel — kamalbunkar

Create Responsive dart file

Create a new dart class and add the below code to find whether it is a small device or a large screen like a browser. You can download the complete source code from here.

class ResponsiveWidget extends StatelessWidget {
  final Widget largeScreen;
  final Widget? mediumScreen;
  final Widget? smallScreen;

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

  static double aspectRadio(BuildContext context){
     //MediaQueryData queryData;
    return MediaQuery.of(context).devicePixelRatio;
  }
  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 > 1200;
  }

based on the width and height of the browser or mobile device, you can set the height and width of the widget like below.

static double container_height_20(BuildContext context){
  return  20.h <= 200? 200
      :  isSmallScreen(context) ? 20.h
      : isMediumScreen(context) ? 22.h
      : isLargeScreen(context) ? 18.h
      : 20.h ;
}
static double container_height_22(BuildContext context){
  return  20.h <= 240? 240
      :  isSmallScreen(context) ? 20.h
      : isMediumScreen(context) ? 25.h
      : isLargeScreen(context) ? 18.h
      : 20.h ;
}

Call Responsive Design

now you have a responsive class, So all you need to do is to set the width and height of the widget using responsive class. see below

Image.network(
  productImage(home_banner_list_item.imgurl),
  fit: BoxFit.scaleDown,
  width: ResponsiveWidget.container_height_image_16(context),
  height: ResponsiveWidget.container_height_image_16(context),
),

In the same way, you can call other heights and widths on any widget. The widget will be resized automatically as the design dimension will change Or the user resizes the browser widnow.

You can download the complete source code from here.

Learn Complete Flutter App Development — https://www.dripcoding.com/best-flutter-online-course/

If you like the video, Please do Subscribe to our YouTube channel — https://www.youtube.com/channel/UC0tb4vuqPimSCWdnJailrTw?sub_confirmation=1

You can connect with us on Social Platform

Facebook — https://www.facebook.com/dripcoding

Telegram — t.me/dricoding

Instagram — https://www.instagram.com/the_kamal_bunkar/

Youtube — https://www.youtube.com/channel/UC0tb4vuqPimSCWdnJailrTw?sub_confirmation=1

Linkedin — https://www.linkedin.com/in/kamal-bunkar/

Pinterest — https://in.pinterest.com/kamalbunkar0229/_saved/

Facebook — https://www.facebook.com/kamal.bunkar/

You can also WhatsApp me at +91–9144040888 OR email me at kamal.bunkar@dripcoding.com , kamal.bunkar@blueappsoftware.com