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!

CodePudding user response：

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,
                 ),
               ),
          ),          
        ],
      ),
    );
  }
} 

CodePudding user response：

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

CodePudding user response：

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 */,
      ),
    );
  }
}