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

回答1:

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

来源：https://stackoverflow.com/questions/57491784/make-responsive-web-on-flutter-web

标签

flutter-web