flutter-web - 在 Flutter Web 上制作响应式 Web

Question

我正在使用网络颤振进行表单登录，但它仍然没有响应......当我尝试添加 SingleChildScrollView 小部件时，它在移动浏览器上运行时可以滚动。但笔记本电脑上的显示表格浮到顶部

我的代码看起来像这样

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

Answer 1

以下存储库展示了如何制作一个“响应式”的 Flutter Web 项目。

https://github.com/iampawan/myportfolio

基本上，您可以根据屏幕大小选择不同的小部件。

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

来源：https ://github.com/iampawan/myportfolio/blob/master/lib/responsive_widget.dart

Answer 2

另一种方法:)

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;
            }
          }