Sakina Abbas (@sakin8tor) header
Sakina Abbas (@sakin8tor) profile picture

Sakina Abbas

@sakin8tor

CEO of @reactreeLabs & @GoogleDevExpert Flutter Undying love for Flutter, cats, anime & video games. ♥️

 Pakistan
reactree.com
Joined March 2020
  • Tweets405
  • Following223
  • Followers1.3K
69Media
Photo by Sakina Abbas (@sakin8tor)Photo by Sakina Abbas (@sakin8tor)Photo by Sakina Abbas (@sakin8tor)Photo by Sakina Abbas (@sakin8tor)Photo by Sakina Abbas (@sakin8tor)Photo by Sakina Abbas (@sakin8tor)Photo by Sakina Abbas (@sakin8tor)Photo by Sakina Abbas (@sakin8tor)Photo by Sakina Abbas (@sakin8tor)Photo by Sakina Abbas (@sakin8tor)
A year ago, I used to follow fellow developers in an attempt to learn sth new. Today, I'm excited to announce that I'm a @GoogleDevExpert for Flutter, & the first female GDE for Flutter in Pakistan! 🥳🎉 Thank you to everyone who has supported me; many exciting things to come!
54
36
9
511
buyMeAcoffee redd.it/1m1jzf0
Image from Programmer Humor (@PR0GRAMMERHUM0R)
15
191
10
2,030
60,753
Sakina Abbas retweeted
Lucky (@_crazelu) profile picture
Lucky
@_crazelu15 Apr 2024
I've been working on a Flutter package for syncing subtitles and lyrics with video and audio playbacks github.com/Crazelu/subtitle_… I've learnt a lot about WebVTT, SubRip and LRC formats working on this.
6
30
100
4,579
Flutter Tip - Day 20: If you want to prevent others from snooping into your #flutter app (or a part of it), You can use local_auth to perform biometric authentication! You can do this on the app's startup or just before accessing any feature you want to control the access to🛑
Protect your Flutter app's access with local_auth. You can use this to add a layer of protection for your app, so not everyone can access it directly. You can also use it to perform quick login which doesn't require for credentials to be manually entered every time, like in banking apps.

ALT Protect your Flutter app's access with local_auth. You can use this to add a layer of protection for your app, so not everyone can access it directly. You can also use it to perform quick login which doesn't require for credentials to be manually entered every time, like in banking apps.

2
9
59
2,650
Flutter Tip - Day 19: If you want to store sensitive data in your #flutter app, such as app credentials, auth tokens, etc, how can you ensure that this data is secure? Solution: Use flutter_secure_storage to securely store data that is only accessible via cryptographic keys!🔑
Secure local storage using flutter_secure_storage or Hive, if your app already uses Hive for local storage

ALT Secure local storage using flutter_secure_storage or Hive, if your app already uses Hive for local storage

2
12
76
3,470
Flutter Tip - Day 18: Have you ever wondered if you could create a #flutter project based on your own custom template instead of the standard counter app? Mason makes that achievable! 😁 It allows you to generate and re-use files based on your custom variables. This means that you don't have to manually copy-paste redundant files, models and services everytime you create a new project! 🥳
Create Flutter projects based on your own custom templates and boilerplate code instead of the standard counter app using Mason

ALT Create Flutter projects based on your own custom templates and boilerplate code instead of the standard counter app using Mason

2
2
33
2,178
Here is a great tutorial to help you get started with Mason: blog.codemagic.io/mason-cli/ You can also use pre-made Bricks from brickhub.dev/ 🔥
Using Mason and bricks in your Flutter app: Beginner’s guide | Codemagic Blog

Using Mason and bricks in your Flutter app: Beginner’s guide | Codemagic Blog

In this tutorial, we will discuss Mason, the Dart package that allows you to create files and directories based on templates.

blog.codemagic.io
4
413
Flutter Tip - Day 17: Have you ever wondered if there was a way to re-use the boilerplate code for various controllers, streams or just other functionality in your #flutter app? Use flutter_hooks!🪝 A hook contains the boilerplate code for a specific functionality, so you don't need to worry about writing the same redundant code for initialising a controller, disposing it off, updating its value if there's a change in dependency, etc for every widget where needed. flutter_hooks already supports a large number of commonly used hooks, but you can always create your own custom hooks too.
Re-use redundant code between widgets with flutter_hooks. Hooks contain boilerplate code for a specific functionality, e.g. animation controller, so you don't have to write the same boilerplate code again and again, but just use useAnimationController hook, as all this logic is already present within this hook per se.

ALT Re-use redundant code between widgets with flutter_hooks. Hooks contain boilerplate code for a specific functionality, e.g. animation controller, so you don't have to write the same boilerplate code again and again, but just use useAnimationController hook, as all this logic is already present within this hook per se.

1
3
45
2,601
Flutter Tip - Day 16: If you want to use a separate database or make API requests to a different server for the same #flutter app in different environments, e.g. staging, production etc.: You can set up flavors for each of these environments! No more switching b/w branches for a separate build config.🙅‍♀️
Seamlessly set up separate environments or build configurations for your Flutter app's staging, production, free or paid versions with flavors.

ALT Seamlessly set up separate environments or build configurations for your Flutter app's staging, production, free or paid versions with flavors.

5
10
1
67
4,569
Flutter Tip - Day 15: You can inspect your #flutter app's memory usage and leaks with DevTools! 🛠️ Not only will it show you memory usage for the classes from: 1. Dart runtime 2. the sdk itself 3. dependencies But you can also see memory usage of your own custom classes too!
Inspect Memory Leaks and usage with DevTools in your Flutter app

ALT Inspect Memory Leaks and usage with DevTools in your Flutter app

1
3
55
2,103
Flutter Tip - Day 14: If your #flutter app has a BottomNavigationBar, have you ever wondered how to perform nested routing such that the nav bar always remains accessible? (similar to Twitter, LinkedIn & other apps) Here's how you can achieve this with GoRouter's ShellRoute!🛣️
Perform nested routing in BottomNavigationBar with GoRouter. This will persist your BottomNavigationBar and push new routes within the current route, similar to the Twitter and LinkedIn apps

ALT Perform nested routing in BottomNavigationBar with GoRouter. This will persist your BottomNavigationBar and push new routes within the current route, similar to the Twitter and LinkedIn apps

5
16
1
137
7,406
Flutter Tip - Day 13: If you're displaying images or even svg icons in your #flutter app, you must have noticed that rendering them often takes some time. This results in a bad user experience. 👎 The good news is you can precache these images/icons to help load them faster!
Precache images to fasten and optimise image rendering in flutter apps

ALT Precache images to fasten and optimise image rendering in flutter apps

2
8
89
5,368
Day 7 of #fluttershare24 You know how when you're bored, you just start mindlessly scribbling in a notebook? When I'm bored, I start experimenting with the basic concepts of #flutter and see how things turn out. Today, I guess I created a screen saver with AnimatedContainer xD
16
964
Flutter Tip - Day 12: If you perform a time intensive task in your #flutter app, e.g. process a large file and display its content on the screen, it can block the main UI thread and cause janks. You can resolve this by performing this task in parallel with Isolates!
Perform time intensive tasks in parallel with Flutter Isolates

ALT Perform time intensive tasks in parallel with Flutter Isolates

2
8
54
2,427
Day 6 of #fluttershare24 So I tried making a simulation of the famous bouncing DVD logo.... 👀 P.s. No third party packages were used - only a timer, CustomPaint and some math for collisions and speed!
6
2
59
2,675
Flutter Tip - Day 11: If you want to add pagination to a sliver-based screen in your #flutter app that is using a NestedScrollView or a CustomScrollView: Use NotificationListener! If you're curious why ScrollController won't work, find out here: reactree.com/pagination-in-n…
Add pagination in sliver based screens using NestedScrollView or CustomScrollView - with NotificationListener

ALT Add pagination in sliver based screens using NestedScrollView or CustomScrollView - with NotificationListener

1
5
55
2,004
Day 5 of #fluttershare24 One of the most underrated features from Dart Devtools has got to be the Raster Stats Tab located under the Performance tab. I use it whenever I want to get a quick look at expensive widget builds that are taking the most time in my #flutter app. It's easy: 1. Go to the screen in your app which is showing janks on the raster thread 2. Open the Render Stats tab, click on "Take Snapshot" 3. You will see different layers along with their rendering time, respectively. 4. Click on the layer you want to investigate that is taking too much time getting rendered. 5. This will show you that widget, and you can then navigate its code to investigate further. 🙌
Flutter DevTools > Raster Stats tab

ALT Flutter DevTools > Raster Stats tab

5
32
1,654
Flutter Tip - Day 10: If your #flutter app is using a StreamBuilder which will display unique values at all times, e.g. in a favourite products screen, you can avoid unnecessary widget rebuilds with stream.distinct
Optimise StreamBuilder for unique values with stream.distinct

ALT Optimise StreamBuilder for unique values with stream.distinct

1
4
43
1,514
Day 4 of #fluttershare24 Whenever a startup approaches me for building their MVP, I almost always propose #flutter to them - even if it's for a single platform! Here's my top 3 reasons why: 1. Rapid development: With the extensive and highly customisable widget catalog, building even the most complicated of UI/UX is super fast and easy ⚡️ 2. Performance: All the code which we write in Dart is compiled to the platform's native code, so the app is smooth and seamless to use - even with complex animations and graphics! Fun fact: Many people thought that the Coffee Wagera app was built with native android & iOS, just because it was super smooth to use! 🙊 3. Cost effective: Even if you're building your MVP for mobile (albeit both, android & iOS), only a single development team is needed - thanks to a single codebase. 💰 I personally come from a background of native android. Throughout my mobile development journey, I've tried other cross platform frameworks like ionic and React Native too, but IMO, their experience is nowhere near Flutter's tbh. 💙
2
18
1,291
Flutter Tip - Day 9: You can listen to your #flutter app's lifecycle events without using the WidgetsBindingObserver. Simply use the AppLifecycleListener wherever you want to listen to these events in your app! The best part? You can listen to the changes b/w the states too!
Listen to your Flutter app's lifecycle events with AppLifecycleListener

ALT Listen to your Flutter app's lifecycle events with AppLifecycleListener

1
11
70
3,001
Day 3 of #fluttershare24 I like to keep my #flutter skills updated by studying code of publicly available repositories from time to time. These days, I'm studying code of the Wonderous app built with Flutter! In particular, I'm exploring how images and their memory are being managed 🤔
Image from Sakina Abbas (@sakin8tor)
1
1
21
1,639
Load more