separate class BaseLayout for background image - image

Question

// I want to use a background image for every page in my Flutter app. For the moment, I'm using a
// separate class BaseLayout to set up the background image. However, flutter does not reflect the
// described the background image on the device.
// Is there a better way to reflect the background image?
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: CarouselSlider(
options: CarouselOptions(height: 240.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(color: Colors.amber),
child: Text(
'text $i',
style: TextStyle(fontSize: 16.0),
));
},
);
}).toList(),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class BaseLayout extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/logo1.svg"), fit: BoxFit.cover),
),
child: Center(child: FlutterLogo(size: 300)),
);
}
}````

Answer 1

You have to make your scaffold background transparent, If you are going to use a Base Layout as a parent to all your pages.
You can use scaffoldBackgroundColor property of Scaffold widget to make it transparent.
Or better you can define it your Theme data while you declare your MaterialApp.
Sample Code:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
scaffoldBackgroundColor: Colors.transparent, // To Make scaffold background Transparent
appBarTheme: AppBarTheme(color:Colors.transparent // To Make appbar background transparent.
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
Then on your BaseLayout class:
class BaseLayout extends StatelessWidget {
const BaseLayout({this.child});
final Widget child;
#override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/logo1.svg"), fit: BoxFit.cover),
),
child: Center(child: child),
);
}
}
Now you can wrap any Scaffold widget of your app with this BaseLayout class you just created and it's background image will be same across whole application.