import 'package:gluestack_ui/gluestack_ui.dart';
GSAvatar(
radius: GSAvatarRadius.$full,
size: GSAvatarSizes.$md,
style: GSStyle(
bg: Colors.orange,
textStyle: const TextStyle(color: Colors.white),
),
fallBackText: const GSAvatarFallBackText('Geeky Stack'),
)
import "package:gluestack_ui/gluestack_ui.dart"
Sx Prop | Description |
---|---|
style | Parameter to style GSAvatar widget |
Name | Value | Default |
---|---|---|
size | xs | sm | md | lg | xl | 2xl | md |
import 'package:gluestack_ui/gluestack_ui.dart';
GSHStack(
children: [
GSAvatar(
style: GSStyle(
bg: Colors.orange,
textStyle: const TextStyle(color: Colors.white),
),
fallBackText: const GSAvatarFallBackText('Geeky Stack'),
),
const GSHeading(text: 'text'),
],
)
import 'package:gluestack_ui/gluestack_ui.dart';
GSVStack(
children: [
GSHStack(
children: [
GSAvatar(
avatarImage: const GSImage(
path: 'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
imageType: GSImageType.network,
),
style: GSStyle(
bg: Colors.orange,
textStyle: const TextStyle(color: Colors.white),
),
fallBackText: const GSAvatarFallBackText('Ronald Richards'),
),
const SizedBox(
width: 10,
),
const GSVStack(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GSHeading(text: 'Nursing Assistant'),
GSText(text: 'Ronald Richards'),
],
),
],
),
const SizedBox(
height: 20,
),
GSHStack(
children: [
GSAvatar(
avatarImage: const GSImage(
path: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
imageType: GSImageType.network,
),
style: GSStyle(
bg: Colors.orange,
textStyle: const TextStyle(color: Colors.white),
),
fallBackText: const GSAvatarFallBackText('Arlene McCoy'),
),
const SizedBox(
width: 10,
),
const GSVStack(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GSHeading(text: 'Arlene McCoy'),
GSText(text: 'Marketing Coordinator'),
],
),
],
),
],
)
import 'package:gluestack_ui/gluestack_ui.dart';
GSAvatarGroup(
children: [
GSAvatar(
size: GSSizes.$sm,
avatarImage: const GSImage(
path:
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
imageType: GSImageType.network,
),
style: GSStyle(
bg: Colors.orange,
textStyle: const TextStyle(color: Colors.white),
padding: const EdgeInsets.symmetric(horizontal: 20),
),
fallBackText: const GSAvatarFallBackText('RA'),
),
GSAvatar(
size: GSSizes.$sm,
avatarImage: const GSImage(
path:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
imageType: GSImageType.network,
),
style: GSStyle(
bg: Colors.orange,
textStyle: const TextStyle(color: Colors.white),
),
fallBackText: const GSAvatarFallBackText('BA'),
),
GSAvatar(
size: GSSizes.$sm,
avatarImage: const GSImage(
path:
'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
imageType: GSImageType.network,
),
style: GSStyle(
bg: Colors.orange,
textStyle: const TextStyle(color: Colors.white),
),
fallBackText: const GSAvatarFallBackText('GA'),
),
],
)