我有一个这样的应用栏设计:
但我不知道具体如何设置头像。我能做的就是:
PreferredSize(
preferredSize: const Size.fromHeight(150),
child: Container(
height: 160,
child: AppBar(
centerTitle: true,
title: Text(
'Setting',
style: context.bodyLarge.copyWith(
color: Colors.white,
fontSize: 20.sp,
fontWeight: FontWeight.w200,
),
),
backgroundColor: context.theme.primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.elliptical(
MediaQuery.of(context).size.width, 50.0)),
),
flexibleSpace: Stack(
children: [
Positioned(
left: (MediaQuery.of(context).size.width / 2) - 50,
top: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: Image.network(
'https://avatars.githubusercontent.com/u/113747320?v=4')
.image,
),
),
],
),
),
),
)
我尝试用更大的父首选尺寸来实现它,但仍然不起作用
就我而言,它工作正常!
试试这个!
输出:
代码:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: ProfileScreen(),
);
}
}
class ProfileScreen extends StatelessWidget {
const ProfileScreen({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: const Color(0xffea5d49),
),
body: Stack(
alignment: Alignment.center,
children: [
CustomPaint(
painter: HeaderCurvedContainer(),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
const Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.menu,
color: Colors.white,
),
Text(
'Profile',
style: TextStyle(
fontSize: 35.0,
letterSpacing: 1.5,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
SizedBox(
width: 25,
)
],
),
),
CircleAvatar(
radius: 50,
backgroundImage:
NetworkImage('https://i.pravatar.cc/150?img=2'),
)
],
),
],
),
),
);
}
}
class HeaderCurvedContainer extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..color = const Color(0xffea5d49);
Path path = Path()
..relativeLineTo(0, 100)
..quadraticBezierTo(size.width / 2, 150.0, size.width, 100)
..relativeLineTo(0, -100)
..close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}