๐ฑ 12 / 100 Days Of Flutter, Kate's edition โ platform-specific customisations, SizeTransition and Flutter 3
Hi, Hashnode community and welcome to day 12 of my Flutter challenge!
I clearly failed to provide updates every day but I'm not giving up ๐
Since my last post ๐ฑ 11 / 100 Days Of Flutter, Kate's edition โ scared by animations and finished my first app I finished a codelab Building beautiful UIs with Flutter and refreshed my knowledge about widgets and lists. A couple of highlights from the codelab:
Platform-specific customisations in Flutter
Android and iOS are very different platforms. By default, Flutter UI leans towards Android UX. To improve that, we conditionally add platform-specific styling.
In the snippet below, I provide different theme configurations for the entire app based on the target platform.
return MaterialApp(
theme: defaultTargetPlatform == TargetPlatform.iOS ? kIOSTheme : kDefaultTheme,
...
)
All available Flutter platforms are Android, iOS, Linux, macOS, Windows, and Fuchsia (source).
By the way, a variable started with k
is a global constant per Flutter code style convention.
More animations with SizeTransition
I created a simple animation for a chat UI using SizeTransition
. As far as I can see, configuring animation consists of 3 parts:
1) Find a ticker that will provide a "clock" for our animation. So far I've seen two options: TickerProviderStateMixin
and SingleTickerProviderStateMixin
.
class _ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
2) Create an AnimationController
as it will be required by an animation widget later
_controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 700)
),
3) Pick an animation and pass the animation controller to it
In case of size transition, I wrapped a widget that I want to animate in SizeTransition
.
SizeTransition(
sizeFactor:
CurvedAnimation(parent: animationController, curve: Curves.easeOut),
child: ...
),
4) Manipulate the animation using the controller
AnimationController
provides methods such as forward
, reverse()
, fling()
to make control the animation.
On a screenshot below, a new chat message is animated when added to the list.
Flutter 3
News are full of excitement about Flutter 3. I'm very happy to start learning the framework when a new major version is just released. Hopefully, I'll become a Flutter 3 expert this year ๐
I'm watching a Google I/O playlist about new Flutter features: youtube.com/playlist?list=PLjxrf2q8roU1kHju..
The main highlight for me so far is better support of various platforms.
Widget of the day - Expanded
Expanded
is a somewhat magic widget that makes a child look good in the grid by forcing it to take up all parent's space.
Summary
I really enjoy learning Flutter and keep returning to it when I have a moment. My next step is the four MDC codelabs. Stay tuned!