在将Flutter应用迁移到Flutter Web时如何显示图像资产?

时间:2019-05-20 08:59:09

标签: dart flutter flutter-web

enter image description here尝试将shrine应用程序迁移到Web上,但迁移时无法在 localhost 上显示图像(在资产文件夹中放置了shrine徽标),将包含图像的asserts文件夹放置在Flutter Web migration guide中所述的Web文件夹,并使用正确的路径更新了Dart代码,但它仍然不显示图像。

请提供一个解决方案,谢谢!

assets path image

login.dart

import 'package:flutter_web/material.dart';

    class LoginPage extends StatefulWidget {
      @override
      _LoginPageState createState() => _LoginPageState();
    }

    class _LoginPageState extends State<LoginPage> {
      // TODO: Add text editing controllers (101)
      final _usernameController = TextEditingController();
      final _passwordController = TextEditingController();
      // TODO: Add text editing controllers (101)
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: ListView(
              padding: EdgeInsets.symmetric(horizontal: 24.0),
              children: <Widget>[
                SizedBox(height: 80.0),
                Column(
                  children: <Widget>[
                    Image.asset('web/assets/diamond.png'),
                    SizedBox(height: 16.0),
                    Text('SHRINE'),
                  ],
                ),
                SizedBox(height: 120.0),
                // TODO: Wrap Username with AccentColorOverride (103)
                // TODO: Remove filled: true values (103)
                // TODO: Wrap Password with AccentColorOverride (103)
                // TODO: Add TextField widgets (101)
                // [Name]
                TextField(
                  controller: _usernameController,
                  decoration: InputDecoration(
                      filled: true,
                      border: OutlineInputBorder(),
                      labelText: 'Username'),
                ),
                SizedBox(
                  height: 12.0,
                ),
                // [Password]
                TextField(
                  controller: _passwordController,
                  decoration: InputDecoration(
                    filled: true,
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                  ),
                  obscureText: true,
                ),
                // TODO: Add button bar (101)
                ButtonBar(
                  children: <Widget>[
                    // Todo Add buttons (101)
                    RaisedButton(
                      child: Text('Cancel'),
                        onPressed: () {
                          // TODO: Clear the text fields (101)
                          _usernameController.clear();
                          _passwordController.clear();
                        }
                    ),
                    // TODO: Add an elevation to NEXT (103)
                    // TODO: Add a beveled rectangular border to NEXT (103)
                    RaisedButton(
                      child: Text('NEXT'),
                      onPressed: () {
                        // TODO: Show the next page (101)
                        Navigator.pop(context);
                      },
                    ),
                  ],
                ),
              ],
            ),
          ),
        );[enter image description here][1]
      }
    }

    // TODO: Add AccentColorOverride (103)

1 个答案:

答案 0 :(得分:0)

需要直接定义资产而无需在**中定义其路径 颤抖的网页预览 **

Image.asset('diamond.png')