Flutter ClipRRect Localization: Rounded Rectangle Clipping for Multilingual Apps
ClipRRect clips its child to a rounded rectangle, perfect for creating modern UI designs with smooth corners. When building multilingual apps, ClipRRect plays a crucial role in avatar displays, card designs, image galleries, and rounded containers that adapt to different content lengths. This guide covers comprehensive strategies for localizing ClipRRect widgets in Flutter multilingual applications.
Understanding ClipRRect Localization
ClipRRect widgets require localization for:
- User avatars: Profile images with initials fallback
- Card designs: Content cards with rounded corners
- Image galleries: Consistent image presentation
- Button styles: Rounded action buttons with localized text
- Container designs: Rounded content sections
- Media players: Video thumbnails with play overlays
Basic ClipRRect with Localized Content
Start with a simple rounded clipping example:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedClipRRectDemo extends StatelessWidget {
const LocalizedClipRRectDemo({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Scaffold(
appBar: AppBar(title: Text(l10n.clipRRectTitle)),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.clipRRectDescription,
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(height: 24),
Center(
child: Semantics(
image: true,
label: l10n.roundedImageAccessibility,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
width: 200,
height: 200,
color: Theme.of(context).colorScheme.primaryContainer,
child: Center(
child: Text(
l10n.sampleContent,
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimaryContainer,
fontSize: 18,
),
textAlign: TextAlign.center,
),
),
),
),
),
),
],
),
),
);
}
}
ARB File Structure for ClipRRect
{
"clipRRectTitle": "Rounded Clipping",
"@clipRRectTitle": {
"description": "Title for clip rrect demo"
},
"clipRRectDescription": "Content with rounded corners for modern UI design",
"roundedImageAccessibility": "Rounded content container",
"sampleContent": "Rounded Content"
}
User Avatar with Initials Fallback
Create avatars that handle missing images with localized initials:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedUserAvatar extends StatelessWidget {
final String? imageUrl;
final String userName;
final double size;
final VoidCallback? onTap;
const LocalizedUserAvatar({
super.key,
this.imageUrl,
required this.userName,
this.size = 48,
this.onTap,
});
String _getInitials(String name) {
final parts = name.trim().split(RegExp(r'\s+'));
if (parts.isEmpty) return '?';
if (parts.length == 1) {
return parts[0].isNotEmpty ? parts[0][0].toUpperCase() : '?';
}
return '${parts[0][0]}${parts[parts.length - 1][0]}'.toUpperCase();
}
Color _getAvatarColor(String name) {
final colors = [
Colors.red,
Colors.pink,
Colors.purple,
Colors.deepPurple,
Colors.indigo,
Colors.blue,
Colors.lightBlue,
Colors.cyan,
Colors.teal,
Colors.green,
Colors.lightGreen,
Colors.lime,
Colors.amber,
Colors.orange,
Colors.deepOrange,
];
final index = name.hashCode.abs() % colors.length;
return colors[index];
}
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final initials = _getInitials(userName);
final backgroundColor = _getAvatarColor(userName);
return Semantics(
label: l10n.userAvatarAccessibility(userName),
button: onTap != null,
child: GestureDetector(
onTap: onTap,
child: ClipRRect(
borderRadius: BorderRadius.circular(size / 2),
child: Container(
width: size,
height: size,
color: backgroundColor,
child: imageUrl != null
? Image.network(
imageUrl!,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return _buildInitialsAvatar(initials, backgroundColor);
},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
strokeWidth: 2,
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
);
},
)
: _buildInitialsAvatar(initials, backgroundColor),
),
),
),
);
}
Widget _buildInitialsAvatar(String initials, Color backgroundColor) {
return Container(
color: backgroundColor,
child: Center(
child: Text(
initials,
style: TextStyle(
color: Colors.white,
fontSize: size * 0.4,
fontWeight: FontWeight.w600,
),
),
),
);
}
}
class UserAvatarListDemo extends StatelessWidget {
const UserAvatarListDemo({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final users = [
_User(l10n.userName1, null),
_User(l10n.userName2, 'https://example.com/avatar2.jpg'),
_User(l10n.userName3, null),
_User(l10n.userName4, null),
];
return Scaffold(
appBar: AppBar(title: Text(l10n.userListTitle)),
body: ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: users.length,
itemBuilder: (context, index) {
final user = users[index];
return ListTile(
leading: LocalizedUserAvatar(
userName: user.name,
imageUrl: user.imageUrl,
size: 48,
),
title: Text(user.name),
subtitle: Text(l10n.userSubtitle(index + 1)),
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(l10n.userTapped(user.name))),
);
},
);
},
),
);
}
}
class _User {
final String name;
final String? imageUrl;
_User(this.name, this.imageUrl);
}
Image Card Gallery
Create a responsive image gallery with rounded corners:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedImageGallery extends StatelessWidget {
const LocalizedImageGallery({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Scaffold(
appBar: AppBar(title: Text(l10n.galleryTitle)),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.galleryDescription,
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(height: 16),
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
childAspectRatio: 1,
),
itemCount: 6,
itemBuilder: (context, index) {
return _GalleryCard(
index: index,
title: l10n.galleryItemTitle(index + 1),
description: l10n.galleryItemDescription(index + 1),
);
},
),
),
],
),
),
);
}
}
class _GalleryCard extends StatelessWidget {
final int index;
final String title;
final String description;
const _GalleryCard({
required this.index,
required this.title,
required this.description,
});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final colors = [
Colors.blue,
Colors.green,
Colors.orange,
Colors.purple,
Colors.teal,
Colors.pink,
];
return Semantics(
label: l10n.galleryCardAccessibility(title, description),
button: true,
child: GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) => _ImageDetailSheet(
index: index,
title: title,
description: description,
color: colors[index % colors.length],
),
);
},
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Stack(
fit: StackFit.expand,
children: [
Container(
color: colors[index % colors.length],
child: Center(
child: Icon(
Icons.image,
size: 48,
color: Colors.white.withOpacity(0.5),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.7),
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
description,
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 12,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
),
],
),
),
),
);
}
}
class _ImageDetailSheet extends StatelessWidget {
final int index;
final String title;
final String description;
final Color color;
const _ImageDetailSheet({
required this.index,
required this.title,
required this.description,
required this.color,
});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return DraggableScrollableSheet(
initialChildSize: 0.7,
minChildSize: 0.5,
maxChildSize: 0.95,
builder: (context, scrollController) {
return Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
),
child: Column(
children: [
Container(
margin: const EdgeInsets.symmetric(vertical: 12),
width: 40,
height: 4,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.outline,
borderRadius: BorderRadius.circular(2),
),
),
Expanded(
child: SingleChildScrollView(
controller: scrollController,
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
color: color,
child: Center(
child: Icon(
Icons.image,
size: 64,
color: Colors.white.withOpacity(0.5),
),
),
),
),
),
const SizedBox(height: 24),
Text(
title,
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 8),
Text(
description,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 24),
Text(
l10n.imageDetails,
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 12),
_DetailRow(l10n.imageDimensions, '1920 x 1080'),
_DetailRow(l10n.imageFormat, 'JPEG'),
_DetailRow(l10n.imageSize, '2.4 MB'),
_DetailRow(l10n.imageDate, l10n.imageDateValue),
const SizedBox(height: 24),
Row(
children: [
Expanded(
child: OutlinedButton.icon(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.share),
label: Text(l10n.shareButton),
),
),
const SizedBox(width: 12),
Expanded(
child: ElevatedButton.icon(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.download),
label: Text(l10n.downloadButton),
),
),
],
),
],
),
),
),
],
),
);
},
);
}
}
class _DetailRow extends StatelessWidget {
final String label;
final String value;
const _DetailRow(this.label, this.value);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: TextStyle(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
Text(
value,
style: const TextStyle(fontWeight: FontWeight.w500),
),
],
),
);
}
}
Video Thumbnail with Play Overlay
Create video thumbnails with localized duration and play button:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedVideoThumbnail extends StatelessWidget {
final String title;
final Duration duration;
final String? thumbnailUrl;
final VoidCallback onPlay;
final bool isNew;
const LocalizedVideoThumbnail({
super.key,
required this.title,
required this.duration,
this.thumbnailUrl,
required this.onPlay,
this.isNew = false,
});
String _formatDuration(Duration duration, AppLocalizations l10n) {
final hours = duration.inHours;
final minutes = duration.inMinutes.remainder(60);
final seconds = duration.inSeconds.remainder(60);
if (hours > 0) {
return l10n.videoDurationHours(hours, minutes, seconds);
}
return l10n.videoDurationMinutes(minutes, seconds);
}
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final formattedDuration = _formatDuration(duration, l10n);
return Semantics(
label: l10n.videoThumbnailAccessibility(
title,
formattedDuration,
isNew ? l10n.newBadge : '',
),
button: true,
child: GestureDetector(
onTap: onPlay,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: AspectRatio(
aspectRatio: 16 / 9,
child: Stack(
fit: StackFit.expand,
children: [
// Thumbnail background
Container(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
child: thumbnailUrl != null
? Image.network(
thumbnailUrl!,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return _buildPlaceholder(context);
},
)
: _buildPlaceholder(context),
),
// Gradient overlay
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.7),
],
stops: const [0.5, 1.0],
),
),
),
// Play button
Center(
child: Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Icon(
Icons.play_arrow,
color: Theme.of(context).colorScheme.onPrimary,
size: 32,
),
),
),
// Title and duration
Positioned(
bottom: 12,
left: 12,
right: 12,
child: Row(
children: [
Expanded(
child: Text(
title,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.6),
borderRadius: BorderRadius.circular(4),
),
child: Text(
formattedDuration,
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
// New badge
if (isNew)
Positioned(
top: 12,
left: 12,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.error,
borderRadius: BorderRadius.circular(4),
),
child: Text(
l10n.newBadge,
style: TextStyle(
color: Theme.of(context).colorScheme.onError,
fontSize: 11,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
),
),
);
}
Widget _buildPlaceholder(BuildContext context) {
return Container(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
child: Center(
child: Icon(
Icons.video_library,
size: 48,
color: Theme.of(context).colorScheme.outline,
),
),
);
}
}
class VideoListDemo extends StatelessWidget {
const VideoListDemo({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final videos = [
_Video(l10n.videoTitle1, const Duration(minutes: 12, seconds: 34), true),
_Video(l10n.videoTitle2, const Duration(minutes: 5, seconds: 45), false),
_Video(l10n.videoTitle3, const Duration(hours: 1, minutes: 23, seconds: 45), false),
_Video(l10n.videoTitle4, const Duration(minutes: 8, seconds: 12), true),
];
return Scaffold(
appBar: AppBar(title: Text(l10n.videoListTitle)),
body: ListView.separated(
padding: const EdgeInsets.all(16),
itemCount: videos.length,
separatorBuilder: (context, index) => const SizedBox(height: 16),
itemBuilder: (context, index) {
final video = videos[index];
return LocalizedVideoThumbnail(
title: video.title,
duration: video.duration,
isNew: video.isNew,
onPlay: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(l10n.playingVideo(video.title))),
);
},
);
},
),
);
}
}
class _Video {
final String title;
final Duration duration;
final bool isNew;
_Video(this.title, this.duration, this.isNew);
}
Rounded Action Buttons
Create consistent rounded buttons with localized text:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedRoundedButtons extends StatelessWidget {
const LocalizedRoundedButtons({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Scaffold(
appBar: AppBar(title: Text(l10n.buttonsTitle)),
body: Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
l10n.buttonsDescription,
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(height: 32),
_RoundedButton(
label: l10n.primaryAction,
icon: Icons.check,
isPrimary: true,
onPressed: () => _showAction(context, l10n.primaryAction),
),
const SizedBox(height: 16),
_RoundedButton(
label: l10n.secondaryAction,
icon: Icons.edit,
isPrimary: false,
onPressed: () => _showAction(context, l10n.secondaryAction),
),
const SizedBox(height: 16),
_RoundedButton(
label: l10n.dangerAction,
icon: Icons.delete,
isDanger: true,
onPressed: () => _showAction(context, l10n.dangerAction),
),
const SizedBox(height: 32),
Text(
l10n.buttonGroupTitle,
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _RoundedButton(
label: l10n.cancelButton,
isPrimary: false,
onPressed: () => _showAction(context, l10n.cancelButton),
),
),
const SizedBox(width: 12),
Expanded(
child: _RoundedButton(
label: l10n.confirmButton,
isPrimary: true,
onPressed: () => _showAction(context, l10n.confirmButton),
),
),
],
),
],
),
),
);
}
void _showAction(BuildContext context, String action) {
final l10n = AppLocalizations.of(context)!;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(l10n.actionPerformed(action))),
);
}
}
class _RoundedButton extends StatelessWidget {
final String label;
final IconData? icon;
final bool isPrimary;
final bool isDanger;
final VoidCallback onPressed;
const _RoundedButton({
required this.label,
this.icon,
this.isPrimary = false,
this.isDanger = false,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
final backgroundColor = isDanger
? Theme.of(context).colorScheme.error
: isPrimary
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.surfaceContainerHighest;
final foregroundColor = isDanger
? Theme.of(context).colorScheme.onError
: isPrimary
? Theme.of(context).colorScheme.onPrimary
: Theme.of(context).colorScheme.onSurface;
return Semantics(
button: true,
label: label,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onPressed,
borderRadius: BorderRadius.circular(12),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
color: backgroundColor,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (icon != null) ...[
Icon(icon, color: foregroundColor, size: 20),
const SizedBox(width: 8),
],
Text(
label,
style: TextStyle(
color: foregroundColor,
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
],
),
),
),
),
),
);
}
}
Rounded Content Sections
Create content sections with adaptive rounded corners:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedContentSections extends StatelessWidget {
const LocalizedContentSections({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Scaffold(
appBar: AppBar(title: Text(l10n.contentSectionsTitle)),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_ContentSection(
title: l10n.featuresSection,
children: [
_FeatureItem(
icon: Icons.speed,
title: l10n.feature1Title,
description: l10n.feature1Description,
),
_FeatureItem(
icon: Icons.security,
title: l10n.feature2Title,
description: l10n.feature2Description,
),
_FeatureItem(
icon: Icons.language,
title: l10n.feature3Title,
description: l10n.feature3Description,
),
],
),
const SizedBox(height: 16),
_ContentSection(
title: l10n.statsSection,
children: [
_StatsRow(l10n: l10n),
],
),
const SizedBox(height: 16),
_ContentSection(
title: l10n.newsSection,
children: [
_NewsItem(
title: l10n.newsTitle1,
date: l10n.newsDate1,
),
_NewsItem(
title: l10n.newsTitle2,
date: l10n.newsDate2,
),
],
),
],
),
),
);
}
}
class _ContentSection extends StatelessWidget {
final String title;
final List<Widget> children;
const _ContentSection({
required this.title,
required this.children,
});
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Container(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Text(
title,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
),
Divider(
height: 1,
color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
),
...children,
],
),
),
);
}
}
class _FeatureItem extends StatelessWidget {
final IconData icon;
final String title;
final String description;
const _FeatureItem({
required this.icon,
required this.title,
required this.description,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(
icon,
color: Theme.of(context).colorScheme.primary,
size: 24,
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: Theme.of(context).textTheme.titleSmall,
),
const SizedBox(height: 4),
Text(
description,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),
),
],
),
);
}
}
class _StatsRow extends StatelessWidget {
final AppLocalizations l10n;
const _StatsRow({required this.l10n});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: _StatItem(
value: l10n.statValue1,
label: l10n.statLabel1,
),
),
Expanded(
child: _StatItem(
value: l10n.statValue2,
label: l10n.statLabel2,
),
),
Expanded(
child: _StatItem(
value: l10n.statValue3,
label: l10n.statLabel3,
),
),
],
),
);
}
}
class _StatItem extends StatelessWidget {
final String value;
final String label;
const _StatItem({
required this.value,
required this.label,
});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
value,
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
Text(
label,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
textAlign: TextAlign.center,
),
],
);
}
}
class _NewsItem extends StatelessWidget {
final String title;
final String date;
const _NewsItem({
required this.title,
required this.date,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(height: 4),
Text(
date,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),
),
Icon(
Icons.chevron_right,
color: Theme.of(context).colorScheme.outline,
),
],
),
);
}
}
Complete ARB File for ClipRRect
{
"@@locale": "en",
"clipRRectTitle": "Rounded Clipping",
"clipRRectDescription": "Content with rounded corners for modern UI design",
"roundedImageAccessibility": "Rounded content container",
"sampleContent": "Rounded Content",
"userListTitle": "Team Members",
"userName1": "Sarah Johnson",
"userName2": "Michael Chen",
"userName3": "Emma Williams",
"userName4": "James Rodriguez",
"userSubtitle": "Team member #{number}",
"@userSubtitle": {
"placeholders": {
"number": {"type": "int"}
}
},
"userAvatarAccessibility": "Avatar for {name}",
"@userAvatarAccessibility": {
"placeholders": {
"name": {"type": "String"}
}
},
"userTapped": "Tapped on {name}",
"@userTapped": {
"placeholders": {
"name": {"type": "String"}
}
},
"galleryTitle": "Photo Gallery",
"galleryDescription": "Tap any image to view details",
"galleryItemTitle": "Photo {number}",
"@galleryItemTitle": {
"placeholders": {
"number": {"type": "int"}
}
},
"galleryItemDescription": "Beautiful landscape photo number {number}",
"@galleryItemDescription": {
"placeholders": {
"number": {"type": "int"}
}
},
"galleryCardAccessibility": "{title}, {description}",
"@galleryCardAccessibility": {
"placeholders": {
"title": {"type": "String"},
"description": {"type": "String"}
}
},
"imageDetails": "Image Details",
"imageDimensions": "Dimensions",
"imageFormat": "Format",
"imageSize": "File Size",
"imageDate": "Date Taken",
"imageDateValue": "January 15, 2026",
"shareButton": "Share",
"downloadButton": "Download",
"videoListTitle": "Video Library",
"videoTitle1": "Getting Started with Flutter",
"videoTitle2": "Advanced Widget Techniques",
"videoTitle3": "Complete App Development Course",
"videoTitle4": "State Management Explained",
"videoDurationHours": "{hours}:{minutes}:{seconds}",
"@videoDurationHours": {
"placeholders": {
"hours": {"type": "int"},
"minutes": {"type": "int"},
"seconds": {"type": "int"}
}
},
"videoDurationMinutes": "{minutes}:{seconds}",
"@videoDurationMinutes": {
"placeholders": {
"minutes": {"type": "int"},
"seconds": {"type": "int"}
}
},
"videoThumbnailAccessibility": "Video: {title}, duration {duration}{newBadge}",
"@videoThumbnailAccessibility": {
"placeholders": {
"title": {"type": "String"},
"duration": {"type": "String"},
"newBadge": {"type": "String"}
}
},
"newBadge": "NEW",
"playingVideo": "Playing: {title}",
"@playingVideo": {
"placeholders": {
"title": {"type": "String"}
}
},
"buttonsTitle": "Action Buttons",
"buttonsDescription": "Rounded buttons with consistent styling across your app",
"primaryAction": "Save Changes",
"secondaryAction": "Edit Profile",
"dangerAction": "Delete Account",
"buttonGroupTitle": "Grouped Actions",
"cancelButton": "Cancel",
"confirmButton": "Confirm",
"actionPerformed": "Action: {action}",
"@actionPerformed": {
"placeholders": {
"action": {"type": "String"}
}
},
"contentSectionsTitle": "Dashboard",
"featuresSection": "Features",
"feature1Title": "Lightning Fast",
"feature1Description": "Optimized performance for smooth interactions",
"feature2Title": "Secure by Default",
"feature2Description": "Enterprise-grade security for your data",
"feature3Title": "Multi-language",
"feature3Description": "Support for 50+ languages out of the box",
"statsSection": "Statistics",
"statValue1": "1.2M",
"statLabel1": "Users",
"statValue2": "99.9%",
"statLabel2": "Uptime",
"statValue3": "4.8",
"statLabel3": "Rating",
"newsSection": "Latest News",
"newsTitle1": "New feature release coming soon",
"newsDate1": "January 20, 2026",
"newsTitle2": "Performance improvements deployed",
"newsDate2": "January 18, 2026"
}
Best Practices Summary
- Use consistent border radii: Define radius constants for uniformity
- Handle image loading states: Show placeholders and loading indicators
- Provide fallback content: Display initials or icons when images fail
- Add semantic labels: Describe the content for accessibility
- Consider RTL layouts: ClipRRect itself is direction-agnostic but content should adapt
- Test different content lengths: Ensure rounded containers handle varying text
- Use appropriate aspect ratios: Maintain proportions for media content
- Combine with shadows: Add depth with BoxShadow outside the clip
- Animate radius changes: Use AnimatedContainer for smooth radius transitions
- Test on different screen sizes: Verify rounded corners scale appropriately
Conclusion
ClipRRect is essential for creating modern, polished Flutter interfaces with rounded corners. From user avatars with initials fallback to image galleries and video thumbnails, proper use of ClipRRect ensures consistent visual design across your multilingual app. The key is maintaining consistent border radii, handling loading and error states gracefully, and providing proper accessibility labels for all clipped content.
Remember to test your rounded components with various content lengths in different languages to ensure the clipped areas accommodate text expansion and maintain visual harmony across all locales.