📱 11 / 100 Days Of Flutter, Kate's edition — scared by animations and finished my first app

📱 11 / 100 Days Of Flutter, Kate's edition — scared by animations and finished my first app

Hi, Hashnode community and welcome to day 11 of my Flutter challenge! 👋

I'm coming back to my blog after a short break. Today I have a big update on my progress.

Scary animations

Why did I have a break after a successful 10 days sprint? I was frustrated by a backdrop animation task in my Udacity course and it took me a while to pass it.

The task was to build backdrop navigation instead of a standard one. See below how it looks:

backdrop.gif

I was given a starter file backdrop.dart with ~300 lines of unknown code. The file contained so many things that I didn't know. It pissed me off.

Slowly, I was making my progress and learning more tricks in Android Studio & Flutter Dev Tools.

Cool Flutter Dev Tools feature - Slow animations

backdrop.gif

Open full Flutter Dev Tools in the browser Screenshot 2022-05-08 at 20.36.47.png

Network logging in Flutter Dev Tools

Screenshot 2022-05-08 at 17.00.26.png

Today I've finally overcome my writer's block and have finished the course. It's time to share my learnings and move on!

What I learned from the beginner Flutter course on Udacity

Soon after starting my journey (on day 3) I accidentally landed on a free course from Google developers. The course was already outdated and archived but I managed to enrol and finish it.

My overall experience was very positive and I may pick another (more advanced course) after a short break.

This is what I learned so far:

✅ Flutter foundations
🔥 Android Studio & Flutter Dev Tools basics
✅ Dart in practice
✅ Layout basics for different device types
✅ Asset management basics
✅ Stateless & stateful widgets and their keys
✅ Form basics
✅ Simple API calls handling
💩 Animations basics

Compared to my previous experience with React Native (and with some web technologies), Flutter developer experience is exceptionally good, thanks to Android Studio, Flutter Dev Tools and great documentation and official learning materials.

What is still unclear:

⁉️ How to release an app in mobile stores
⁉️ How to build for web
⁉️ How to build for desktop
⁉️ How to handle complex API integrations
⁉️ How to master animations and transitions if I'm not a designer
⁉️ How to persist data
⁉️ How to secure data
⁉️ Do I need to learn native mobile development to build something real?

That's a lot to cover, but the foundation has been laid, thanks to the free Udacity course (unfortunately, it has been archived now).

What's next:

I plan to continue with Google codelabs for Flutter: docs.flutter.dev/codelabs
The first one on my list is “Building beautiful UIs with Flutter”. Sooner or later, I will need to learn more about animations, too!

Widget of the day - AnimatedIcon

You've already noticed how excited I am about animations, so today's widget is AnimatedIcon.

Flutter comes with a dozen of popular animated icons such as play/pause, menu/close, etc.

If I need a tiny animation for a standard operation like opening and closing the menu, I can use AnimatedIcon instead of building my own thing. Great stuff!

Summary

After a couple of quiet days, I'm back with a big update. I finished my first Flutter course, learned a lot and am happy to dive deeper. For instance, after writing a lot of React code I wondered how Flutter's setState() function works. Luckily, there is a great write up on the topic: iiro.dev/set-state