【问题标题】:make responsive web on flutter web在 Flutter Web 上制作响应式 Web
【发布时间】:2019-12-20 20:08:26
【问题描述】:

我正在使用 Web Flutter 进行表单登录,但它仍然没有响应......当我尝试添加 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
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

【问题讨论】:

    标签: flutter-web


    【解决方案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

    【讨论】:

    • 但我对如何在我的代码中实现它感到困惑
    【解决方案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;
                }
              }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-10-04
      • 2020-08-13
      • 2021-08-17
      • 1970-01-01
      • 2015-01-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多