flutter: Adding an image

Question

I want to add an image in the body: in this code

import 'package:flutter/material.dart';
import 'qs.dart';
import 'answer.dart';

class body extends StatelessWidget {
  final List questions;
  final int _questionindex;
  final VoidCallback _answerQuestion;
  body(this.questions, this._questionindex, this._answerQuestion);

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text(
            'Dragons be here',
            style: TextStyle(
              fontFamily: "Arial",
              fontSize: 35,
              fontWeight: FontWeight.bold,
            ),
          ),
          titleSpacing: 1.0,
          centerTitle: true,
        ),
      body: SizedBox(
      width: double.infinity,
      child: _questionindex < questions.length
          ? Column(
              children: <Widget>[
                qs(
                  (questions[_questionindex]['questiontext']) as String,
                ),
                ...((questions[_questionindex]['answers']) as List<String>)
                    .map((answer) {
                  return Answer(_answerQuestion, answer);
                }).toList()
              ],
            )
          : Center(
              child: Text(
                'Good boi you just finished da quiz',
                textAlign: TextAlign.center,
              ),
            ),
      ),
    );
  }
}

I tried all of the code from How do I Set Background image in Flutter? I have done all of the suggestions from other StackOverflow answers and it doesn't work. THANKS!

In the posted code where is the part of image you tried to add? — gretal, Dec 27 '21 at 07:00
If you want add image to whole screen refer my answer [here](https://stackoverflow.com/a/70288065/13997210) hope its helpful to you. — Ravindra S. Patil, Dec 27 '21 at 07:03

score 0 · Answer 1 · answered Dec 27 '21 at 07:04

I don't have all your dart files, so I couldn't do an exact test.
Try inputting coordinates using Stack widget and Positioned widget.
MediaQuert.of(context).size returns the screen size of the device. If you draw an image as much as the device size, you can see the effect of putting the image on the background screen.

import 'package:flutter/material.dart';
import 'qs.dart';
import 'answer.dart';

class body extends StatelessWidget {
  final List questions;
  final int _questionindex;
  final VoidCallback _answerQuestion;
  body(this.questions, this._questionindex, this._answerQuestion);

  Widget build(BuildContext context) {
    
    Size size = MediaQuery.of(context).size;
    
    return Scaffold(
      appBar: AppBar(
          title: const Text(
            'Dragons be here',
            style: TextStyle(
              fontFamily: "Arial",
              fontSize: 35,
              fontWeight: FontWeight.bold,
            ),
          ),
          titleSpacing: 1.0,
          centerTitle: true,
        ),
      body: Stack(
        children:[
          
          Positioned(
            top: 0,
            left: 0,
            child: Container(
              width: size.width,
              height: size.height,
              child: Image.asset('image path'),
            ),
          ),
          
         _questionindex < questions.length ? Positioned(
            //your position
            child: SizedBox(
            width: double.infinity,
            child: Column(
                 children: <Widget>[
                   qs(
                     (questions[_questionindex]['questiontext']) as String,
                    ),
                   ...((questions[_questionindex]['answers']) as List<String>)
                       .map((answer) {
                     return Answer(_answerQuestion, answer);
                    }).toList()
                  ],
                ),
             ),
          ) : Positioned(
            //youre position
           child: Center(
                  child: Text(
                   'Good boi you just finished da quiz',
                    textAlign: TextAlign.center,
                 ),
               ),
          ),          
        ],
      ),
    );
  }
}

score 0 · Answer 2 · answered Dec 27 '21 at 07:28

You can just use DecoratedBox Widget like this :

class Body extends StatelessWidget {
  const Body({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Dragons be here',
          style: TextStyle(
            fontFamily: "Arial",
            fontSize: 35,
            fontWeight: FontWeight.bold,
          ),
        ),
        titleSpacing: 1.0,
        centerTitle: true,
      ),
      body: const DecoratedBox(
          decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage('path/to/your/assets.jpg'),
            ),
          ),
          child: Center(child: Text('REPLACE BY YOUR OWN WIDGET'),)
        ),
 
    );
  }
}

P.S : don't forget to add your asset in the pubspec.yaml file and to be sure to have it (the image) well added to your project

score 0 · Answer 3 · answered Dec 27 '21 at 07:34

Simply Use this :

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/bulb.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: null /* add child content here */,
      ),
    );
  }
}

flutter: Adding an image

3 Answers3