Flutter How to add child background image - user-interface

Question

I want to display this screen like FullScreen Background Image->4 Card/Container/Listview.count with child background image->Button with text. How I can do that? Background Image>Widget(Card, Container etc)>background image covered with child widget>text. I am using it as a dashboard of my app. I read a lot of questions and answers about the full-screen background but child background I couldn't find.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:onlycentertainment/constants/constants.dart';
class Dashboard extends StatefulWidget {
#override
_DashboardState createState() => _DashboardState();
}
class _DashboardState extends State<Dashboard> {
final _scaffold = GlobalKey<ScaffoldState>();
final _formKey = GlobalKey<FormState>();
String username;
submit() {
final form = _formKey.currentState;
if (form.validate()) {
form.save();
SnackBar snackBar = SnackBar(content: Text('Welcome $username'));
_scaffold.currentState.showSnackBar(snackBar);
Timer(Duration(seconds: 2), () {
Navigator.pop(context, username);
});
//Page pop to next including saved data
}
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
BackgroundWidget(size: size),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10,
),
Container(
padding:
const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'HELLO, USER',
style: TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.only(top: 30, bottom: 30),
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
style: TextStyle(
fontSize: 15,
color: Colors.white,
),
maxLines: 5,
),
),
],
),
),
Container(
height: MediaQuery.of(context).size.height * .6,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height:
MediaQuery.of(context).size.height * .3,
width: MediaQuery.of(context).size.width * .4,
child: Card(child: Text('1')),
),
Container(
height:
MediaQuery.of(context).size.height * .3,
width: MediaQuery.of(context).size.width * .4,
child: Card(child: Text('1')),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/asset5.png"),
fit: BoxFit.fitHeight
),
),
height:
MediaQuery.of(context).size.height * .3,
width: MediaQuery.of(context).size.width * .4,
child: GestureDetector(
child: Text('This is my text',style: TextStyle(fontSize: 20, color: Colors.white),),),
),
Container(
height:
MediaQuery.of(context).size.height * .3,
width: MediaQuery.of(context).size.width * .4,
child: Card(child: Text('1')),
),
],
)
],
)
],
),
),
],
),
],
),
),
),
);
}
}

Answer 1

Now it works!
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:onlycentertainment/constants/constants.dart';
class Dashboard extends StatefulWidget {
#override
_DashboardState createState() => _DashboardState();
}
class _DashboardState extends State<Dashboard> {
final _scaffold = GlobalKey<ScaffoldState>();
final _formKey = GlobalKey<FormState>();
String username;
submit() {
final form = _formKey.currentState;
if (form.validate()) {
form.save();
SnackBar snackBar = SnackBar(content: Text('Welcome $username'));
_scaffold.currentState.showSnackBar(snackBar);
Timer(Duration(seconds: 2), () {
Navigator.pop(context, username);
});
//Page pop to next including saved data
}
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
BackgroundWidget(size: size),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10,
),
Container(
padding:
const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'HELLO, USER',
style: TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.only(top: 30, bottom: 30),
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
style: TextStyle(
fontSize: 15,
color: Colors.white,
),
maxLines: 5,
),
),
],
),
),
Container(
height: MediaQuery.of(context).size.height * .6,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/asset5.png"),
fit: BoxFit.fitHeight
),
),
height:
MediaQuery.of(context).size.height * .3,
width: MediaQuery.of(context).size.width * .4,
child: GestureDetector(
child: Text('This is my text',style: TextStyle(fontSize: 20, color: Colors.white),),),
),
SizedBox(width:10),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/asset5.png"),
fit: BoxFit.fitHeight
),
),
height:
MediaQuery.of(context).size.height * .3,
width: MediaQuery.of(context).size.width * .4,
child: GestureDetector(
child: Text('This is my text',style: TextStyle(fontSize: 20, color: Colors.white),),),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/asset5.png"),
fit: BoxFit.fitHeight
),
),
height:
MediaQuery.of(context).size.height * .3,
width: MediaQuery.of(context).size.width * .4,
child: GestureDetector(
child: Text('This is my text',style: TextStyle(fontSize: 20, color: Colors.white),),),
),
SizedBox(width:10),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/asset5.png"),
fit: BoxFit.fitHeight
),
),
height:
MediaQuery.of(context).size.height * .3,
width: MediaQuery.of(context).size.width * .4,
child: GestureDetector(
child: Text('This is my text',style: TextStyle(fontSize: 20, color: Colors.white),),),
),
],
)
],
)
],
),
),
],
),
],
),
),
),
);
}
}