๐Ÿ“ฑ 12 / 100 Days Of Flutter, Kate's edition โ€” platform-specific customisations, SizeTransition and Flutter 3

๐Ÿ“ฑ 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

Screenshot 2022-05-17 at 09.40.16.png

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.

Screenshot 2022-05-17 at 09.40.16.png

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!

ย