Flutter Dribble克隆

huangapple go评论62阅读模式
英文:

Flutter Dribble clone

问题

请有人帮助我克隆这个UI,我从Dribble上找到了它,但是我遇到了关于框的半径的问题。
我尝试使用了一个Stack,但是它没有显示容器的半径,也许我需要使用自定义小部件。
请帮助我,我卡在这个问题上了。
Flutter Dribble克隆

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: '按日期筛选',
        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("历史记录", 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("日期"),
                          SizedBox(width: 150),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text("奇数"),
                              Divider(color: Colors.black),
                              Text("状态")
                            ],
                          )
                        ],
                      ),
                    ],
                  )
                )
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

Flutter Dribble克隆

我添加了一些阴影和不同的颜色,但仍然不太对。

英文:

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.
Flutter Dribble克隆

        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")
],
)
],
),
],
)
)
],
),
),
),
],
),
),
);

Flutter Dribble克隆

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")
],
)
],
),
],
))
],
),
),
),
],
),
),
],
),
)

huangapple
  • 本文由 发表于 2023年1月8日 21:50:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/75048265-2.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定