Flutter Background Image - flutter

Question

I am extremely new to flutter and I am making an app for fun. I want to add a background image to my app but I can't find how. I know that I have to put that in BuildContext context but I can't find how. This is my code:
import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
typedef void OnError(Exception exception);
void main() {
runApp(new MaterialApp(debugShowCheckedModeBanner: false,home: LocalAudio()));
}
class LocalAudio extends StatefulWidget {
#override
_LocalAudio createState() => _LocalAudio();
}
class _LocalAudio extends State<LocalAudio> {
Duration _duration = new Duration();
Duration _position = new Duration();
AudioPlayer advancedPlayer;
AudioCache audioCache;
#override
void initState() {
super.initState();
initPlayer();
}
void initPlayer() {
advancedPlayer = new AudioPlayer();
audioCache = new AudioCache(fixedPlayer: advancedPlayer);
advancedPlayer.durationHandler = (d) => setState(() {
_duration = d;
});
advancedPlayer.positionHandler = (p) => setState(() {
_position = p;
});
}
String localFilePath;
Widget _tab(List<Widget> children) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: children
.map((w) => Container(child: w, padding: EdgeInsets.all(6.0)))
.toList(),
),
),
],
);
}
Widget _btn(String txt, VoidCallback onPressed) {
return ButtonTheme(
minWidth: 48.0,
child: Container(
width: 150,
height: 150,
child: RaisedButton(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Text(txt),
color: Colors.greenAccent[900],
textColor: Colors.white,
onPressed: onPressed),
),
);
}
Widget LocalAudio() {
return _tab([
_btn('Play', () => audioCache.play('bruh.mp3')),
]);
}
void seekToSecond(int second) {
Duration newDuration = Duration(seconds: second);
advancedPlayer.seek(newDuration);
}
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 1,
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 1.0,
backgroundColor: Colors.teal,
title: Center(child: Text('BRUH')),
),
body: TabBarView(
children: [LocalAudio()],
),
),
);
}
}

Answer 1

I would just set the body of your scaffold to be a Stack(), and then put an image in the bottom of the stack. Should look something like this.
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 1,
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 1.0,
backgroundColor: Colors.teal,
title: Center(child: Text('BRUH')),
),
body: Stack(
children: [
Image.asset('assets/images/background.jpg'),
TabBarView(
children: [LocalAudio()],
),
]
);
),

Answer 2

You can use Stack and put an image to the background, then set backgroundColor: Colors.transparent, in Scaffold widget
Stack(
children: <Widget>[
Image.asset(
"<Image.Path>",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
backgroundColor: Colors.transparent,
body: Container(),
),
],
);