Created
September 20, 2022 14:40
-
-
Save pratamatama/74d547b6fc7e7f745cad73bff2cf25bd to your computer and use it in GitHub Desktop.
ScaleTransition looks like as it was sliding from right to left
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'; | |
const Color darkBlue = Color.fromARGB(255, 18, 32, 47); | |
void main() { | |
runApp(const MyApp()); | |
} | |
class MyApp extends StatefulWidget { | |
const MyApp({super.key}); | |
@override | |
State<MyApp> createState() => _MyAppState(); | |
} | |
class _MyAppState extends State<MyApp> { | |
bool _active = false; | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
theme: ThemeData.dark().copyWith( | |
scaffoldBackgroundColor: darkBlue, | |
), | |
debugShowCheckedModeBanner: false, | |
home: Scaffold( | |
body: Center( | |
child: SwitchingWidget(active: _active), | |
), | |
floatingActionButton: FloatingActionButton( | |
onPressed: _toggle, | |
child: const Icon(Icons.check) | |
), | |
), | |
); | |
} | |
void _toggle() { | |
setState(() { | |
_active = !_active; | |
}); | |
} | |
} | |
class SwitchingWidget extends StatefulWidget { | |
const SwitchingWidget({super.key, this.active = false}); | |
final bool active; | |
@override | |
State<SwitchingWidget> createState() => _SwitchingWidgetState(); | |
} | |
class _SwitchingWidgetState extends State<SwitchingWidget> { | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
color: Colors.red, | |
child: AnimatedSwitcher( | |
duration: const Duration(milliseconds: 200), | |
transitionBuilder: (child, animation) { | |
return ScaleTransition(scale: animation, child: child); | |
}, | |
child: widget.active | |
? _buildLeftAlignedListTile() | |
: _buildRightAlignedListTile(), | |
), | |
); | |
} | |
Widget _buildLeftAlignedListTile() { | |
return const ListTile( | |
key: ValueKey(1), | |
leading: SizedBox( | |
width: 20, | |
height: 20, | |
child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white), | |
), | |
title: Text( | |
'Left aligned', | |
style: TextStyle(color: Colors.white), | |
), | |
); | |
} | |
Widget _buildRightAlignedListTile() { | |
return const ListTile( | |
key: ValueKey(2), | |
title: Text( | |
'Right aligned', | |
textAlign: TextAlign.right, | |
style: TextStyle(color: Colors.white), | |
), | |
); | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment