如何使用 Flutter 将容器移近覆盖徽标答案

【问题标题】：How can I move a container closer to the overlaying logo using Flutter如何使用 Flutter 将容器移近覆盖徽标
【发布时间】：2019-11-22 05:58:26
【问题描述】：

我想将包含所有登录信息的容器移动到更靠近覆盖徽标的位置。

我该怎么做？

我正在使用flutter.dart。

这是我的代码：https://github.com/wileecoyote2point0/math_game

我尝试过调整填充

运气不好

【问题讨论】：

标签： android android-studio flutter dart padding

【解决方案1】：

您的登录信息容器被包裹在 expanded widget 中，这将占用您的徽标之后的所有可用空间，因此徽标会被推送到屏幕顶部
删除展开的小部件并将以下内容添加到包含徽标和登录容器的列中，

mainAxisAlignment: MainAxisAlignment.center,

删除crossAxisAlignment：CrossAxisAlignment.stretch，

【讨论】：

【解决方案2】：

我认为这是你想要做的，对吗？请不要告诉我。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'package:math_game/signup.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        theme: new ThemeData(primarySwatch: Colors.purple),
        home: new LoginPage(),
        routes: <String, WidgetBuilder>{
          '/signup': (BuildContext context) => new SignupPage()
        });
  }
}

class LoginPage extends StatefulWidget {
  @override
  State createState() => new LoginPageState();
}

class LoginPageState extends State<LoginPage>
    with SingleTickerProviderStateMixin {
  Animation<double> _iconAnimation;
  AnimationController _iconAnimationController;

  @override
  void initState() {
    super.initState();
    _iconAnimationController = AnimationController(
      vsync: this,
      duration: new Duration(milliseconds: 500),
    );
    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.easeOut);
    _iconAnimation.addListener(() => this.setState(() {}));
    _iconAnimationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.tealAccent,
      body: new Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Image(
            image: new AssetImage("assets/nevroner3.jpg"),
            fit: BoxFit.cover,
            color: Colors.black87,
            colorBlendMode: BlendMode.darken,
          ),
          new Theme(
            data: new ThemeData(
              brightness: Brightness.dark,
              inputDecorationTheme: new InputDecorationTheme(
                labelStyle:
                    new TextStyle(color: Colors.tealAccent, fontSize: 20.0),
              ),
            ),
            isMaterialAppTheme: true,
            child: new Container(
              padding: EdgeInsets.only(left: 40.0, right: 40.0),
              child: new Form(
                autovalidate: true,
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Image(
                      image: new AssetImage("assets/math_logo3.png"),
                    ),
                    new TextFormField(
                      decoration: new InputDecoration(
                        labelText: "Enter Email",
                        fillColor: Colors.white,
                      ),
                      keyboardType: TextInputType.emailAddress,
                    ),
                    new TextFormField(
                      decoration: new InputDecoration(
                        labelText: "Enter Password",
                        fillColor: Colors.white,
                      ),
                      obscureText: true,
                      keyboardType: TextInputType.text,
                    ),
                    new Padding(
                      padding: const EdgeInsets.all(20.0),
                    ),
                    new MaterialButton(
                        color: Colors.teal,
                        textColor: Colors.white,
                        child: new Text("Login"),
                        onPressed: () => {}),
                    new SizedBox(width: 20.0, height: 5.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          "New to Math Messenger ?",
                          style: TextStyle(
                              color: Colors.grey,
                              decoration: TextDecoration.underline),
                        )
                      ],
                    ),
                    new SizedBox(width: 5.0, height: 10.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          "Register",
                          style: TextStyle(
                            color: Colors.tealAccent,
                            decoration: TextDecoration.underline,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

【讨论】：

【解决方案3】：

使用 MainAxisSize.min 而不是 MainAxisAlignment.center 在容器和徽标上。调整了填充，效果很好。

【讨论】：