Метод 1: использование виджета Drawer и UserAccountsDrawerHeader
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Drawer with Profile Image'),
),
drawer: Drawer(
child: ListView(
children: [
UserAccountsDrawerHeader(
accountName: Text('John Doe'),
accountEmail: Text('johndoe@example.com'),
currentAccountPicture: CircleAvatar(
backgroundImage: AssetImage('assets/profile_image.jpg'),
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Handle item 1 tap
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Handle item 2 tap
},
),
],
),
),
body: Center(
child: Text('Drawer Example'),
),
),
);
}
}
Метод 2. Использование пользовательского виджета ящика с изображением профиля
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Drawer with Profile Image'),
),
drawer: MyDrawer(),
body: Center(
child: Text('Drawer Example'),
),
),
);
}
}
class MyDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children: [
Container(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
backgroundImage: AssetImage('assets/profile_image.jpg'),
radius: 40.0,
),
SizedBox(height: 8.0),
Text(
'John Doe',
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
),
Text('johndoe@example.com'),
],
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Handle item 1 tap
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Handle item 2 tap
},
),
],
),
);
}
}