Last active
January 26, 2024 09:20
-
-
Save bizz84/3f9a8408f61c64f6331215ccded30e16 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() { | |
runApp(const MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
debugShowCheckedModeBanner: false, | |
theme: ThemeData( | |
colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange), | |
textTheme: const TextTheme( | |
labelLarge: TextStyle(fontSize: 28), | |
), | |
appBarTheme: const AppBarTheme( | |
backgroundColor: Colors.orange, | |
)), | |
home: const RowColumnScreen(), | |
); | |
} | |
} | |
class RowColumnScreen extends StatefulWidget { | |
const RowColumnScreen({super.key}); | |
@override | |
State<RowColumnScreen> createState() => _RowColumnScreenState(); | |
} | |
class _RowColumnScreenState extends State<RowColumnScreen> { | |
var _isRow = true; | |
var _mainAxisAlignment = MainAxisAlignment.start; | |
var _crossAxisAlignment = CrossAxisAlignment.start; | |
var _mainAxisSize = MainAxisSize.min; | |
MainAxisAlignment _mainAxisAlignmentFromIndex(int index) => switch (index) { | |
0 => MainAxisAlignment.start, | |
1 => MainAxisAlignment.end, | |
2 => MainAxisAlignment.center, | |
3 => MainAxisAlignment.spaceBetween, | |
4 => MainAxisAlignment.spaceAround, | |
5 => MainAxisAlignment.spaceEvenly, | |
_ => MainAxisAlignment.start, | |
}; | |
CrossAxisAlignment _crossAxisAlignmentFromIndex(int index) => switch (index) { | |
0 => CrossAxisAlignment.baseline, | |
1 => CrossAxisAlignment.start, | |
2 => CrossAxisAlignment.end, | |
3 => CrossAxisAlignment.center, | |
4 => CrossAxisAlignment.stretch, | |
_ => CrossAxisAlignment.start, | |
}; | |
void _updateLayout(int index) { | |
setState(() { | |
_isRow = index == 0; | |
}); | |
} | |
void _updateMainAxisAlignment(int index) { | |
setState(() { | |
_mainAxisAlignment = _mainAxisAlignmentFromIndex(index); | |
}); | |
} | |
void _updateCrossAxisAlignment(int index) { | |
setState(() { | |
_crossAxisAlignment = _crossAxisAlignmentFromIndex(index); | |
}); | |
} | |
void _updateMainAxisSize(int index) { | |
setState(() { | |
_mainAxisSize = index == 0 ? MainAxisSize.min : MainAxisSize.max; | |
}); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
body: Column( | |
children: [ | |
RowColumnLayoutAttributes( | |
onUpdateLayout: _updateLayout, | |
onUpdateMainAxisAlignment: _updateMainAxisAlignment, | |
onUpdateCrossAxisAlignment: _updateCrossAxisAlignment, | |
onUpdateMainAxisSize: _updateMainAxisSize, | |
), | |
Expanded( | |
child: ColoredBox( | |
color: Colors.yellow, | |
child: _isRow | |
? Row( | |
mainAxisAlignment: _mainAxisAlignment, | |
crossAxisAlignment: _crossAxisAlignment, | |
textBaseline: TextBaseline.alphabetic, | |
mainAxisSize: _mainAxisSize, | |
children: const [ | |
Icon(Icons.stars, size: 50.0), | |
Icon(Icons.stars, size: 100.0), | |
Icon(Icons.stars, size: 50.0), | |
], | |
) | |
: Column( | |
mainAxisAlignment: _mainAxisAlignment, | |
crossAxisAlignment: _crossAxisAlignment, | |
textBaseline: TextBaseline.alphabetic, | |
mainAxisSize: _mainAxisSize, | |
children: const [ | |
Icon(Icons.stars, size: 50.0), | |
Icon(Icons.stars, size: 100.0), | |
Icon(Icons.stars, size: 50.0), | |
], | |
), | |
), | |
), | |
], | |
), | |
); | |
} | |
} | |
class RowColumnLayoutAttributes extends StatelessWidget { | |
const RowColumnLayoutAttributes({ | |
super.key, | |
required this.onUpdateLayout, | |
required this.onUpdateMainAxisAlignment, | |
required this.onUpdateCrossAxisAlignment, | |
required this.onUpdateMainAxisSize, | |
}); | |
final ValueChanged<int> onUpdateLayout; | |
final ValueChanged<int> onUpdateMainAxisAlignment; | |
final ValueChanged<int> onUpdateCrossAxisAlignment; | |
final ValueChanged<int> onUpdateMainAxisSize; | |
@override | |
Widget build(BuildContext context) { | |
return ColoredBox( | |
color: Colors.orange, | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.spaceAround, | |
mainAxisSize: MainAxisSize.max, | |
children: [ | |
Expanded( | |
flex: 1, | |
child: Column( | |
children: <Widget>[ | |
LayoutAttributeSelector( | |
title: 'Layout', | |
values: const ['row', 'column'], | |
onIndexChanged: onUpdateLayout, | |
), | |
LayoutAttributeSelector( | |
title: 'Main Axis Size', | |
values: const ['min', 'max'], | |
onIndexChanged: onUpdateMainAxisSize, | |
), | |
], | |
), | |
), | |
Expanded( | |
flex: 1, | |
child: Column( | |
children: [ | |
LayoutAttributeSelector( | |
title: 'Main Axis Alignment', | |
values: const [ | |
'start', | |
'end', | |
'center', | |
'space\nbetween', | |
'space\naround', | |
'space\nevenly' | |
], | |
onIndexChanged: onUpdateMainAxisAlignment, | |
), | |
LayoutAttributeSelector( | |
title: 'Cross Axis Alignment', | |
values: const [ | |
'start', | |
'end', | |
'center', | |
'stretch', /*'baseline'*/ | |
], | |
onIndexChanged: onUpdateCrossAxisAlignment, | |
), | |
], | |
), | |
), | |
], | |
), | |
); | |
} | |
} | |
class LayoutAttributeSelector extends StatefulWidget { | |
const LayoutAttributeSelector({ | |
super.key, | |
required this.title, | |
required this.values, | |
this.disabled = false, | |
required this.onIndexChanged, | |
}); | |
final String title; | |
final List<String> values; | |
final bool disabled; | |
final ValueChanged<int> onIndexChanged; | |
@override | |
State<StatefulWidget> createState() => LayoutAttributeSelectorState(); | |
} | |
class LayoutAttributeSelectorState extends State<LayoutAttributeSelector> { | |
var _valueIndex = 0; | |
void _next() { | |
_valueIndex = _valueIndex + 1 < widget.values.length ? _valueIndex + 1 : 0; | |
_update(); | |
} | |
void _previous() { | |
_valueIndex = _valueIndex > 0 ? _valueIndex - 1 : widget.values.length - 1; | |
_update(); | |
} | |
void _update() { | |
widget.onIndexChanged(_valueIndex); | |
setState(() {}); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Column(children: [ | |
Text(widget.title), | |
Row( | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: <Widget>[ | |
IconButton( | |
padding: const EdgeInsets.all(4.0), | |
icon: const Icon(Icons.arrow_back), | |
onPressed: widget.disabled ? null : _previous, | |
), | |
Text( | |
widget.values[_valueIndex], | |
maxLines: 2, | |
textAlign: TextAlign.center, | |
style: TextStyle( | |
fontWeight: FontWeight.w700, | |
color: widget.disabled ? Colors.black26 : Colors.black87, | |
), | |
), | |
IconButton( | |
padding: const EdgeInsets.all(4.0), | |
icon: const Icon(Icons.arrow_forward), | |
onPressed: widget.disabled ? null : _next, | |
), | |
], | |
), | |
const Divider(color: Colors.black54, height: 1), | |
]); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment