Flutter客户端页面问题求助：Widget居中异常、Divider未显示及按钮位置修正

问题概述 #

当前代码存在三个布局问题：

• 订阅项目区域内的用户信息Widget无法居中显示
• 用户名下方及ACCESS按钮下方的Divider未正常渲染
• ACCESS按钮无法固定在区域右侧

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flashy_tab_bar2/flashy_tab_bar2.dart';
import 'workout_post_detail.dart';
import 'editprofile_business.dart';
import 'seeall_workout.dart';

class ClientPage extends StatefulWidget {
  @override
  _ClientPageState createState() => _ClientPageState();
}

class _ClientPageState extends State<ClientPage> {
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('Your profile',
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
        backgroundColor: Colors.black,
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Column(children: [
          SizedBox(height: 10),
          Center(
            child: CircleAvatar(
              radius: 60,
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: 46,
                backgroundColor: Colors.grey.shade100,
                child: Text('Pic'),
              ),
            ),
          ),
          SizedBox(height: 10),
          Text(
            'Usermane',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
          ),
          SizedBox(height: 20),
          Container(
            height: 60,
            width: MediaQuery.of(context).size.width * 0.90,
            decoration: ShapeDecoration(
              shape: const StadiumBorder(),
              color: Colors.grey[200],
              shadows: [
                BoxShadow(
                  color: Colors.grey.shade400,
                  blurRadius: 10,
                  spreadRadius: 2,
                ),
              ],
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 25.0, right: 25),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Subscribers',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    '8',
                    style: TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.grey),
                  ),
                ],
              ),
            ),
          ),
          SizedBox(height: 20),
          Text(
            'PROGRAMS SUBSCRIBED',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
          ),
          SizedBox(height: 20),
          Container(
            height: 300,
            width: MediaQuery.of(context).size.width * 0.90,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 3),
                ),
              ],
            ),
            child: _userprofile(context),
          ),
        ]),
      ),
    );
  }
}

Widget _userprofile(BuildContext context) {
  return Padding(
    padding: EdgeInsets.all(10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        CircleAvatar(
          radius: 35,
          backgroundColor: Colors.white,
          child: CircleAvatar(
            radius: 33,
            backgroundColor: Colors.grey.shade100,
            child: Text('Pic'),
          ),
        ),
        SizedBox(width: 16),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'username',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 4),
              Text('Name of the program'),
              SizedBox(height: 8),
              Divider(color: Colors.black, height: 1),
            ],
          ),
        ),
        SizedBox(width: 16),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text(
                'ACCESS',
                style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
              ),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(Colors.black),
              ),
            ),
            SizedBox(height: 8),
            Divider(color: Colors.black, height: 1),
          ],
        ),
      ],
    ),
  );
}

关键修改说明 #

1. 解决Widget居中问题

   • 移除冗余的Stack结构，直接将用户信息容器作为Column子元素
   • 给_userprofile内的Row添加mainAxisAlignment: MainAxisAlignment.center和crossAxisAlignment: CrossAxisAlignment.center，实现内容垂直水平双居中

2. 修复Divider显示问题

   • 在用户名Column中添加Divider，并通过SizedBox控制间距
   • 给按钮所在Column设置crossAxisAlignment: CrossAxisAlignment.stretch，让Divider占满父容器宽度
   • 删除无效的空Padding组件

3. 固定ACCESS按钮在右侧

   • 用Expanded包裹中间的用户名Column，使其占据左侧头像与右侧按钮间的所有剩余空间，自动将按钮推至右侧
   • 调整各元素间的SizedBox宽度，优化布局间距

4. 修复头像溢出问题

   • 将内层CircleAvatar的radius从46改为33，避免超出外层容器导致的布局溢出

内容的提问来源于stack exchange，提问作者sanda17