颤动中的布局背景答案

【问题标题】：Layout background in flutter颤动中的布局背景
【发布时间】：2020-09-27 04:28:01
【问题描述】：

大家好，我需要帮助让我的个人资料页面看起来像上图。我真的不知道如何使它成为 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 ),
                ),
                

              )
            

          ],)
        ]
      ),
      ),
      
    );
  }
}

【问题讨论】：

标签： flutter layout flutter-layout

【解决方案1】：

您可以为容器添加一个边框半径，然后使用 Column 来定位和排列您的文本：在这种情况下是一个 Column 小部件。您还需要将 Scaffold 中的 AppBar 设置为与 Container 具有相同的背景颜色，并将高度设置为零以避免容器上方的阴影，如果您需要后者的帮助，请告诉我。

    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("email@email.com"),
          Text("No: 00X-XXX-XXX"),
        ],
      ),
    );
  }
}

【讨论】：