DEV Community: asuna24

Back to basic : Flutter widget lifecycle

asuna24 — Wed, 06 Mar 2024 16:51:33 +0000

Flutter is a cross platform framework to build seamless user interface across all platforms, from web to mobile apps. Flutter introduces Widget as its main UI builder, we are living in the world of digital and reactive apps, so we need to understand how does Flutter app manage its Widget lifecycle.

Quick review : Flutter's Widget

Based on Flutter official documentation, "Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state."

So Widget is simply the object that build every piece of UI for Flutter. Each of widgets can have their own configuration and state, so if we build a page that consists of more than one widget, every widget will have their own lifecycle.

Widget Lifecycle

Here are the order of Flutter widget's lifecycle :

1. Initialization

This is the state where Flutter widget constructor is called. The object of the widget and state created. After the widget object is created, then it will call 2 kinds of framework functions, initState() and didChangeDependencies(). Details will be explained after this section.

2. Build

After state of the widget initialized and the context is already exists, then this time Flutter widget will build the UI. build(BuildContext context) framework function will be called here. The output of this step is the UI will be shown in our end user app.

3. State changes and rebuild

We know that the best app is an app that users can interact with. Flutter stateful widget have defined state as a mutable value that can be changed by app's/user's behavior/interaction. This step, Flutter will use setState() framework function to change the state. After the state changes, the widget will be rebuilt with diffing algorithm to optimize build process.

4. Deactivate

Deactivate is the state where a widget is removed from widget tree temporarily or permanently. For example, if we have a stream where at some point we will destroy that widget but we'll need to use it again later.

5. Disposal

Disposal is the state where a widget is removed from widget tree permanently.

Widget Lifecycle Framework Functions

createState()

This method will create the State object under the widget. Usually this method exists on the widget if we create a stateful widget.

class StateLifecycleExample extends StatefulWidget {
  const StateLifecycleExample({super.key});

  @override
  State<StateLifecycleExample> createState() => _StateLifecycleExampleState();
}

initState()

This method will be called only once when the state object is created for the first time. This method is executed before the build() function called. So we could say that this method had no access to widget's BuildContext. Usually we use this method to initialize some state's initial value or call some non-context related function to make sure those function ran on widget initialization process.

late int a,b,c;

@override
void initState() {
  a = <something manipulated>
  b = <something manipulated>
  c = <something manipulated>
  super.initState();
}

didChangeDependencies()

This method will be called after initState(). We could access BuildContext here. Also, this method can be called multiple times based on dependencies that changed or object changes inside the widget. For example, if in one page we opened and closed a keyboard, then it would be counted as widget changed, so this method will be called.

@override
void didChangeDependencies() {
  print('this is didChangeDependencies, context : ${context} already exists here');
  super.didChangeDependencies();
}

setState()

This method used to change state value and refresh the widget to show latest state of the widget. Fun fact, we don't have to put the changed value inside setState's callback function. So they would produce the same result. Why ? because setState will always rebuild the widget no matter how the callback function is.

a = 10;
setState((){})

and

setState((){
  a = 10
});

deactivate()

Just like the definition above, "Deactivate is the state where a widget is removed from widget tree temporarily or permanently. For example, if we have a stream where at some point we will destroy that widget but we'll need to use it again later."

dispose()

A bit different with deactivate, dispose() will be called only when the widget is removed from widget tree.

On that, we can see that deactivate and dispose are talking about removing widget from widget tree. Deactivate called when a widget removed temporary/permanently. But dispose called when widget removed permanently only. So if a widget is removed, deactivate and dispose will be called together.

Flutter/Dart tips : What is Mixin ? is it really helpful or more like useless ?

asuna24 — Sun, 03 Mar 2024 16:11:37 +0000

Explanation

For those who already learned about Object Oriented Programming must have heard about "inheritance". Where inheritance defined as "a mechanism that allows a class to inherit properties and behaviors from another class".
Example :

In the example above, we have 1 Vehicle parent class which had 2 child classes, SUV and Sedan. Each of them have 2 kinds of car and each of them had some shared features (turbo usage, rear camera, and hybrid system).

OOP concept teaches us to achieve these kind of needs we can just create Turbo, Camera, and Hybrid class and implement their attributes and functions. Then each of those classes will be inherited based on class who needs that functionality.

But in Dart, every class is limited only able to inherit to 1 class. For example, Civid which already inherited Sedan class cannot inherit Turbo and Camera class to fulfill their features. Or, we just implement turbo, camera, and hybrid system inside all classes that had those features. But eventually this approach can be so frustating to manage because of there are many code duplications for the same functionality. Here comes the usage of Dart's Mixin.

Mixin enables us to create a way to share reusable code between classes but not to inherit them. So Mixin is not a class, its just a way to implement things. It has no constructor, or even attributes. It consists of reusable method only.

How to create a mixin ?

If we want to use inheritance, we can use extends in the class definition.

class Sedan extends Vehicle {...}

If we want to use mixin, we need to create them by using mixin key without any constructor. Just define the method there. To use mixin, we need to put them on our class definition.

// Create mixin
mixin Turbo {
  void useTurbo() {
    print('I\'m using turbo, speed increased');
  }

  void stopTurbo() {
    print('I\'m stopping the turbo');
  }
}

mixin RearCamera {
  void useRearCamera() {
    print('I\'m using rear camera');
  }

  void turnOffCamera() {
    print('I\'m turning off the camera');
  }
}

After defining our mixin, we need to create the class and use key with after the class definition.

class A with Turbo, RearCamera { ... }

Example

class Vehicle {
  final int numberOfWheels;
  final int maxSpeed;
  final String color;

  Vehicle({
    required this.numberOfWheels,
    required this.maxSpeed,
    required this.color,
  });

  void start() {
    print('I\'m starting');
  }

  void drive() {
    print('I\'m driving');
  }
}

class Sedan extends Vehicle {
  final bool isHatchback;

  Sedan({
    required super.numberOfWheels,
    required super.maxSpeed,
    required super.color,
    required this.isHatchback,
  }) : super();
}

mixin Turbo {
  void useTurbo() {
    print('I\'m using turbo, speed increased');
  }

  void stopTurbo() {
    print('I\'m stopping the turbo');
  }
}

mixin RearCamera {
  void useRearCamera() {
    print('I\'m using rear camera');
  }

  void turnOffCamera() {
    print('I\'m turning off the camera');
  }
}

mixin HybridSystem {
  void useElectricEnergy() {
    print('I\'m using hybrid system');
  }

  void stopElectricEnergy() {
    print('I\'m stopping the hybrid system');
  }
}

Then, we create the grandchild classes here using inheritance and mixing :

class Civid extends Sedan with Turbo, RearCamera {
  Civid({
    required super.numberOfWheels,
    required super.maxSpeed,
    required super.color,
    required super.isHatchback,
  }) : super();
}

class Innovi extends SUV with Turbo, RearCamera, HybridSystem {
  Innovi({
    required super.numberOfWheels,
    required super.maxSpeed,
    required super.color,
    required super.isFourWheelDrive,
  }) : super();
}

By defining classes above, we can see that Civid inherits Sedan but since Civid had Turbo and RearCamera feature, then it uses those mixin. The same applied to Innovi which had Turbo, RearCamera, and HybridSystem. By using this approach, we are reducing code duplication for the exact same functionality.

void main() {
  final Civid cividObject = Civid(
    numberOfWheels: 4,
    maxSpeed: 200,
    color: 'blue',
    isHatchback: true,
  );
  // Civid can use turbo and rear camera only
  cividObject.useTurbo();
  cividObject.useRearCamera();

  final Innovi innoviObject = Innovi(
    numberOfWheels: 2,
    maxSpeed: 200,
    color: 'red',
    isFourWheelDrive: true,
  );
  // Innovi can use turbo, rear camera, and hybrid system
  innoviObject.useTurbo();
  innoviObject.useRearCamera();
  innoviObject.useElectricEnergy();
  innoviObject.stopElectricEnergy();
}

Conclusion

Dart as an Object Oriented Programming language enabled us to use inheritance with only 1 class inherited. What if we need more functionality for our class but we're afraid to create many code duplication for the same usage for a class ? Mixin is the answer. Mixin could be super helpful if we have some reusable code that can be used across classes that need the exact same functionality.

Thank you!

Flutter/Dart Tips - Enhanced enums

asuna24 — Mon, 26 Feb 2024 18:16:18 +0000

Have you ever used enum before ? Enum defined as "a type of data where only a set of predefined values exist". In Dart, enum is a special kind of class that used to represent constant values.

For example, we want to have predefined constant value that represent something. Lets say we want to have a type to define rainbow color.. as we know, rainbow colors consist of red, orange, yellow, green, blue, indigo, and violet. Each of these colors can have its Color value, label, and index.

With normal enum type, we can create something like this :

enum RainbowColor {
  red, 
  orange, 
  yellow, 
  green, 
  blue, 
  indigo, 
  violet
}

extension RainbowColorExt on RainbowColor {
  static Map<RainbowColor, Color> mapRainbowToColor = {
    RainbowColor.red: Colors.red,
    RainbowColor.orange: Colors.orange,
    RainbowColor.yellow: Colors.yellow,
    RainbowColor.green: Colors.green,
    RainbowColor.blue: Colors.blue,
    RainbowColor.indigo: Colors.indigo,
    RainbowColor.violet: Colors.purple
  };

  Color getColor() {
    return mapRainbowToColor[this]!;
  }

  static Map<RainbowColor, String> mapRainbowToLabel = {
    RainbowColor.red: 'Red',
    RainbowColor.orange: 'Orange',
    RainbowColor.yellow: 'Yellow',
    RainbowColor.green: 'Green',
    RainbowColor.blue: 'Blue',
    RainbowColor.indigo: 'Indigo',
    RainbowColor.violet: 'Violet'
  };

  String getLabel() {
    return mapRainbowToLabel[this]!;
  }
}

Here, we created RainbowColor enum with its defined extension and functions. To receive the label and color, we can do something like this :

const RainbowColor red = RainbowColor.red;
final String redLabel = red.getLabel();
final Color redColor = red.getColor();

But you see that we need to connect our enum by using extension to get its corresponding label and color.

Since Dart 2.17, they showed us new way to provide something like above.. by using Enhanced Enum.

Enhanced Enum

Dart also allows enum declarations to declare classes with fields, methods, and const constructors which are limited to a fixed number of known constant instances.

This mean that we can create an enum to just like creating a special class that consist of some constants inside. See below :

enum RainbowColor {
  red(Colors.red, 'Red'),
  orange(Colors.orange, 'Orange'),
  yellow(Colors.yellow, 'Yellow'),
  green(Colors.green, 'Green'),
  blue(Colors.blue, 'Blue'),
  indigo(Colors.indigo, 'Indigo'),
  violet(Colors.purple, 'Violet');

  const RainbowColor(Color this.color, String this.label);
  final Color color;
  final String label;
}

to get corresponding color and label, we can just use this :

const RainbowColor red = RainbowColor.red;
final Color redColor = red.color;
final String redLabel = red.label;

Other than that, we also can create a function for this specific enum :

enum RainbowColor {
  red(Colors.red, 'Red'),
  orange(Colors.orange, 'Orange'),
  yellow(Colors.yellow, 'Yellow'),
  green(Colors.green, 'Green'),
  blue(Colors.blue, 'Blue'),
  indigo(Colors.indigo, 'Indigo'),
  violet(Colors.purple, 'Violet');

  const RainbowColor(Color this.color, String this.label);
  final Color color;
  final String label;

  // New Function
  String toString() {
    return 'This color is $label';
  }
}

const RainbowColor red = RainbowColor.red;
final Color redColor = red.color;
final String redLabel = red.label;

// return : "This color is Red"
final String result = red.toString();

This update really helped us to reduce our code and simplify our way to create enum for our Flutter/Dart App.

Conclusion

Enum helps us to predefine constant values to represent something in our app. Previously, to create some functionality for our enum we need to create an extension with longer way to achieve our needs. Since Dart 2.17, Dart introduced Enhanced Enum which can help us to reduce our code to define enum with its functionality. Just like how we can define class with attributes and functions.

Cheers!

Does Creating a unit test for Private Functions worth it ?

asuna24 — Fri, 23 Feb 2024 19:02:24 +0000

Unit tests are quite mandatory nowadays despite of how every engineers thought about it. It could improve the confidence level of a company about their software/feature quality even though sometimes quite painful for engineers to create a good unit tests.

After working on so many projects that included unit tests inside, I literally created unit tests for any function I had created. Starting from public functions and also private functions. But not all programming language allow us to create unit test for private functions. One that I've found that we can create private function unit test is Golang, and most of other OOP language don't allow us to create unit test for private function. Recently, I questioned, why is that ? and how should we test that private function ?

Visible For Testing

I just found out that some programming language enables us to give an annotation that tells "theres a function that exists only for testing". Which we can use to test private function in OOP language. Example :

#### Dart

class GeneralUtilities {
  int res = 0;

  void foo() {
    _add(1);
  }

  void _add(int value) {
    res += value;
  }

  @visibleForTesting
  int getPreviousNumber() {
    return _getPreviousNumber();
  }

  int _getPreviousNumber() {
    return res - 1;
  }
}

This example above enables us to call getPreviousNumber() outside, but we will get a warning which said The member 'getPreviousNumber' can only be used within '<package name>' or a test.

Therefore, we can use this as our way to create a unit test for private function.

void main() {
  test('GeneralUtilities.getPreviousNumber() tests', () {
    final GeneralUtilities gu = GeneralUtilities();
    gu.foo();
    final int res = gu.getPreviousNumber();

    ## returns 0
    expect(res, 0);
  });
}

But is that worth it ?

After some comparison, I would say that this is not worth it. Why ?

Being in a big-scale software codebase is pretty though, we should really focus on what matters. So what really matters about all of this functions ? The most important thing is, does this utility function works as it needed or not ? Does the client who would use this function can get the right answer/data or not ? So instead of focusing ourselves on testing private functions, we should focus on testing our public function that will use our private function also. By focusing on public function unit tests, we can focus on what matters and still creating a good quality software.
Using @visibleForTesting would make our class dirty. Because there are some functions that exists only for testing, and that really doesn't make sense. Functions inside class should do something about that class, not fulfilling the needs for unit testing. Unit testing should be done based on the contract of that class.
Sometimes I feel that creating a unit test for private functions are needed when the size of a public function is very big. Lets say we had 3-5 if conditions inside a public function and each condition will call another private function. It really sucks right to create a super big unit tests for that public function ? But in my opinion, a good public function is a function that only does one thing, not many things together. So instead of thinking how we should create the unit test for that function, we should think first, does this function accept Single Responsibility Principle or not ? Does this function built in the right way ?

Conclusion

Unit tests are needed. We should focus on what matters, instead of trying to create a unit test for private function, try to create a simple public function that calls private function which not more than 1 responsibility.

Journey to Astro - #1 Pre-Condition

asuna24 — Sat, 30 Sep 2023 14:18:19 +0000

Saya sudah hampir 6 bulan mendalami Next.js yang berbasis React.js sebagai library utama dan didominasi oleh kekuatan Javascript didalamnya. Namun saat ini saya sedang mengeksplorasi bagaimana Astro bekerja, karena dari yang saya baca, Astro mampu memberikan performa yang jauh lebih baik dari framework web development manapun.

Melalui postingan berkala ini, saya akan membagikan pengalaman saya dalam mendalami Astro sekaligus memberikan sedikit perbandingan dengan Next.js sebagai framework yang saat ini menjadi acuan utama para web developer.

!!! Quick review, website terdiri atas 3 komponen utama :

HTML : Struktur halaman / DOM (Document Object Model)
CSS : Styling DOM
Javascript : Membangun interaksi/halaman dinamis
React.js : salah satu library terkenal dengan berbasis component (https://react.dev/)
Next.js : salah satu framework web development yang sedang naik daun (https://nextjs.org/)

Bagaimana React.js menampilkan sebuah webpage ?

Proses utamanya terdiri atas 2 tahap, yakni Render & Hydration.

Render adalah proses dimana React akan membangun DOM structure website anda sehingga anda sudah bisa melihat hasil akhir web nya secara tampilan namun belum bisa dilakukan interaksi apapun.
Hydration yaitu proses dimana React akan mencari DOM yang perlu dipasangkan Javascript untuk membangun interaksi yang dinamis.

Kondisi setelah Render :

Kondisi setelah Hydration :

Kesimpulannya adalah bahwa React.js secara default akan melakukan proses Hydration, dan di Next.js proses Hydration ini pasti dilakukan di level halaman setiap mau menampilkan sebuah webpage.

"Wah" jadi agak lemot dong ya karena ada 2 proses ini ?

Secara user menurut saya 2 hal ini tidak akan begitu terlihat.. hanya akan terlihat apabila memang halaman sebuah website menggunakan Javascript yang berlebihan. Contohnya mungkin website berbasis wordpress, atau web lain yang interaksinya kompleks & banyak hal yang dinamis disana.

Lalu bagaimana solusinya ? Disinilah alasan mengapa Astro hadir. Astro menawarkan berbagai efisiensi yang bisa dilakukan untuk menghindari rendering javascript yang tidak dibutuhkan. Berikut adalah beberapa klaim mereka :

Melalui postingan berkala ini saya akan menguak apakah memang Astro memiliki performa sesuai dengan apa yang sudah mereka klaim.

Mari kita lanjut ke part 2 :D

Thank You~

Yumna Pratista Tastaftian
Product Engineer, Indonesia

ref :
https://docs.astro.build/en/concepts/why-astro/
https://softwaremill.com/astro-island-architecture-demystified/
https://docs.astro.build/en/concepts/why-astro/