Фоновое изображение для эшафот
Я хочу установить изображение в качестве цвета фона для скаффолда. При настройке панели приложений и нижней панели использование декорации Контейнера в качестве тела лесов не покрывает весь экран.
Я хочу показать фон для полного экрана. Ниже мой код скаффолда:
Scaffold(
backgroundColor: Image.asset('images/background.png').color,
body: Container(
decoration: defaultAppBoxDecoration(),
),
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
title: Text('Title here', style: TextStyle(color: Colors.teal),),
leading: IconButton(
icon: Image.asset('images/star.png'),
onPressed: () {},
),
actions: <Widget>[
IconButton(icon: Image.asset('images/star.png')),
// IconButton(icon: Image.asset('images/grid.png')),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: IconButton(icon: Image.asset('images/star.png')),
),
bottomNavigationBar: Container(
padding: EdgeInsets.only(left: 4.0, right: 4.0),
height: 44.0 + MediaQuery.of(context).padding.bottom,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Image.asset('images/star.png')),
IconButton(icon: Image.asset('images/star.png')),
],
),
),
);
3 ответа
Решение
Попробуйте использовать Stack
проверьте следующий образец:
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset(
"resources/background.png",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
),
bottomNavigationBar: Container(
padding: EdgeInsets.only(left: 4.0, right: 4.0),
height: 44.0 + MediaQuery.of(context).padding.bottom,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.star)),
IconButton(icon: Icon(Icons.star)),
],
),
),
body: Text("Hello world"))
],
);
}
Вы можете разместить свой Scaffold внутри контейнера с фоновым изображением и использовать прозрачный цвет для тела Scaffold следующим образом:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.jpg"),
fit: BoxFit.cover,
),
),
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
backgroundColor: Colors.transparent,
body: Container(),
),);
2021-11-19 13:37