How to displays image assets while migration a flutter app to flutter web?

Question

Trying to migrate an shrine app to flutter web but while migration unable to display images (shrine logo placed in the assets folder) at localhost the asserts folder containing images are placed in the web folder as explained in the Flutter Web migration guide and updated the dart code with the correct path but it still doesn't displays the images.

kindly provide a solution thank you!

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)

Don't you have to add the assets path to your pubspec.yml? — Julien Lachal
– Julien Lachal, Commented May 20, 2019 at 10:20
No the migration guide shows ## REMOVE ## For the preview, assets are handled differently. Remove or comment ## out this section. — Tushar Rai
– Tushar Rai, Commented May 20, 2019 at 11:10

Tushar Rai · Accepted Answer · 2019-05-20 11:08:11Z

2

need to define the asset directly without defining the path of it in ** flutter web preview **

Image.asset('diamond.png')

answered May 20, 2019 at 11:08

Tushar Rai

2,5395 gold badges31 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Julien Lachal Over a year ago

Please accept your answer if it solved your problem.

Tushar Rai Over a year ago

all paths are relative to the assets/ folder. So to add an image to our leading <file>, not assets/<file>

Tushar Rai Over a year ago

I cannot accept my answer before 2 days it prompts.

Collectives™ on Stack Overflow

How to displays image assets while migration a flutter app to flutter web?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related