我正在尝试在flutter项目中的状态栏背景中应用图像。那么哪个小部件可以帮助我应用以下预期结果。
detailpage.dart
import 'package:flutter/material.dart';
class MyDetailPage extends StatefulWidget {
@override
_MyDetailPageState createState() => _MyDetailPageState();
}
class _MyDetailPageState extends State<MyDetailPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image2.png"),
fit: BoxFit.fitHeight,
),
),
)
],
),
);
}
}
答案 0 :(得分:1)
您可以使用FlexibleSpaceBar
来实现,这是示例代码。
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset("assets/images/chocolate.jpg", fit: BoxFit.cover),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(title: Text("Item ${index}")),
childCount: 100,
),
),
],
),
);
}
答案 1 :(得分:1)
使用脚手架属性
extendBodyBehindAppBar: true,
和
设置statusBarColor: Colors.transparent
此代码用于状态栏颜色。
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent
));
这是我当前项目中的代码示例。
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent
));
return Scaffold(
extendBodyBehindAppBar: true,
body: Column(
children: [
Container(
height: 250,
child: Container(
child: Stack(
alignment: Alignment.topLeft,
children: [
Container(
width: screenWidthPercentage(context,percentage: 1),
child: Image.network(
contentImage,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.only(top: 48.0,left: 12),
child: Icon(Icons.arrow_back,color: Colors.white,),
),
],
),
),
),
],
),
);
}
}
答案 2 :(得分:0)
您可以通过不保留 SafeArea 小部件并将状态栏颜色设置为透明来实现。
我创建了如下示例。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class FullScreen extends StatefulWidget {
const FullScreen({Key? key}) : super(key: key);
@override
_FullScreenState createState() => _FullScreenState();
}
class _FullScreenState extends State<FullScreen> {
@override
void initState() {
super.initState();
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.light
//color set to transperent or set your own color
)
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: buildBody(),
);
}
Widget buildBody() {
return SizedBox(
height: 400,
width: double.infinity,
child: Card(
clipBehavior: Clip.antiAlias,
margin: EdgeInsets.all(0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40)),
),
child: Image.network(
'https://source.unsplash.com/random',
fit: BoxFit.cover,
),
),
);
}
}
我添加了卡片,因为它为图像提供了很好的高度效果?。 仅供参考,如果您使用卡片,请保留卡片中的保证金为 0。