android - Flutter web的移动设备视图中的TextFormField宽度问题

Question

我正在 Flutter Web 上开发基于 PWA 的 Web 应用程序。但问题在于我的登录页面 TextFormField 显示不正确。它只占用屏幕总宽度的一半。我想以全宽显示 TextFormField。请帮帮我。我卡住了。

我的代码是...

//我该如何解决这个问题？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  String username = "";
  String password = "";
  GlobalKey<ScaffoldState> sKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      key: sKey,
      primary: false,
      backgroundColor: Colors.transparent,
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          SafeArea(
            child: Container(
              margin: EdgeInsets.only(top: 16),
              alignment: Alignment.topRight,
              child: InkWell(
                borderRadius: BorderRadius.circular(50),
                child: Padding(
                  padding: EdgeInsets.fromLTRB(16, 16, 16, 16),
                  child: IconButton(
                    icon: Icon(
                      Icons.arrow_forward,
                      color: Color(0xf0166EB8),
                    ),
                    onPressed: null,
                  ),
                ),
                onTap: () {
//                  if (state.isLoading) return;
//                  gotoHome();
                },
              ),
            ),
          ),
          Center(
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Form(
                  key: _formKey,
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        "User Login",
                        style: TextStyle(
                            color: Colors.grey,
                            fontSize: 26,
                            letterSpacing: 4,
                            fontWeight: FontWeight.bold),
                      ),
                      Text(
                        "Green buildings can save up to 40% of their energy requirements.",
                        style: TextStyle(
                            color: Colors.grey,
                            letterSpacing: 3,
                            fontWeight: FontWeight.bold),
                      ),
                      SizedBox(
                        height: 60,
                      ),
                      Align(
                        alignment: Alignment.center,
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            TextFormField(
                              textInputAction: TextInputAction.next,
                              decoration: InputDecoration(
                                labelText: "User name",
                              ),
                              // ignore: missing_return
                              validator: (String value) {
                                if (value.isEmpty) {
                                  return "User name is required.";
                                }
                              },
                              onSaved: (value) {
                                username = value;
                              },
                              onFieldSubmitted: (value) {},
                            ),
                            SizedBox(
                              height: 16,
                            ),
                            TextFormField(
                              obscureText: true,
                              decoration: InputDecoration(
                                labelText: "Password",
//                                          border: OutlineInputBorder()
                              ),
                              validator: (String value) {
                                if (value.isEmpty) {
                                  return "Password is required.";
                                }
                              },
                              onSaved: (value) {
                                password = value;
                              },
                            ),
                            SizedBox(
                              height: 16,
                            ),
                            RaisedButton(
                              elevation: 16,
                              shape: CircleBorder(),
                              child: IconButton(
                                onPressed: null,
                                icon: Icon(
                                  Icons.arrow_forward,
                                  color: Colors.white,
                                ),
                              ),
                              textColor: Colors.white,
                              color: Color(0xf0166EB8),
                              padding: EdgeInsets.all(12),
                              onPressed: () {
//                                if (state.isLoading) return;

                                if (_formKey.currentState.validate()) {
                                  _formKey.currentState.save();
//                                            login();
//                                  userLogin(store);
                                }
                              },
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 16,
                      ),
                      InkWell(
                        borderRadius: BorderRadius.circular(16),
                        onTap: () {
//                          gotoRegister();
                        },
                        child: Padding(
                          padding: const EdgeInsets.fromLTRB(0, 10, 16, 10),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                "Don't have an account?",
                                style: TextStyle(color: Colors.black54),
                              ),
                              Text(
                                "Create new",
                                style: TextStyle(color: Color(0xf0166EB8)),
                              )
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
//      ],
//    ));
  }

  void setFocus(FocusNode fromFocus, FocusNode toFocus) {
    fromFocus.unfocus();
    FocusScope.of(context).requestFocus(toFocus);
  }
}

标签： androidflutter