CODEWITHSUNDEEP
flutter-web
OceanL
OceanL

Reputation: 479

make responsive web on flutter web

I'm making an form login with web flutter, but it's still not responsive ... when I try to add the SingleChildScrollView widget, so that when it runs on the mobile browser it can scroll. but the display form on the laptop float to the top

my code looks like this

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigo[100],
      body: SingleChildScrollView(
              child: Container(
          child: Form(
            key: formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Center(
                  child: Card() //I'm sorry the code inside the Card () was deleted
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

Upvotes: 1

Views: 2634

Answers (2)

Paras Arora
Paras Arora

Reputation: 703

An Another approach :)

class SampleView extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Center(
  child: Container(
    width: 200,
    height: 200,
    color: Responsive().getResponsiveValue(
        forLargeScreen: Colors.red,
        forMediumScreen: Colors.green,
        forShortScreen: Colors.yellow,
        forMobLandScapeMode: Colors.blue,
        context: context),
    // You dodn't need to provide the values for every 
    //parameter(except shortScreen & context)
    // but default its provide the value as ShortScreen for Larger and 
    //mediumScreen
    ),
   );
 }
}



 // utility 
          class Responsive {
            // function reponsible for providing value according to screensize
            getResponsiveValue(
                {dynamic forShortScreen,
                dynamic forMediumScreen,
                dynamic forLargeScreen,
                dynamic forMobLandScapeMode,
                BuildContext context}) {

              if (isLargeScreen(context)) {

                return forLargeScreen ?? forShortScreen;
              } else if (isMediumScreen(context)) {

                return forMediumScreen ?? forShortScreen;
              } 
           else if (isSmallScreen(context) && isLandScapeMode(context)) {

                return forMobLandScapeMode ?? forShortScreen;
              } else {
                return forShortScreen;
              }
            }
          
            isLandScapeMode(BuildContext context) {
              if (MediaQuery.of(context).orientation == Orientation.landscape) {
                return true;
              } else {
                return false;
              }
            }
          
            static bool isLargeScreen(BuildContext context) {
              return getWidth(context) > 1200;
            }
          
            static bool isSmallScreen(BuildContext context) {
              return getWidth(context) < 800;
            }
          
            static bool isMediumScreen(BuildContext context) {
              return getWidth(context) > 800 && getWidth(context) < 1200;
            }
          
            static double getWidth(BuildContext context) {
              return MediaQuery.of(context).size.width;
            }
          }

Upvotes: 1

dazza5000
dazza5000

Reputation: 7608

The following repository shows how to make a "responsive" flutter web project.

https://github.com/iampawan/myportfolio

Basically, you select different widgets based on the screen size.

import 'package:flutter_web/material.dart';

    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 bool isSmallScreen(BuildContext context) {
        return MediaQuery.of(context).size.width < 800;
      }

      static bool isLargeScreen(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;
      }

      @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;
            }
          },
        );
      }
    }

source: https://github.com/iampawan/myportfolio/blob/master/lib/responsive_widget.dart

Upvotes: 2

Related Questions