flutter - 将 Logo 添加到 Flutter 布局

Question

我是 Flutter UI 设计的新手，我正在尝试将 Logo 添加到登录屏幕。我通过了登录屏幕的教程并使其正常工作，但我无法在表单本身上方居中显示 Logo 。我搜索了其他教程并浏览了布局演练，但无法正确完成。该教程有一个背景图像，我能够弄清楚，但我们只想要 Logo 。这是飞镖代码。

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lbconnect/auth.dart';
import 'package:lbconnect/data/database_helper.dart';
import 'package:lbconnect/models/user.dart';
import 'package:lbconnect/screens/login_screen_presenter.dart';

class LoginScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new LoginScreenState();
}
}

class LoginScreenState extends State<LoginScreen>
implements LoginScreenContract, AuthStateListener {
BuildContext _ctx;

bool _isLoading = false;
final formKey = new GlobalKey<FormState>();
final scaffoldKey = new GlobalKey<ScaffoldState>();
String _password;
String _username;

LoginScreenPresenter _presenter;

LoginScreenState() {
_presenter = new LoginScreenPresenter(this);
var authStateProvider = new AuthStateProvider();
authStateProvider.subscribe(this);
}

void _submit() {
final form = formKey.currentState;

  if (form.validate()) {
  setState(() => _isLoading = true);
  form.save();
  _presenter.doLogin(_username, _password);
  }
  }

  void _showSnackBar(String text) {
   scaffoldKey.currentState
    .showSnackBar(new SnackBar(content: new Text(text)));
 }

  @override
  onAuthStateChanged(AuthState state) {

  if(state == AuthState.LOGGED_IN)
  Navigator.of(_ctx).pushReplacementNamed("/home");
 }

 @override
 Widget build(BuildContext context) {
 _ctx = context;
 var loginBtn = new RaisedButton(
  onPressed: _submit,
  child: new Text("LOGIN"),
  color: Colors.white,
  );
  var loginForm = new Column(
  children: <Widget>[
    new Form(
      key: formKey,
      child: new Column(
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.all(8.0),
            child: new TextFormField(
              onSaved: (val) => _username = val,
              validator: (val) {
                return val.length < 10
                    ? "Username must have atleast 10 chars"
                    : null;
              },
              decoration: new InputDecoration(labelText: "EMAIL"),
            ),
          ),
          new Padding(
            padding: const EdgeInsets.all(8.0),
            child: new TextFormField(
              onSaved: (val) => _password = val,
              decoration: new InputDecoration(labelText: "PASSWORD"),
            ),
          ),
        ],
      ),
    ),
    _isLoading ? new CircularProgressIndicator() : loginBtn
  ],
  crossAxisAlignment: CrossAxisAlignment.center,
);



return new Scaffold(
  appBar: null,
  key: scaffoldKey,
  body: new Container(
    decoration: new BoxDecoration(
      color: Colors.blue,
    ),

    child: new Center(
      child: new ClipRect(
        child: new BackdropFilter(
          filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          child: new Container(
            child: loginForm,
            height: 300.0,
            width: 300.0,
            decoration: new BoxDecoration(
                color: Colors.transparent,
            )
          ),
        ),
      ),
    ),
  ),
);

 @override
 void onLoginError(String errorTxt) {
 _showSnackBar(errorTxt);
setState(() => _isLoading = false);
  }

@override
void onLoginSuccess(User user) async {
_showSnackBar(user.toString());
setState(() => _isLoading = false);
var db = new DatabaseHelper();
await db.saveUser(user);
var authStateProvider = new AuthStateProvider();
authStateProvider.notify(AuthState.LOGGED_IN);
}
}

screenshot

Answer 1

将此添加到您的代码中，如果您使用的是 Assets 图像，请确保您要插入的 Logo 应该在 Assets 中。如需更多信息，请访问 this .我希望它能帮助你得到你想要的:)

Widget ui(){
 return Column(
  children: <Widget>[
    SizedBox(height: 50.0),
    DecoratedBox(
      decoration: BoxDecoration(
      image: DecorationImage(
      image: AssetImage('graphics/logo.png')
    )
    new Form(
      key: formKey,
      child: new Column(
    .........
     ...........
);
}