Flutter RotatedBox Localization: Quarter-Turn Rotations for Multilingual Apps
RotatedBox rotates its child by a number of quarter turns, affecting the widget's layout dimensions. Unlike Transform.rotate which only affects painting, RotatedBox changes the actual size reported to the parent widget. In multilingual apps, RotatedBox enables vertical text labels, rotated indicators, and directional elements that adapt to different languages and text directions. This guide covers comprehensive strategies for using RotatedBox in Flutter localization.
Understanding RotatedBox in Localization
RotatedBox widgets benefit localization for:
- Vertical text labels: Sidebar labels, timeline markers, and axis titles
- Rotated indicators: Progress bars, navigation rails, and tab indicators
- RTL adaptation: Adjusting rotation direction for RTL languages
- Space optimization: Fitting labels in constrained spaces
- Cultural patterns: Different reading orientations for various scripts
- Accessible alternatives: Providing horizontal alternatives when needed
Basic RotatedBox with Localized Content
Start with a simple rotated label:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedRotatedBoxDemo extends StatelessWidget {
const LocalizedRotatedBoxDemo({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final isRtl = Directionality.of(context) == TextDirection.rtl;
return Scaffold(
appBar: AppBar(title: Text(l10n.rotatedBoxTitle)),
body: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
// Vertical sidebar label
RotatedBox(
// Rotate counter-clockwise for LTR, clockwise for RTL
quarterTurns: isRtl ? 1 : 3,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(4),
),
child: Text(
l10n.sidebarLabel,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context).colorScheme.onPrimaryContainer,
fontWeight: FontWeight.bold,
),
),
),
),
const SizedBox(width: 16),
// Main content
Expanded(
child: Card(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.mainContentTitle,
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 16),
Text(l10n.mainContentDescription),
],
),
),
),
),
],
),
),
);
}
}
ARB File Structure for RotatedBox
{
"rotatedBoxTitle": "Rotated Box Demo",
"@rotatedBoxTitle": {
"description": "Title for rotated box demo page"
},
"sidebarLabel": "FEATURED",
"mainContentTitle": "Welcome to Our App",
"mainContentDescription": "Explore the features and discover what makes us different."
}
Timeline with Rotated Labels
Create a timeline with vertical date labels:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedTimeline extends StatelessWidget {
const LocalizedTimeline({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final isRtl = Directionality.of(context) == TextDirection.rtl;
final events = [
{
'date': l10n.timelineDate1,
'title': l10n.timelineTitle1,
'description': l10n.timelineDescription1,
'color': Colors.blue,
},
{
'date': l10n.timelineDate2,
'title': l10n.timelineTitle2,
'description': l10n.timelineDescription2,
'color': Colors.green,
},
{
'date': l10n.timelineDate3,
'title': l10n.timelineTitle3,
'description': l10n.timelineDescription3,
'color': Colors.orange,
},
{
'date': l10n.timelineDate4,
'title': l10n.timelineTitle4,
'description': l10n.timelineDescription4,
'color': Colors.purple,
},
];
return Scaffold(
appBar: AppBar(title: Text(l10n.timelineTitle)),
body: ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: events.length,
itemBuilder: (context, index) {
final event = events[index];
final isLast = index == events.length - 1;
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Rotated date label
SizedBox(
width: 60,
child: Column(
children: [
RotatedBox(
quarterTurns: isRtl ? 1 : 3,
child: Padding(
padding: const EdgeInsets.all(8),
child: Text(
event['date'] as String,
style: Theme.of(context).textTheme.labelMedium?.copyWith(
color: event['color'] as Color,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
// Timeline line and dot
Column(
children: [
Container(
width: 16,
height: 16,
decoration: BoxDecoration(
color: event['color'] as Color,
shape: BoxShape.circle,
border: Border.all(
color: Theme.of(context).colorScheme.surface,
width: 3,
),
),
),
if (!isLast)
Expanded(
child: Container(
width: 2,
color: Theme.of(context).colorScheme.outlineVariant,
),
),
],
),
const SizedBox(width: 16),
// Event content
Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 24),
child: Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
event['title'] as String,
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 8),
Text(
event['description'] as String,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),
),
),
),
),
],
),
);
},
),
);
}
}
Chart Axis Labels
Create chart axes with rotated labels:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedChartAxes extends StatelessWidget {
const LocalizedChartAxes({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final isRtl = Directionality.of(context) == TextDirection.rtl;
final months = [
l10n.monthJan,
l10n.monthFeb,
l10n.monthMar,
l10n.monthApr,
l10n.monthMay,
l10n.monthJun,
];
final values = [65, 45, 80, 55, 90, 75];
return Scaffold(
appBar: AppBar(title: Text(l10n.chartTitle)),
body: Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.salesOverviewTitle,
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 8),
Text(
l10n.salesOverviewSubtitle,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 32),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Y-axis label (rotated)
RotatedBox(
quarterTurns: isRtl ? 1 : 3,
child: Center(
child: Padding(
padding: const EdgeInsets.all(8),
child: Text(
l10n.yAxisLabel,
style: Theme.of(context).textTheme.titleSmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
),
),
),
// Y-axis values
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: ['100', '75', '50', '25', '0']
.map((v) => Text(
v,
style: Theme.of(context).textTheme.bodySmall,
))
.toList(),
),
const SizedBox(width: 8),
// Chart bars
Expanded(
child: Column(
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: List.generate(months.length, (index) {
final value = values[index];
return Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
value.toString(),
style: Theme.of(context).textTheme.labelSmall,
),
const SizedBox(height: 4),
Flexible(
child: FractionallySizedBox(
heightFactor: value / 100,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(4),
),
),
),
),
),
],
),
),
);
}),
),
),
const SizedBox(height: 8),
// X-axis labels (rotated if needed for long labels)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: months.map((month) {
return Expanded(
child: RotatedBox(
// Rotate labels 45 degrees worth for long text
quarterTurns: 0, // Keep horizontal for short month names
child: Text(
month,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodySmall,
),
),
);
}).toList(),
),
const SizedBox(height: 8),
// X-axis title
Text(
l10n.xAxisLabel,
style: Theme.of(context).textTheme.titleSmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),
),
],
),
),
],
),
),
);
}
}
Navigation Rail with Rotated Labels
Create a navigation rail with vertical labels:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedNavigationRail extends StatefulWidget {
const LocalizedNavigationRail({super.key});
@override
State<LocalizedNavigationRail> createState() => _LocalizedNavigationRailState();
}
class _LocalizedNavigationRailState extends State<LocalizedNavigationRail> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final isRtl = Directionality.of(context) == TextDirection.rtl;
final destinations = [
(icon: Icons.home, label: l10n.navHome),
(icon: Icons.explore, label: l10n.navExplore),
(icon: Icons.bookmark, label: l10n.navSaved),
(icon: Icons.person, label: l10n.navProfile),
(icon: Icons.settings, label: l10n.navSettings),
];
return Scaffold(
body: Row(
children: [
// Custom navigation rail with rotated labels
Container(
width: 80,
color: Theme.of(context).colorScheme.surfaceVariant,
child: Column(
children: [
const SizedBox(height: 16),
// Logo or app icon
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.flutter_dash,
color: Theme.of(context).colorScheme.onPrimary,
),
),
const SizedBox(height: 24),
// Navigation items
Expanded(
child: ListView.builder(
itemCount: destinations.length,
itemBuilder: (context, index) {
final dest = destinations[index];
final isSelected = _selectedIndex == index;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: InkWell(
onTap: () => setState(() => _selectedIndex = index),
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: isSelected
? Theme.of(context).colorScheme.primaryContainer
: Colors.transparent,
borderRadius: BorderRadius.circular(12),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
dest.icon,
color: isSelected
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.onSurfaceVariant,
),
const SizedBox(height: 4),
RotatedBox(
// Vertical text for narrow rail
quarterTurns: isRtl ? 1 : 3,
child: Text(
dest.label,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: isSelected
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: isSelected
? FontWeight.bold
: FontWeight.normal,
),
),
),
],
),
),
),
);
},
),
),
],
),
),
// Main content area
Expanded(
child: Scaffold(
appBar: AppBar(
title: Text(destinations[_selectedIndex].label),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
destinations[_selectedIndex].icon,
size: 80,
color: Theme.of(context).colorScheme.primary,
),
const SizedBox(height: 16),
Text(
l10n.currentSection(destinations[_selectedIndex].label),
style: Theme.of(context).textTheme.headlineSmall,
),
],
),
),
),
),
],
),
);
}
}
Ribbon Labels
Create ribbon-style labels for cards:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class LocalizedRibbonLabels extends StatelessWidget {
const LocalizedRibbonLabels({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final isRtl = Directionality.of(context) == TextDirection.rtl;
return Scaffold(
appBar: AppBar(title: Text(l10n.productsTitle)),
body: GridView.count(
crossAxisCount: 2,
padding: const EdgeInsets.all(16),
mainAxisSpacing: 16,
crossAxisSpacing: 16,
childAspectRatio: 0.75,
children: [
_buildProductCard(
context,
l10n,
isRtl,
title: l10n.product1Title,
price: l10n.product1Price,
ribbon: l10n.ribbonNew,
ribbonColor: Colors.green,
),
_buildProductCard(
context,
l10n,
isRtl,
title: l10n.product2Title,
price: l10n.product2Price,
ribbon: l10n.ribbonSale,
ribbonColor: Colors.red,
),
_buildProductCard(
context,
l10n,
isRtl,
title: l10n.product3Title,
price: l10n.product3Price,
ribbon: l10n.ribbonHot,
ribbonColor: Colors.orange,
),
_buildProductCard(
context,
l10n,
isRtl,
title: l10n.product4Title,
price: l10n.product4Price,
ribbon: null,
ribbonColor: Colors.blue,
),
],
),
);
}
Widget _buildProductCard(
BuildContext context,
AppLocalizations l10n,
bool isRtl, {
required String title,
required String price,
required String? ribbon,
required Color ribbonColor,
}) {
return Card(
clipBehavior: Clip.antiAlias,
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Product image placeholder
Expanded(
flex: 3,
child: Container(
color: Theme.of(context).colorScheme.surfaceVariant,
child: Icon(
Icons.image,
size: 64,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
),
// Product info
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: Theme.of(context).textTheme.titleMedium,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const Spacer(),
Text(
price,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
],
),
// Ribbon label
if (ribbon != null)
Positioned(
top: 12,
right: isRtl ? null : 0,
left: isRtl ? 0 : null,
child: RotatedBox(
// Rotate for diagonal effect simulation
quarterTurns: 0,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: ribbonColor,
borderRadius: BorderRadius.only(
topLeft: isRtl ? const Radius.circular(4) : Radius.zero,
bottomLeft: isRtl ? const Radius.circular(4) : Radius.zero,
topRight: isRtl ? Radius.zero : const Radius.circular(4),
bottomRight: isRtl ? Radius.zero : const Radius.circular(4),
),
),
child: Text(
ribbon,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
),
),
),
],
),
);
}
}
Accessibility Considerations
Provide alternatives for rotated text:
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class AccessibleRotatedLabels extends StatelessWidget {
const AccessibleRotatedLabels({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final isRtl = Directionality.of(context) == TextDirection.rtl;
// Check if user prefers reduced motion or has accessibility needs
final mediaQuery = MediaQuery.of(context);
final useHorizontalLabels = mediaQuery.accessibleNavigation;
return Scaffold(
appBar: AppBar(title: Text(l10n.accessibleDemoTitle)),
body: Row(
children: [
// Sidebar with adaptive labels
Container(
width: useHorizontalLabels ? 120 : 60,
color: Theme.of(context).colorScheme.surfaceVariant,
child: Column(
children: [
const SizedBox(height: 24),
_buildSidebarItem(
context,
isRtl,
useHorizontalLabels,
icon: Icons.dashboard,
label: l10n.dashboardLabel,
isSelected: true,
),
_buildSidebarItem(
context,
isRtl,
useHorizontalLabels,
icon: Icons.analytics,
label: l10n.analyticsLabel,
isSelected: false,
),
_buildSidebarItem(
context,
isRtl,
useHorizontalLabels,
icon: Icons.people,
label: l10n.usersLabel,
isSelected: false,
),
],
),
),
// Content area
Expanded(
child: Center(
child: Text(l10n.mainContentPlaceholder),
),
),
],
),
);
}
Widget _buildSidebarItem(
BuildContext context,
bool isRtl,
bool useHorizontalLabels, {
required IconData icon,
required String label,
required bool isSelected,
}) {
final color = isSelected
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.onSurfaceVariant;
return Semantics(
label: label,
selected: isSelected,
button: true,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Column(
children: [
Icon(icon, color: color),
const SizedBox(height: 4),
if (useHorizontalLabels)
// Horizontal label for accessibility
Text(
label,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: color,
),
textAlign: TextAlign.center,
)
else
// Rotated label for compact design
RotatedBox(
quarterTurns: isRtl ? 1 : 3,
child: Text(
label,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: color,
),
),
),
],
),
),
);
}
}
Complete ARB File for RotatedBox
{
"@@locale": "en",
"rotatedBoxTitle": "Rotated Box Demo",
"sidebarLabel": "FEATURED",
"mainContentTitle": "Welcome to Our App",
"mainContentDescription": "Explore the features and discover what makes us different.",
"timelineTitle": "Project Timeline",
"timelineDate1": "JAN 2026",
"timelineTitle1": "Project Kickoff",
"timelineDescription1": "Initial planning and team assembly completed.",
"timelineDate2": "FEB 2026",
"timelineTitle2": "Design Phase",
"timelineDescription2": "UI/UX design and prototyping finished.",
"timelineDate3": "MAR 2026",
"timelineTitle3": "Development",
"timelineDescription3": "Core features implementation in progress.",
"timelineDate4": "APR 2026",
"timelineTitle4": "Launch",
"timelineDescription4": "Public release and marketing campaign.",
"chartTitle": "Sales Chart",
"salesOverviewTitle": "Sales Overview",
"salesOverviewSubtitle": "Monthly performance for the first half of 2026",
"yAxisLabel": "Sales (units)",
"xAxisLabel": "Month",
"monthJan": "Jan",
"monthFeb": "Feb",
"monthMar": "Mar",
"monthApr": "Apr",
"monthMay": "May",
"monthJun": "Jun",
"navHome": "Home",
"navExplore": "Explore",
"navSaved": "Saved",
"navProfile": "Profile",
"navSettings": "Settings",
"currentSection": "Current: {section}",
"@currentSection": {
"placeholders": {"section": {"type": "String"}}
},
"productsTitle": "Products",
"product1Title": "Wireless Headphones",
"product1Price": "$129.99",
"product2Title": "Smart Watch Pro",
"product2Price": "$249.99",
"product3Title": "Portable Speaker",
"product3Price": "$79.99",
"product4Title": "USB-C Hub",
"product4Price": "$49.99",
"ribbonNew": "NEW",
"ribbonSale": "SALE",
"ribbonHot": "HOT",
"accessibleDemoTitle": "Accessible Labels",
"dashboardLabel": "Dashboard",
"analyticsLabel": "Analytics",
"usersLabel": "Users",
"mainContentPlaceholder": "Select a menu item"
}
Best Practices Summary
- Adjust rotation for RTL: Use quarterTurns 1 for RTL, 3 for LTR to maintain reading flow
- Provide accessibility alternatives: Offer horizontal text options for screen readers
- Test text length: Rotated text may overflow with longer translations
- Consider layout impact: RotatedBox affects widget dimensions unlike Transform
- Use Semantics: Ensure rotated text remains accessible
- Keep labels short: Vertical text works best with brief labels
- Consistent rotation: Use the same rotation direction throughout the app
- Fallback for long text: Consider abbreviations or tooltips for lengthy translations
- Quarter turns only: RotatedBox only supports 90-degree increments
- Test across locales: Verify rotated content works with all supported scripts
Conclusion
RotatedBox provides a layout-aware way to rotate content by quarter turns, making it ideal for vertical labels, sidebar navigation, and space-constrained designs. When building multilingual applications, properly adjusting the rotation direction for RTL languages ensures that vertical text flows naturally for users regardless of their reading direction.
Remember that RotatedBox affects the widget's actual layout dimensions, making it suitable for situations where you need the parent widget to accommodate the rotated size. For more flexible rotation angles that don't affect layout, consider using Transform.rotate instead.