英文:
Flutter Dribble clone
问题
请问有人可以帮我克隆这个UI吗？我从Dribble上找到了它，但是我在边框半径的问题上遇到了困难。
我尝试使用了一个Stack，但它没有显示容器的半径，也许我需要使用自定义小部件。
请帮帮我，我在这个问题上卡住了。
我添加了一些盒子阴影和不同的颜色，但还是不太对。
Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text(
DateTimeFormat.format(DateTime.now(), format: 'D M, Y'),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 26,
),
),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(
Icons.maximize_outlined,
size: 70,
color: Colors.white60,
),
),
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15,
),
],
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text(
"History of Tips",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(width: 150),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(color: Colors.black),
Text("Status"),
],
),
],
),
],
),
),
],
),
),
),
],
),
),
);
我添加了一些盒子阴影和不同的颜色，但还是不太对。
英文:
can someone Please help me clone this ui I got it from Dribble and Im facing the problem with the box radius.
I tried using a stack but it doesnt show the container radius maybe i need to use a custom widget.
Please any help is needed i am stuck on this problem.
Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title:Text(DateTimeFormat.format(DateTime.now(),format: 'D M, Y')
,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 26
),),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {
},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(Icons.maximize_outlined,size: 70,color: Colors.white60,),
)
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15
)
]
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text("History of Tips",style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black
),),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(width: 150,),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(color: Colors.black,),
Text("Status")
],
)
],
),
],
)
)
],
),
),
),
],
),
),
);
I added in some box shadow and some different colors but still it's not quite right.
答案1
得分: 1
你需要将appbar添加到你的body中，像这样：
Scaffold(
key: _scaffoldKey,
backgroundColor: Color(0xff405cbf),
body: Stack(
children: [
AppBar(
title: Text(
DateTimeFormat.format(DateTime.now(), format: 'D M, Y'),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 26),
),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(
Icons.maximize_outlined,
size: 70,
color: Colors.white60,
),
)),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15)
]),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text(
"History of Tips",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(
width: 150,
),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(
color: Colors.black,
),
Text("Status")
],
)
],
),
],
))
],
),
),
),
],
),
),
],
),
)
英文:
You need to add the appbar inside your body like this:
Scaffold(
key: _scaffoldKey,
backgroundColor: Color(0xff405cbf),
body: Stack(
children: [
AppBar(
title: Text(
DateTimeFormat.format(DateTime.now(), format: 'D M, Y'),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 26),
),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(
Icons.maximize_outlined,
size: 70,
color: Colors.white60,
),
)),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15)
]),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text(
"History of Tips",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(
width: 150,
),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(
color: Colors.black,
),
Text("Status")
],
)
],
),
],
))
],
),
),
),
],
),
),
],
),
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论