用于背景图像的单独类BaseLayout

Question

//我想为Flutter应用程序中的每个页面使用背景图像。目前，我正在使用//单独的类BaseLayout来设置背景图像。然而，颤振并不反映//描述了设备上的背景图像。//有没有更好的方法来反映背景图像？

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

如果要使用基本布局作为所有页面的父级，则必须使脚手架背景透明。您可以使用Scaffold小部件的scaffoldBackgroundColor属性使其透明。

或者，您可以在声明MaterialApp时将其定义为Theme数据。样本代码：

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

然后在你的BaseLayout课堂上：

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

现在，您可以用刚刚创建的BaseLayout类包装应用程序的任何Scaffold小部件，并且它的背景图像在整个应用程序中都是相同的。