在颤动网络上制作响应式网络 [英] make responsive web on flutter web

问题描述

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

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

我的代码看起来像这样

  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项目.

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

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

这篇关于在颤动网络上制作响应式网络的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！