在颤振中布局背景

Question

点击这里查看图片

大家好，我需要帮助使我在 Flutter 中的个人资料页面看起来像上图。 我真的不知道如何让它 BC 里面有这么多细节。

这是我到目前为止制作的代码：

import 'package:flutter/material.dart';
void main() => runApp(new UserDetails());
class UserDetails extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'User Details',
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
leading: Icon(Icons.arrow_back),  
title: Text('Edward',
style: TextStyle(color: Colors.black),
),
actions: <Widget>[
Icon(Icons.more_vert, color: Colors.white,),
],
),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 200.0,
color: Colors.green,
child: Center(
child: Icon(Icons.person, size: 250.0 ),
),
)

],)
]
),
),

);
}
}

Answer 1

您可以实现向容器添加边框半径，然后使用列来定位和排列文本：在本例中为列小部件。您还需要将脚手架中的AppBar设置为与容器相同的背景颜色，并将高程设置为零以避免包含器上方的阴影，如果您需要后者的帮助，请告诉我。

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 260,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.grey,
child: Align(
alignment: Alignment.bottomCenter,
child: Icon(Icons.people, size: 50),
),
radius: 35,
),
Text("@edward"),
Text("[e-mail]"),
Text("No: 00X-XXX-XXX"),
],
),
);
}
}