web-dev-qa-db-fra.com

Comment ajouter une image d'arrière-plan à l'application Flutter?

J'essaie d'ajouter une image d'arrière-plan à mon application Flutter, et j'ai parcouru toutes les questions similaires sur SO. L'application m fonctionne bien mais l'image n'apparaît pas.

voici mon code widget:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
        actions: <Widget>[
          new IconButton(icon: const Icon(Icons.list), onPressed: _loadWeb)
        ],
      ),
      body: new Stack(
        children: <Widget>[
          Container(
            child: new DecoratedBox(
              decoration: new BoxDecoration(
                image: new DecorationImage(
                  image: new AssetImage("images/logo.png"),
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ),
          Center(
            child: _authList(),
          )
        ],
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: getFile,
        tooltip: 'Select file',
        child: Icon(Icons.sd_storage),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    ));
  }

L'application fonctionne correctement et le deuxième widget de la pile, qui est un listView, fonctionne normalement mais l'image ne s'affiche pas.

Des idées?

dartflutter
14
fccoelho

Scaffold ne prend en charge aucun concept d'image d'arrière-plan. Ce que vous pouvez faire est de donner à la Scaffold une couleur transparente et de la mettre dans une Container et d'utiliser la propriété decoration pour extraire l'image d'arrière-plan requise. La barre d'application est également transparente.

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/logo.png"), fit: BoxFit.cover)),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.transparent,
            title: Text('My App'),
            centerTitle: true,
            leading: IconButton(
                icon: Icon(
                  Icons.list,
                  color: Colors.white,
                ),
                onPressed: () {}),
          ),
        ),
      ),
    );
  }
2
flutter
return MaterialApp(
title: "MoonLight",
home: Container(
decoration:new BoxDecoration(
image:  new DecorationImage(
image: new AssetImage("graphics/moon.jpg"),
fit: BoxFit.cover,)
),
child: Scaffold(
backgroundColor: Colors.transparent,
),
),
),
),
)
,);
0
Yassine Laaskri

Utilisez BoxDecoration comme attribut decoration de Container:

  Container(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage("images/logo.png"),
        fit: BoxFit.fill,
      ),
    ),
  ),
0
Vinicius Pinto