Rafael Delos Santos

Simpler and Better Flutter State Management with Cubit

2024-04-24T00:00:00+00:00

In this article, we will learn how to use Cubit</code> to cleanly organise our codebase to be more readable, scalable, and testable. This is also one of the better ways in Flutter to separate the UI logic and business logic.</p>

Note that Cubit</code> is only a piece of a bigger package called Bloc</code> that provides a complete state management solution for Dart</code> and Flutter</code>.</p>

Introduction</h1>
Why do we need to handle states?</h2>
State management and app architecture in Flutter has been and still is an on-going hot topic across different developers.  Flutter developers have been given many options on which one to learn and use to start developing apps with.</p>
It is important to use state management because each application needs to persist information and update the view with it. Without states (or technically, just one state), apps will look static and will not be very useful.</p>
Let's look at a simple app that displays a counter with only one state.</p>
// main.dart</span></span>
</span>
import</span> 'package:cubit_tutorial/counter_screen.dart'</span>;</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  runApp</span>(</span>const</span> MyApp</span>())</span>;</span></span>
}</span></span>
</span>
class</span> MyApp</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> MyApp</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> MaterialApp</span>(</span></span>
      title</span>:</span> 'Counter app'</span>,</span></span>
      debugShowCheckedModeBanner</span>:</span> false</span>,</span></span>
      theme</span>:</span> ThemeData</span>(</span></span>
        colorScheme</span>:</span> ColorScheme</span>.</span>fromSeed</span>(seedColor</span>:</span> Colors</span>.</span>deepPurple)</span>,</span></span>
        useMaterial3</span>:</span> true</span>,</span></span>
      )</span>,</span></span>
      home</span>:</span> const</span> CounterScreen</span>()</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>// counter_screen.dart</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> CounterScreen</span> extends</span> StatefulWidget</span> {</span></span>
  const</span> CounterScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  State</span><</span>CounterScreen</span>></span> createState</span>() </span>=></span> _CounterScreenState</span>()</span>;</span></span>
}</span></span>
</span>
class</span> _CounterScreenState</span> extends</span> State</span><</span>CounterScreen</span>> {</span></span>
  int</span> _count </span>=</span> 0</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> Center</span>(</span></span>
        child</span>:</span> Text</span>(</span></span>
          '$</span>_count</span>'</span>,</span></span>
          style</span>:</span> const</span> TextStyle</span>(</span></span>
            fontSize</span>:</span> 86.0</span>,</span></span>
          )</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
</p>
Figure 1. One-state counter app</p>
This is an app and it works. However, being an app that only has one state is as good as an image.</p>
If we want to add features such as entering text, downloading images from a server, or in our example, displaying a counter and updating it, then we always need to show different states in our app. The question is how we do state management properly.</p>
Why do we need state management?</h2>
The simplest way to change the state in Flutter is to use the setState</code> method within a StatefulWidget</code>. Using setState</code> can change the information that we display in our app. In our simple example, we can add an onTapListener</code> to our screen that increases the value of the counter</code> whilst updating the UI that we display in the app.</p>
For a quick refresher on setState</code>, have a look at https://rafaelds/flutter-setstate-the-simplest-state-management-in-flutter.</p>
If we update our example to increment the counter when tapping the screen using setState</code>,  the code will look something like this:</p>
// counter_screen.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> CounterScreen</span> extends</span> StatefulWidget</span> {</span></span>
  const</span> CounterScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  State</span><</span>CounterScreen</span>></span> createState</span>() </span>=></span> _CounterScreenState</span>()</span>;</span></span>
}</span></span>
</span>
class</span> _CounterScreenState</span> extends</span> State</span><</span>CounterScreen</span>> {</span></span>
  int</span> _count </span>=</span> 0</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> GestureDetector</span>(</span></span>
      onTap</span>:</span> () {</span></span>
        //Update the state and refresh the UI</span></span>
        setState</span>(() {</span></span>
          _count </span>=</span> _count </span>+</span> 1</span>;</span></span>
        })</span>;</span></span>
      }</span>,</span></span>
      child</span>:</span> Scaffold</span>(</span></span>
        body</span>:</span> Center</span>(</span></span>
          child</span>:</span> Text</span>(</span></span>
            '$</span>_count</span>'</span>,</span></span>
            style</span>:</span> const</span> TextStyle</span>(</span></span>
              fontSize</span>:</span> 86.0</span>,</span></span>
            )</span>,</span></span>
          )</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
And sure enough, the counter app example works by tapping anywhere in the app and updating the counter using the setState</code> function.</p>
</p>
Video 1. Counter app example using setState</p>
However, once we start developing a more complex user-interface that has multiple widgets, our code can grow significantly in size. Having many setState</code> calls can be difficult to track when they are being called from different parts of our widgets.</p>
We also do not want all our business logic to be part of the UI class which would make these cases hard to test.</p>
Cubit Basics</h1>
A Cubit</code> is a class from the package Bloc</code> that can expose functions and hold state. What this means is that Cubit</code> can be used to manage the states of our app.</p>
</p>
Figure 2. Cubit architecture (https://bloclibrary.dev/bloc-concepts/#cubit)</p>
A Cubit</code> class contains a state</code> which can be any type that we define. This state</code> can be changed through the functions that we define and expose back to our Flutter widgets.</p>
A Cubit</code> can also interact with the other layers of your app such as database, network, and even other Cubit</code> instances.</p>
Installing flutter_bloc</h2>
To be able to use Cubit</code>, we need to install the flutter_bloc</code> package.</p>
flutter</span> pub add flutter_bloc</span></span></code></pre>
Another way is to manually add the flutter_bloc</code> library in the pubspec.yaml</code> file. Make sure to check the latest version of the package.</p>
dependencies</span>:</span></span>
  flutter_bloc</span>:</span> ^8.1.5</span></span></code></pre>Creating a Cubit</h2>
A Cubit</code> can represent the state of a whole app at the most (for really simple apps), or a single widget at the very least. When creating a Cubit</code>, we need to define the functions to expose to the clients, and the type of state that we want the Cubit</code> to represent.</p>
Let's create a CounterCubit</code> for our sample app. This Cubit</code> has type int</code> as a state, and exposes a function to increment this state.</p>
//counter_cubit.dart</span></span>
</span>
import</span> 'package:flutter_bloc/flutter_bloc.dart'</span>;</span></span>
</span>
class</span> CounterCubit</span> extends</span> Cubit</span><</span>int</span>> {</span></span>
  // Default state</span></span>
  CounterCubit</span>() </span>:</span> super(</span>0</span>)</span>;</span></span>
</span>
  void</span> increment</span>() {</span></span>
    // Update the state</span></span>
    emit</span>(state </span>+</span> 1</span>)</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
Let's look at the CounterCubit</code> example above.</p>
When creating a Cubit</code>, this class should extend the Cubit<T></code> abstract class. Doing so will inherit many of the functions and properties that we will use later on, one of which is the state</code>. We also need to define the initial state of the cubit, which in our example is 0</code>.</p>
The state</code> property represents the current state of type T</code>. In the CounterCubit</code> example, this state is represented by an integer. This type can be primitive types such as float</code>, string</code>, datetime</code>, as well as customised data classes.</p>
Calling the emit</code> function updates the current state of the Cubit</code>. In our example, we want to increment the current value of the state by 1</code>.</p>
Basic usage of a Cubit</h2>
We can use the CounterCubit</code> above in different ways. Let's keep it simple first and start with an example that does not involve Flutter widgets.</p>
import</span> 'package:cubit_tutorial/counter_cubit.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  final</span> cubit </span>=</span> CounterCubit</span>()</span>;</span></span>
  print</span>(cubit</span>.</span>state)</span>;</span> // Prints `0`</span></span>
  cubit</span>.</span>increment</span>()</span>;</span></span>
  print</span>(cubit</span>.</span>state)</span>;</span> // Prints `1`</span></span>
}</span></span></code></pre>
In our first example, we created an instance of the CounterCubit</code>. We know that the initial state is going to be 0</code>, and calling the increment()</code> function will increase it by 1</code>.</p>
This simple example however does not represent the real usage of cubits in a Flutter application. In order to fully utilise this state management, we will need to use the other classes found in the Bloc</code> library.</p>
Let's see how we can use cubit in our own counter app.</p>
Using Cubit in Flutter</h1>
I have mentioned before that Cubit</code> is part of a bigger state management solution called Bloc</code>. In order to use Cubit</code> with Flutter, we need to set up our app to respond to state changes in our Cubit</code>.</p>
The first thing we need to learn is how to provide our Cubit</code>.</p>
The BlocProvider widget</h2>
We can think of the BlocProvider</code> widget as a form of dependency injection tool for our Cubit</code>. In a normal app, it is expected to have different cubits that have different representations of states across the system.</p>
BlocProvider</span><</span>CounterCubit</span>>(</span></span>
	create</span>:</span> (context) {</span></span>
    return</span> CounterCubit</span>()</span>;</span></span>
  }</span></span>
  child</span>:</span> MaterialApp</span>(</span></span>
    home</span>:</span> //Rest of the app</span></span>
  )</span>,</span></span>
)</span></span></code></pre>
A BlocProvider</code> requires the type of the Cubit</code> that we want to be available to the children widgets. It has a create</code> parameter where we initialise the Cubit</code>, as well as the child</code> property which contains the widget tree that will potentially access this Cubit</code>.</p>
If we want to provide multiple blocs or cubits, we can use the MultiBlocProvider</code> instead.</p>
MultiBlocProvider</span>(</span></span>
	providers</span>:</span> [</span></span>
    BlocProvider</span><</span>CounterCubit</span>>(</span></span>
			create</span>:</span> (context) </span>=></span> CounterCubit</span>()</span>,</span></span>
		)</span>,</span></span>
    BlocProvider</span><</span>AnotherBloc</span>>(</span></span>
    	create</span>:</span> (context) {</span></span>
        return</span> AnotherBloc</span>(userRepository</span>:</span> UserRepository</span>())</span>;</span></span>
      }</span></span>
    )</span></span>
	]</span>,</span></span>
	child</span>:</span> MaterialApp</span>(</span></span>
    home</span>:</span> //Rest of the app</span></span>
  )</span>,</span></span>
)</span>;</span></span></code></pre>
Any widget in our app that needs access to a particular Cubit</code> should have one of the parents that provides this Cubit</code>.</p>
</p>
Figure 3. Widget tree to show where the provided Cubit</code> or Bloc</code> can be referenced</p>
This is very important because trying to retrieve access to a Cubit</code> that has not been "provided" will result in an app crash.</p>
A good place to put the BlocProvider</code> is at the topmost level of the app, which is usually the MaterialApp</code> or CupertinoApp</code>. This way, the cubits that you need will be readily accessible anywhere down the widget tree.</p>
Here is our app wrapped with a BlocProvider<CounterCubit></code> so we can use the CounterCubit</code> anywhere in the app.</p>
// main.dart</span></span>
</span>
import</span> 'package:cubit_tutorial/counter_cubit.dart'</span>;</span></span>
import</span> 'package:cubit_tutorial/counter_screen.dart'</span>;</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:flutter_bloc/flutter_bloc.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  runApp</span>(</span>const</span> MyApp</span>())</span>;</span></span>
}</span></span>
</span>
class</span> MyApp</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> MyApp</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> BlocProvider</span>(</span></span>
      create</span>:</span> (context) </span>=></span> CounterCubit</span>()</span>,</span></span>
      child</span>:</span> MaterialApp</span>(</span></span>
        title</span>:</span> 'Counter App'</span>,</span></span>
        debugShowCheckedModeBanner</span>:</span> false</span>,</span></span>
        theme</span>:</span> ThemeData</span>(</span></span>
          colorScheme</span>:</span> ColorScheme</span>.</span>fromSeed</span>(seedColor</span>:</span> Colors</span>.</span>deepPurple)</span>,</span></span>
          useMaterial3</span>:</span> true</span>,</span></span>
        )</span>,</span></span>
        home</span>:</span> const</span> CounterScreen</span>()</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>The BlocBuilder widget</h2>
We need to know how to use the BlocBuilder</code> widget to use our counter cubit. A BlocBuilder</code> widget is a widget that observes the changes of a Bloc</code> and rebuilds the widget when it does.</p>
An important thing to note here is that a Cubit</code> is a Bloc</code> as cubits extend the BlocBase</code>.</p>
Given that we have already setup the app so that everything under the MaterialApp</code> is wrapped with the correct BlocProvider</code> for the CounterCubit</code>, then we can use the BlocBuilder</code> as such:</p>
BlocBuilder</span><</span>CounterCubit</span>,</span> int</span>>(</span></span>
	bloc</span>:</span> context</span>.</span>read</span><</span>CounterCubit</span>>()</span>,</span>	//instance of CounterCubit</span></span>
  builder</span>:</span> (context</span>,</span> state) {</span></span>
   	//Build the widget according to the value of `state`</span></span>
    return</span> Text</span>(</span>'$</span>state</span>'</span>)</span>;</span></span>
  }</span></span>
)</span></span></code></pre>
The BlocBuilder</code> needs to be supplied by what type of Bloc</code> it needs to observe and what type of state</code> it reads. In our example, we want to observe a CounterCubit</code> type with the state</code> as type int. With this requirement, we can instantiate the BlocBuilder</code> to be BlocBuilder<CounterCubit, int></code>.</p>
The bloc</code> parameter of BlocBuilder</code> accepts an instance of CounterCubit</code>. One way of providing one is by directly instantiating this as CounterCubit()</code>. However, be warned that in doing so, we might refer to different instances of CounterCubit</code> which may not be the expected behaviour in our app.</p>
Since we want to refer to a single instance of CounterCubit</code> which was provided by the BlocProvider</code>, we can access this instance by using the extension function context.read<CounterCubit>()</code>. This call tries to get the nearest CounterCubit</code> in the parent widget tree.</p>
The last parameter of BlocBuilder</code> is the builder</code> itself in which we construct the widget to return. If we want to display the state</code> of CounterCubit</code> in a Text</code>, then we can do so by using the state</code> parameter. Remember that this value in our example is of type int</code>.</p>
Updating the state through the Cubit</h2>
Instead of using the setState</code> function of a StatefulWidget</code> to update the UI, we can now use the BlocBuilder</code> that listens to the state changes  CounterCubit</code>. As previously mentioned, we can access this Cubit</code> through the extension function context.read<CounterCubit>()</code>.</p>
If we update our onTap</code> function to update the counter:</p>
GestureDetector</span>(</span></span>
	onTap</span>:</span> () {</span></span>
    //Access the CounterCubit</span></span>
		context</span>.</span>read</span><</span>CounterCubit</span>>()</span>.</span>increment</span>()</span>;</span></span>
	}</span>,</span></span>
  child</span>:</span> Scaffold</span>(</span></span>
  	//Rest of the code</span></span>
  )</span></span>
	//..</span></span></code></pre>
Whenever we call the increment()</code>, the state of the CounterCubit</code> is updated. The function emit</code> is called which in turn updates the state of CounterCubit</code>. The BlocBuilder</code> that observes this Cubit</code> will then see that the state has been changed and will rebuild the widget using the new value.</p>
Applying all these things, the CounterScreen</code> widget that we have will be:</p>
// counter_screen.dart</span></span>
</span>
import</span> 'package:cubit_tutorial/counter_cubit.dart'</span>;</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:flutter_bloc/flutter_bloc.dart'</span>;</span></span>
</span>
class</span> CounterScreen</span> extends</span> StatefulWidget</span> {</span></span>
  const</span> CounterScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  State</span><</span>CounterScreen</span>></span> createState</span>() </span>=></span> _CounterScreenState</span>()</span>;</span></span>
}</span></span>
</span>
class</span> _CounterScreenState</span> extends</span> State</span><</span>CounterScreen</span>> {</span></span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> BlocBuilder</span><</span>CounterCubit</span>,</span> int</span>>(</span></span>
      bloc</span>:</span> context</span>.</span>read</span><</span>CounterCubit</span>>()</span>,</span></span>
      builder</span>:</span> (context</span>,</span> state) {</span></span>
        return</span> GestureDetector</span>(</span></span>
          onTap</span>:</span> () {</span></span>
            context</span>.</span>read</span><</span>CounterCubit</span>>()</span>.</span>increment</span>()</span>;</span></span>
          }</span>,</span></span>
          child</span>:</span> Scaffold</span>(</span></span>
            body</span>:</span> Center</span>(</span></span>
              child</span>:</span> Text</span>(</span></span>
                '$</span>state</span>'</span>,</span></span>
                style</span>:</span> const</span> TextStyle</span>(</span></span>
                  fontSize</span>:</span> 86.0</span>,</span></span>
                )</span>,</span></span>
              )</span>,</span></span>
            )</span>,</span></span>
          )</span>,</span></span>
        )</span>;</span></span>
      }</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
These changes did not really modify how the app behaves and will look exactly the same as Video 1. But with these changes, our app is much cleaner now because the logic is now separated from the UI.</p>
</p>
Video 2. The same Counter example result using Cubit.</p>
State with custom data type</h1>
We have implemented a state management system using Cubit<T></code> with a primitive data type as its state. The way BlocBuilder</code> determines whether to rebuild the widget or not depends on the state changes.</p>
Primitive data types such as int</code> or string</code> can simply be compared to see if they're the same or not, but with custom data objects, it's not as straightforward as primitive data types.</p>
For optimisation, we do not want BlocBuilder</code> or other Bloc</code> widgets to recreate the widgets even if the new state has the same values. In order to make sure that the equality of each state for custom data types is checked correctly, we can use the equatable</code> package.</p>
Install Equatable</h2>
Install the Equatable</code> package using:</p>
flutter</span> pub add equatable</span></span></code></pre>Using Equatable for custom data types</h2>
If you have a custom data type say, CustomDataType</code>, extend the Equatable</code> class and add the properties that you want to include for data comparison.</p>
class</span> CustomDataType</span> extends</span> Equatable</span> {</span></span>
  const</span> CustomDataType</span>({</span>required</span> this</span>.</span>name</span>,</span> required</span> this</span>.</span>count})</span>;</span></span>
</span>
  final</span> String</span> name</span>;</span></span>
  final</span> int</span> count</span>;</span></span>
  </span></span>
  @override</span></span>
  List</span><</span>Object</span>?></span> get</span> props </span>=></span> [name</span>,</span> count]</span>;</span></span>
}</span></span></code></pre>
In this example, we want to make sure that the properties name</code> and count</code> are used to compare this object with another CustomDataType</code> and not just the object reference. To do so, we need to override the props</code> method and include the properties that we want to include for comparison.</p>
Once the class implements the props</code> method, it's now ready to be used as the state type of our Cubit</code> class.</p>
Conclusion</h1>
Using Cubit</code> is a good way to implement a scalable state management framework in Flutter through the bloc</code> package. In order to fully utilise Cubit</code> in Flutter, it is best to use the Flutter widgets provided by the bloc</code> library such as BlocBuilder</code>.</p>
Finally, make sure that the Cubit we use is readily provided using a BlocProvider</code> that is usually initialised at the topmost widget of the app.</p>
With Cubit</code>, our Flutter code is much more readable, scalable, and testable.</p>
Reference</h1>

https://bloclibrary.dev/bloc-concepts/#cubit</a></li>
</ul>



How to use custom theme colours in Flutter without using Material or Cupertino Theme
2024-04-05T00:00:00+00:00
It is important to think about how to add structured colour theming to your design when building Flutter apps. The most popular way to do so is to use the Material Design's ColorScheme</code> class. The better approach is to use a design system that specifically works with your app's design system such as the color_theme_provider</a> package.</p>
Using the Material Design colour system</h2>
In many examples, you will always see the following code snippet wherein you can define the Material design colour scheme.</p>
return</span> MaterialApp</span>(</span></span>
  home</span>:</span> const</span> HomeScreen</span>()</span>,</span></span>
  theme</span>:</span> ThemeData</span>(</span></span>
    colorScheme</span>:</span> ColorScheme</span>.</span>fromSeed</span>(</span></span>
      seedColor</span>:</span> Colors</span>.</span>purple</span>,</span></span>
    )</span></span>
  )</span>,</span></span>
)</span>;</span></span></code></pre>
This is not a bad way to start your app with proper colour schemes. Whenever you use widgets that extend the Material</code> widget, then their colour properties will adhere to this theme. However, the downside of this approach is it lacks the customisation that you might need in your application.</p>
A more customisable approach to this is to create your own ColorScheme</code> and define each property with the appropriate colour.</p>
return</span> MaterialApp</span>(</span></span>
  home</span>:</span> const</span> HomeScreen</span>()</span>,</span></span>
  theme</span>:</span> ThemeData</span>(</span></span>
    colorScheme</span>:</span> ColorScheme</span>(</span></span>
      brightness</span>:</span> brightness</span>,</span></span>
      primary</span>:</span> primary</span>,</span></span>
      onPrimary</span>:</span> onPrimary</span>,</span></span>
      secondary</span>:</span> secondary</span>,</span></span>
      onSecondary</span>:</span> onSecondary</span>,</span></span>
      error</span>:</span> error</span>,</span></span>
      onError</span>:</span> onError</span>,</span></span>
      background</span>:</span> background</span>,</span></span>
      onBackground</span>:</span> onBackground</span>,</span></span>
      surface</span>:</span> surface</span>,</span></span>
      onSurface</span>:</span> onSurface</span>,</span></span>
    )</span>,</span></span>
  )</span>,</span></span>
)</span>;</span></span></code></pre>
Once you defined the colours, you can start using these properties in your widgets by getting the ColorScheme</code> from the context.</p>
final</span> colorScheme </span>=</span> Theme</span>.</span>of</span>(context)</span>.</span>colorScheme</span>;</span></span>
return</span> Container</span>(</span></span>
  color</span>:</span> colorScheme</span>.</span>background</span>,</span></span>
)</span>;</span></span></code></pre>The downside of using ColorScheme</h2>
The problem with using the Material design colour scheme is that we are restricted to using the following properties defined by this design system. If we are working with a team that has its design system, it might be difficult to match each property to a corresponding token.</p>
Let's say in my app, I have the following design tokens:</p>

brandColor</code></li>
backgroundColor</code></li>
errorColor</code></li>
successColor</code></li>
textColor</code></li>
</ul>
I can use the ColorScheme</code> to apply our design tokens to match the brandColor</code> to primaryColor</code>, backgroundColor</code> to background</code>, and so on with the errorColor</code>. But what about successColor</code>? If I want to have a consistent colour theme across the app, then using the ColorScheme</code> falls short. I will have to hard code the successColor</code> somewhere in the app.</p>
Using the color_theme_provider</h2>
One way to solve this issue is to use the color_theme_provider</code> package. This package lets you define your colour scheme according to your requirements using the ColorTheme</code> interface which can be accessed by any widgets in your application as long as these widgets are part of the ColorThemeProvider</code> widget tree.</p>
The color_theme_provider</code> has the following features:</p>

Automatically changes the colour theme based on the system's mode (light or dark)</li>
Dynamically change the colour theme in runtime</li>
Does not depend on Material or Apple design tokens</li>
</ul>
Installation</h3>
You can install this using</p>
flutter</span> pub add color_theme_provider</span></span></code></pre>
or adding it directly to pubspec.yaml</code>.</p>
dependencies</span>:</span></span>
  color_theme_provider</span>:</span> 1.1.1</span></span></code></pre>Defining the ColorTheme interface</h3>
Once the package has been imported into the project, we can start defining the colours that we need in our app. Let's use the colours that we defined above and make an interface that extends ColorTheme</code>. Let's call it MyTheme</code>.</p>
import</span> 'package:color_theme_provider/color_theme_provider.dart'</span>;</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
abstract class</span> MyTheme</span> implements</span> ColorTheme</span> {</span></span>
  Color</span> get</span> brandColor</span>;</span></span>
  Color</span> get</span> backgroundColor</span>;</span></span>
  Color</span> get</span> errorColor</span>;</span></span>
  Color</span> get</span> successColor</span>;</span></span>
  Color</span> get</span> textColor</span>;</span></span>
}</span></span></code></pre>
We are using an abstract</code> class or an interface so that we can define a colour theme for light mode and another for dark mode. We can also define other colour themes if we want to have multiple colour themes in the app. The only requirement is that these classes should extend MyTheme</code>.</p>
final class</span> LightMyTheme</span> implements</span> MyTheme</span> {</span></span>
  @override</span></span>
  final</span> Color</span> brandColor </span>=</span> Colors</span>.</span>blue</span>;</span></span>
  @override</span></span>
  final</span> Color</span> backgroundColor </span>=</span> Colors</span>.</span>white</span>;</span></span>
  @override</span></span>
  final</span> Color</span> errorColor </span>=</span> Colors</span>.</span>red</span>;</span></span>
  @override</span></span>
  final</span> Color</span> successColor </span>=</span> Colors</span>.</span>green</span>;</span></span>
  @override</span></span>
  final</span> Color</span> textColor </span>=</span> Colors</span>.</span>black</span>;</span></span>
}</span></span></code></pre>
We can also define another theme for dark mode as such. In this example, we just changed the backgroundColor</code> to a dark colour and its inverse for the textColor</code>.</p>
final class</span> DarkMyTheme</span> implements</span> MyTheme</span> {</span></span>
  @override</span></span>
  final</span> Color</span> brandColor </span>=</span> Colors</span>.</span>blue</span>;</span></span>
  @override</span></span>
  final</span> Color</span> backgroundColor </span>=</span> Colors</span>.</span>black</span>;</span></span>
  @override</span></span>
  final</span> Color</span> errorColor </span>=</span> Colors</span>.</span>red</span>;</span></span>
  @override</span></span>
  final</span> Color</span> successColor </span>=</span> Colors</span>.</span>green</span>;</span></span>
  @override</span></span>
  final</span> Color</span> textColor </span>=</span> Colors</span>.</span>white</span>;</span></span>
}</span></span></code></pre>Wrapping your app with ColorThemeProvider</h3>
Once we have defined the themes, we can wrap our app with the ColorThemeProvider</code>. This is necessary so that all the widgets under this widget tree can access the theme. If you have a top-level widget such as MaterialApp</code>, then we can wrap this widget with ColorThemeProvider</code>.</p>
class</span> MyApp</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> MyApp</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> ColorThemeProvider</span><</span>MyTheme</span>>(</span></span>
      theme</span>:</span> LightMyTheme</span>()</span>,</span></span>
      darkTheme</span>:</span> DarkMyTheme</span>()</span>,</span></span>
      child</span>:</span> const</span> MaterialApp</span>(</span></span>
        home</span>:</span> HomePage</span>()</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
Don't forget to define the generic MyTheme</code> when using the ColorThemeProvider</code>. All the widgets under the HomePage</code> can access the MyTheme</code> instance and apply the colours defined in there.</p>
Applying the colour theme</h3>
Now that we have set up the app, we can start using these colours. We will need access to the widget's BuildContext</code> to get the theme from the ColorThemeProvider</code>.</p>
The color_theme_provider</code> has an extension function to get a colour theme instance. To get the colour theme, use the context.colorTheme<MyTheme>()</code> extension function. Make sure to include the generic type of your theme. In our example, it's MyTheme</code>.</p>
class</span> HomePage</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> HomePage</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    final</span> colorTheme </span>=</span> context</span>.</span>colorTheme</span><</span>MyTheme</span>>()</span>;</span></span>
    //Using the colours</span></span>
    colorTheme</span>.</span>backgroundColor</span>;</span></span>
    colorTheme</span>.</span>brandColor</span>;</span></span>
    colorTheme</span>.</span>successColor</span>;</span></span>
    // ..</span></span></code></pre>Example of using the color theme</h3>
If we apply all these concepts, we can simply use these colours in our widgets. As an example, let's display the different colours from the theme. When using the colorTheme</code>, we just need to define which colour property we want to use. The ColorThemeProvider</code> takes care of applying these colours, whether it is in light or dark mode.</p>






class</span> HomePage</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> HomePage</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    final</span> colorTheme </span>=</span> context</span>.</span>colorTheme</span><</span>MyTheme</span>>()</span>;</span></span>
    return</span> Scaffold</span>(</span></span>
      backgroundColor</span>:</span> colorTheme</span>.</span>backgroundColor</span>,</span></span>
      body</span>:</span> Center</span>(</span></span>
        child</span>:</span> Column</span>(</span></span>
          mainAxisAlignment</span>:</span> MainAxisAlignment</span>.</span>center</span>,</span></span>
          children</span>:</span> [</span></span>
            Container</span>(</span></span>
              height</span>:</span> 64.0</span>,</span></span>
              width</span>:</span> 64.0</span>,</span></span>
              color</span>:</span> colorTheme</span>.</span>brandColor</span>,</span></span>
            )</span>,</span></span>
            Container</span>(</span></span>
              height</span>:</span> 64.0</span>,</span></span>
              width</span>:</span> 64.0</span>,</span></span>
              color</span>:</span> colorTheme</span>.</span>successColor</span>,</span></span>
            )</span>,</span></span>
            Container</span>(</span></span>
              height</span>:</span> 64.0</span>,</span></span>
              width</span>:</span> 64.0</span>,</span></span>
              color</span>:</span> colorTheme</span>.</span>errorColor</span>,</span></span>
            )</span>,</span></span>
            Text</span>(</span></span>
              'Sample Text'</span>,</span></span>
              style</span>:</span> TextStyle</span>(color</span>:</span> colorTheme</span>.</span>textColor)</span>,</span></span>
            )</span></span>
          ]</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
In the example above, we can see that the background and the text colours change according to the device's system settings.</p>
Dynamically changing the theme</h3>
We can also change the theme whilst the app is running using the ColorThemeManager</code>.</p>
final</span> colorThemeMananger </span>=</span> context</span>.</span>colorThemeManager</span><</span>MyTheme</span>>()</span>;</span></span>
colorThemeMananger</span>.</span>setTheme</span>(</span>NewLightTheme</span>())</span>;</span></span>
colorThemeMananger</span>.</span>setDarkTheme</span>(</span>NewDarkTheme</span>())</span>;</span></span></code></pre>
This is useful if your app offers multiple colour schemes to users.</p>
Conclusion</h2>
The color_theme_provider</code> package is an alternative approach to using colour themes. With this package, we are not restricted to using the Material design or Cupertino colour properties. We can easily define the colours that we need according to the app's requirements.</p>
First, create an interface that extends ColorTheme</code>. Then, define a light and dark mode extending the created theme. Once the themes have been defined, wrap your application with ColorThemeProvider</code>. To access the theme, use context.themeColor<YourTheme>()</code> and start applying the colours.</p>
Finally, you can change the colour theme in runtime using the ColorThemeManager</code>.</p>
References</h2>

https://pub.dev/packages/color_theme_provider</a></li>
</ul>


How to use PageView in Flutter
2024-03-14T00:00:00+00:00
There are many ways to display content in a mobile app. One of the most popular approach to show tabs and pages in Flutter is to use the PageView</code> widget.</p>
The PageView</code> widget allows us to display sliding and swipeable pages in our Flutter app. This is usually used to display multiple pages where we display one screen at time. This ranges from viewing full screen photos to watching short videos one at a time.</p>
</p>
Figure 1. PageView example.</p>
Simple PageView example</h2>
Let's start with a simple example of using PageView</code>. Let's say we have a photo gallery app where we can view different photos. Using PageView</code> is a perfect approach to display these photos one at a time. Let's use a Container</code> with different colours to represent a photo.</p>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> PageViewScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> PageViewScreen</span>({</span></span>
    super</span>.</span>key</span>,</span></span>
  })</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> PageView</span>(</span></span>
        children</span>:</span> [</span></span>
          Container</span>(</span></span>
            color</span>:</span> Colors</span>.</span>red</span>,</span></span>
          )</span>,</span></span>
          Container</span>(</span></span>
            color</span>:</span> Colors</span>.</span>green</span>,</span></span>
          )</span>,</span></span>
          Container</span>(</span></span>
            color</span>:</span> Colors</span>.</span>blue</span>,</span></span>
          )</span>,</span></span>
          Container</span>(</span></span>
            color</span>:</span> Colors</span>.</span>black</span>,</span></span>
          )</span>,</span></span>
        ]</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
In this example, we have four swipeable screens of different colours. We define them in the children</code> parameter of PageView</code>. Running this code will look something like this.</p>
</p>
Video 1. Swiping pages horizontally with PageView</code>.</p>
You can also change the direction of the swipe by changing the property scrollDirection</code> to Axis.vertical</code>.</p>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> PageViewScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> PageViewScreen</span>({</span></span>
    super</span>.</span>key</span>,</span></span>
  })</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> PageView</span>(</span></span>
        scrollDirection</span>:</span> Axis</span>.</span>vertical</span>,</span></span>
        children</span>:</span> [</span></span>
          Container</span>(</span></span>
            color</span>:</span> Colors</span>.</span>red</span>,</span></span>
          )</span>,</span></span>
          Container</span>(</span></span>
            color</span>:</span> Colors</span>.</span>green</span>,</span></span>
          )</span>,</span></span>
          Container</span>(</span></span>
            color</span>:</span> Colors</span>.</span>blue</span>,</span></span>
          )</span>,</span></span>
          Container</span>(</span></span>
            color</span>:</span> Colors</span>.</span>black</span>,</span></span>
          )</span>,</span></span>
        ]</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
</p>
Video 2. Swiping pages vertically with PageView</code>.</p>
Using PageView with dynamic number of pages</h2>
In our previous example, we already know the number of screens that our PageView</code> will display. In real apps, it is common to display an unknown number of screens such as full screen photos or content that your app gets remotely.</p>
To display an unknown number of items, we should use PageView.builder</code> and the itemBuilder</code> instead of the children</code> property. For this example, this will be an infinite amount of pages that shows random colours every time the PageView</code> builds the screen.</p>
import</span> 'dart:math'</span>;</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> PageViewScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> PageViewScreen</span>({</span></span>
    super</span>.</span>key</span>,</span></span>
  })</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> PageView</span>.</span>builder</span>(</span></span>
        itemBuilder</span>:</span> (context</span>,</span> index) {</span></span>
          return</span> Container</span>(</span></span>
            color</span>:</span> Colors</span>.</span>primaries[</span>Random</span>()</span>.</span>nextInt</span>(</span>Colors</span>.</span>primaries</span>.</span>length)]</span>,</span></span>
          )</span>;</span></span>
        }</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
</p>
Video 3. Displaying infinite number of screens with PageView</code>.</p>
If we know before hand the number of items that we want to display, we can use the itemCount</code> parameter so that the PageView</code> will stop building new pages past that count.</p>
In the next example, let's pretend that we're getting the "photos" from an API. Once we get these items, we'll use the itemBuilder's index to build the page with the correct content. We also set the itemCount</code> based on the number of items we get.</p>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> PageViewScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> PageViewScreen</span>({</span></span>
    super</span>.</span>key</span>,</span></span>
  })</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    final</span> colors </span>=</span> _photosRepository</span>()</span>;</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> PageView</span>.</span>builder</span>(</span></span>
        itemCount</span>:</span> colors</span>.</span>length</span>,</span></span>
        itemBuilder</span>:</span> (context</span>,</span> index) {</span></span>
          return</span> Container</span>(</span></span>
            color</span>:</span> colors[index]</span>,</span></span>
          )</span>;</span></span>
        }</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
</span>
  List</span><</span>Color</span>></span> _photosRepository</span>() {</span></span>
    return const</span> [</span></span>
      Colors</span>.</span>red</span>,</span></span>
      Colors</span>.</span>green</span>,</span></span>
      Colors</span>.</span>blue</span>,</span></span>
      Colors</span>.</span>black</span>,</span></span>
    ]</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
With these changes, the app would look the same as Video 1.</p>
Navigating to different pages using PageController</code></h2>
Now that we know the basics of using a PageView</code>, we can now proceed on learning how to have more control with it. With PageController</code>, we can programmatically move from one page to another without swiping the widget. To illustrate this feature, we will add a left and right button on the app and programatically move the pages.</p>
For this example, I have to convert our PageViewScreen</code> to be a StatefulWidget</code> as we need to keep reference to our PageController</code>.</p>
import</span> 'package:flutter/cupertino.dart'</span>;</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> PageViewScreen</span> extends</span> StatefulWidget</span> {</span></span>
  const</span> PageViewScreen</span>({</span></span>
    super</span>.</span>key</span>,</span></span>
  })</span>;</span></span>
</span>
  @override</span></span>
  State</span><</span>PageViewScreen</span>></span> createState</span>() </span>=></span> _PageViewScreenState</span>()</span>;</span></span>
}</span></span>
</span>
class</span> _PageViewScreenState</span> extends</span> State</span><</span>PageViewScreen</span>> {</span></span>
  late</span> PageController</span> _pageController</span>;</span></span>
</span>
  @override</span></span>
  void</span> initState</span>() {</span></span>
    _pageController </span>=</span> PageController</span>()</span>;</span></span>
    super</span>.</span>initState</span>()</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  void</span> dispose</span>() {</span></span>
    _pageController</span>.</span>dispose</span>()</span>;</span></span>
    super</span>.</span>dispose</span>()</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    final</span> colors </span>=</span> _photosRepository</span>()</span>;</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> Stack</span>(</span></span>
        children</span>:</span> [</span></span>
          PageView</span>.</span>builder</span>(</span></span>
            controller</span>:</span> _pageController</span>,</span></span>
            itemCount</span>:</span> colors</span>.</span>length</span>,</span></span>
            itemBuilder</span>:</span> (context</span>,</span> index) {</span></span>
              return</span> Container</span>(</span></span>
                color</span>:</span> colors[index]</span>,</span></span>
              )</span>;</span></span>
            }</span>,</span></span>
          )</span>,</span></span>
          Align</span>(</span></span>
            alignment</span>:</span> Alignment</span>.</span>centerLeft</span>,</span></span>
            child</span>:</span> IconButton</span>(</span></span>
              onPressed</span>:</span> () {</span></span>
                _pageController</span>.</span>previousPage</span>(</span></span>
                  duration</span>:</span> const</span> Duration</span>(milliseconds</span>:</span> 250</span>)</span>,</span></span>
                  curve</span>:</span> Curves</span>.</span>easeIn</span>,</span></span>
                )</span>;</span></span>
              }</span>,</span></span>
              icon</span>:</span> const</span> Icon</span>(</span></span>
                CupertinoIcons</span>.</span>chevron_left</span>,</span></span>
                size</span>:</span> 32.0</span>,</span></span>
              )</span>,</span></span>
            )</span>,</span></span>
          )</span>,</span></span>
          Align</span>(</span></span>
            alignment</span>:</span> Alignment</span>.</span>centerRight</span>,</span></span>
            child</span>:</span> IconButton</span>(</span></span>
              onPressed</span>:</span> () {</span></span>
                _pageController</span>.</span>nextPage</span>(</span></span>
                  duration</span>:</span> const</span> Duration</span>(milliseconds</span>:</span> 250</span>)</span>,</span></span>
                  curve</span>:</span> Curves</span>.</span>easeIn</span>,</span></span>
                )</span>;</span></span>
              }</span>,</span></span>
              icon</span>:</span> const</span> Icon</span>(</span></span>
                CupertinoIcons</span>.</span>chevron_right</span>,</span></span>
                size</span>:</span> 32.0</span>,</span></span>
              )</span>,</span></span>
            )</span>,</span></span>
          )</span>,</span></span>
        ]</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
</span>
  List</span><</span>Color</span>></span> _photosRepository</span>() {</span></span>
    return const</span> [</span></span>
      Colors</span>.</span>red</span>,</span></span>
      Colors</span>.</span>green</span>,</span></span>
      Colors</span>.</span>blue</span>,</span></span>
      Colors</span>.</span>black</span>,</span></span>
    ]</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
I added the two buttons by wrapping the PageView</code> under a Stack</code> and aligning the buttons to center left and right. If we want to navigate the screens to the previous or next page, we can use the previousPage()</code> and nextPage()</code> accordingly.</p>
</p>
Video 4. Transition using PageController</code>.</p>
Calling these two methods requires a Duration</code> and Curve</code> arguments as PageController</code> will animate the transition. You can also use animateToPage()</code> if you know specifically which screen you want to navigate to. And if you want to set the page without animation, you can use the jumpToPage()</code> method of the controller.</p>
Conclusion</h1>
The PageView</code> widget offers an alternative way of displaying content in your app. With PageView</code>, you can choose whether the pages are swipeable from left to right or top to bottom.</p>
PageView</code> also lets you add more controls by using PageController</code>, as well as different options in building your pages depending on the number of items that you have.</p>
References</h1>

https://api.flutter.dev/flutter/widgets/PageView-class.html</a></li>
</ul>


Flutter navigation with go_router package
2024-02-15T00:00:00+00:00
Apps of different sizes and scale have more than one screen to display from the main screen to the other parts of the app. One of the most used libraries for navigation in Flutter is go_router</code>.</p>
In this tutorial, we will learn how to use go_router</code> in our Flutter app to move from one screen to another.</p>
Installation</h1>
To add the go_router</code> package, use the command:</p>
flutter</span> pub add go_router</span></span></code></pre>
Another way to install manually is to add the following to your pubspec.yaml</code>.</p>
dependencies</span>:</span></span>
  flutter</span>:</span></span>
    sdk</span>:</span> flutter</span></span>
</span>
  cupertino_icons</span>:</span> ^1.0.2</span></span>
  go_router</span>:</span> ^13.2.0</span> # < Add this</span></span></code></pre>
Now that everything has been set up, let's go with the configuration.</p>
Define our Screens</h1>
In our example, we can have three hypothetical screens: Splash screen</code>, Home screen</code>, and  Settings screen</code>.</p>
</p>
Figure 1. Screens to use in our navigation example.</p>
// splash_screen.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> SplashScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> SplashScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> Container</span>(</span></span>
        color</span>:</span> Colors</span>.</span>amber[</span>300</span>]</span>,</span></span>
        child</span>:</span> const</span> Center</span>(</span></span>
          child</span>:</span> Text</span>(</span>'Splash'</span>)</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>//home_screen.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:go_router/go_router.dart'</span>;</span></span>
</span>
class</span> HomeScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> HomeScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      appBar</span>:</span> AppBar</span>(</span></span>
        backgroundColor</span>:</span> Colors</span>.</span>green[</span>300</span>]</span>,</span></span>
        actions</span>:</span> [</span></span>
          IconButton</span>(</span></span>
            onPressed</span>:</span> () {</span></span>
              //TODO:</span></span>
            }</span>,</span></span>
            icon</span>:</span> const</span> Icon</span>(</span>Icons</span>.</span>settings)</span>,</span></span>
          )</span></span>
        ]</span>,</span></span>
      )</span>,</span></span>
      body</span>:</span> Container</span>(</span></span>
        color</span>:</span> Colors</span>.</span>green[</span>300</span>]</span>,</span></span>
        child</span>:</span> const</span> Center</span>(</span></span>
          child</span>:</span> Text</span>(</span>'Home'</span>)</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>// settings_screen.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> SettingsScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> SettingsScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> Container</span>(</span></span>
        color</span>:</span> Colors</span>.</span>blue[</span>300</span>]</span>,</span></span>
        child</span>:</span> Center</span>(</span></span>
          child</span>:</span> Column</span>(</span></span>
            children</span>:</span> [</span></span>
              const</span> Text</span>(</span>'Settings'</span>)</span>,</span></span>
              OutlinedButton</span>(</span></span>
                onPressed</span>:</span> () {</span></span>
                  //TODO:</span></span>
                }</span>,</span></span>
                child</span>:</span> const</span> Text</span>(</span>'Go Back'</span>)</span>,</span></span>
              )</span></span>
            ]</span>,</span></span>
          )</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span>
</span></code></pre>Route Configuration</h1>
We'll start with the basics first. Let's say we have an app with multiple screens. In this case, we have a splash screen, a home screen, and a settings screen.</p>
Whenever we launch our application, we see the settings screen first and should navigate next to the home screen.</p>
To set this up, we need to create a GoRouter</code> configuration class.</p>
//router_config.dart</span></span>
</span>
import</span> 'package:go_router/go_router.dart'</span>;</span></span>
import</span> 'package:navigation_with_go_router/home_screen.dart'</span>;</span></span>
import</span> 'package:navigation_with_go_router/settings_screen.dart'</span>;</span></span>
import</span> 'package:navigation_with_go_router/splash_screen.dart'</span>;</span></span>
</span>
GoRouter</span> routerConfig </span>=</span> GoRouter</span>(</span></span>
  routes</span>: <</span>RouteBase</span>></span>[</span></span>
    GoRoute</span>(</span></span>
      path</span>:</span> '/'</span>,</span></span>
      builder</span>:</span> (context</span>,</span> state) {</span></span>
        return const</span> SplashScreen</span>()</span>;</span></span>
      }</span>,</span></span>
    )</span>,</span></span>
    GoRoute</span>(</span></span>
      path</span>:</span> '/home'</span>,</span></span>
      builder</span>:</span> (context</span>,</span> state) {</span></span>
        return const</span> HomeScreen</span>()</span>;</span></span>
      }</span>,</span></span>
    )</span>,</span></span>
    GoRoute</span>(</span></span>
      path</span>:</span> '/settings'</span>,</span></span>
      builder</span>:</span> (context</span>,</span> state) {</span></span>
        return const</span> SettingsScreen</span>()</span>;</span></span>
      }</span>,</span></span>
    )</span>,</span></span>
  ]</span>,</span></span>
)</span>;</span></span>
</span>
</span></code></pre>
We can put this anywhere in the project, but I would personally put this on a separate file such as router_config.dart</code> for code separation.</p>
A GoRouter</code> class has a parameter routes:</code> where we can define a list of paths or destinations to our app navigation. The path</code> with a /</code> value means that this is the starting screen of the app. In this case, we show the SplashScreen</code>.</p>
The other destinations are HomeScreen</code> and SettingsScreen</code> which are reached through paths /home</code> and /settings</code> respectively.</p>
The next thing to do is to set up our app to use this route configuration. This is done by changing either MaterialApp</code> or CupertinoApp</code> to use the router constructors: MaterialApp.router()</code>  or CupertinoApp.router()</code>.</p>
In the following example, MyApp</code> is using a MaterialApp</code>, so I will use its equivalent constructor for router.</p>
//my_app.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:navigation_with_go_router/router_config.dart'</span>;</span></span>
</span>
class</span> MyApp</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> MyApp</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> MaterialApp</span>.</span>router</span>(</span></span>
      debugShowCheckedModeBanner</span>:</span> false</span>,</span></span>
      routerConfig</span>:</span> routerConfig</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
Lastly, make sure that  main.dart</code> is loading up MyApp</code>.</p>
//main.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:navigation_with_go_router/my_app.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  runApp</span>(</span>const</span> MyApp</span>())</span>;</span></span>
}</span></span>
</span></code></pre>
Running the app will default to showing our splash screen.</p>
</p>
Figure 2. The first screen of the app (Splash screen).</p>
Navigating from one screen to another</h1>
There are two basic ways to navigate from one screen to another. One is using context.push()</code> and the other is context.go()</code>.</p>
Using context.push()</h2>
Using the context.push()</code> API is straightforward. The destination is added on top of the current screen. Let's see what it looks like if we navigate from SplashScreen</code> to HomeScreen</code> using this method.</p>
To use this method, we need to have access to context</code> and the path of the destination screen. To go to HomeScreen</code>, we need to use /home</code> as defined in our routes_config</code>. Let's add a tap capability in our screen to trigger a navigation using the TapRegion</code> widget .</p>
// splash_screen.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:go_router/go_router.dart'</span>;</span></span>
</span>
class</span> SplashScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> SplashScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> TapRegion</span>(</span></span>
      onTapInside</span>:</span> (event) {</span></span>
        context</span>.</span>push</span>(</span>'/home'</span>)</span>;</span></span>
      }</span>,</span></span>
      child</span>:</span> Scaffold</span>(</span></span>
        body</span>:</span> Container</span>(</span></span>
          color</span>:</span> Colors</span>.</span>amber[</span>300</span>]</span>,</span></span>
          child</span>:</span> const</span> Center</span>(</span></span>
            child</span>:</span> Text</span>(</span>'Splash'</span>)</span>,</span></span>
          )</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
When we tap on any part of the the SplashScreen</code>, it will trigger context.push('/home')</code> and navigate to HomeScreen</code>. Swiping back or tapping the back button navigates back to the SplashScreen</code>. It works like this because using the context.push()</code> method retains the stack order of the screens.</p>
</p>
Video 1. Navigating to Home Screen and back to Splash Screen.</p>
But splash screens are not supposed to be viewable again after being shown to the users. For use cases like this, we should use context.go()</code>.</p>
Using context.go()</h2>
The difference between context.go()</code> and context.push()</code> is that context.go()</code> clears the stack of screens while context.push()</code> does not.</p>
In our example, since we want to clear the SplashScreen</code> after navigating out of it, then we should be using context.go('/home')</code> instead.</p>
// splash_screen.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:go_router/go_router.dart'</span>;</span></span>
</span>
class</span> SplashScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> SplashScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> TapRegion</span>(</span></span>
      onTapInside</span>:</span> (event) {</span></span>
        context</span>.</span>go</span>(</span>'/home'</span>)</span>;</span> // << Use 'go' in here instead of 'push'.</span></span>
      }</span>,</span></span>
      child</span>:</span> Scaffold</span>(</span></span>
        body</span>:</span> Container</span>(</span></span>
          color</span>:</span> Colors</span>.</span>amber[</span>300</span>]</span>,</span></span>
          child</span>:</span> const</span> Center</span>(</span></span>
            child</span>:</span> Text</span>(</span>'Splash'</span>)</span>,</span></span>
          )</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
Running this change should not let you go back to the previous screen.</p>
</p>
Figure 3. Navigating to the home screen using context.go()</code>.</p>
Note that the leadingWidget</code> of the AppBar</code> disappears as MaterialApp</code> knows that there's no screen to come back to when using context.go()</code>.</p>
Going back to the previous screen</h1>
Let's complete the app by adding an option to navigate to the SettingsScreen</code> from the HomeScreen</code>. This time, we should be able to go back to the previous screen.</p>
Add the context.push()</code> to the  onPressed</code> callback of the settings icon of HomeScreen</code>.</p>
//home_screen.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:go_router/go_router.dart'</span>;</span></span>
</span>
class</span> HomeScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> HomeScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      appBar</span>:</span> AppBar</span>(</span></span>
        backgroundColor</span>:</span> Colors</span>.</span>green[</span>300</span>]</span>,</span></span>
        actions</span>:</span> [</span></span>
          IconButton</span>(</span></span>
            onPressed</span>:</span> () {</span></span>
              context</span>.</span>push</span>(</span>'/settings'</span>)</span>;</span></span>
            }</span>,</span></span>
            icon</span>:</span> const</span> Icon</span>(</span>Icons</span>.</span>settings)</span>,</span></span>
          )</span></span>
        ]</span>,</span></span>
      )</span>,</span></span>
      body</span>:</span> Container</span>(</span></span>
        color</span>:</span> Colors</span>.</span>green[</span>300</span>]</span>,</span></span>
        child</span>:</span> const</span> Center</span>(</span></span>
          child</span>:</span> Text</span>(</span>'Home'</span>)</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
To go back to the previous screen, we can either use a swipe back gesture or tap the back button similar to Video 1. You can also do this programmatically using the context.pop()</code> button.</p>
Make sure that there is someplace to go back to. It means that the current screen should have been navigated by using context.push()</code>.</p>
// settings_screen.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:go_router/go_router.dart'</span>;</span></span>
</span>
class</span> SettingsScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> SettingsScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> Container</span>(</span></span>
        color</span>:</span> Colors</span>.</span>blue[</span>300</span>]</span>,</span></span>
        child</span>:</span> Center</span>(</span></span>
          child</span>:</span> Column</span>(</span></span>
            mainAxisSize</span>:</span> MainAxisSize</span>.</span>max</span>,</span></span>
            mainAxisAlignment</span>:</span> MainAxisAlignment</span>.</span>center</span>,</span></span>
            children</span>:</span> [</span></span>
              const</span> Text</span>(</span>'Settings'</span>)</span>,</span></span>
              OutlinedButton</span>(</span></span>
                onPressed</span>:</span> () {</span></span>
                  context</span>.</span>pop</span>()</span>;</span> // << Add this</span></span>
                }</span>,</span></span>
                child</span>:</span> const</span> Text</span>(</span>'Go Back'</span>)</span>,</span></span>
              )</span></span>
            ]</span>,</span></span>
          )</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
If we run the app, we should see the expected behaviour of the navigation. The SplashScreen</code> should only be displayed once and not be navigated back again. HomeScreen</code> should be able to open the SettingsScreen</code> and go back.</p>
</p>
Video 2. Navigating from Splash screen to Home screen, Settings screen, and back.</p>
Passing parameters</h1>
With go_router</code>, we can pass parameters when navigating to different screens. There are different ways to do this.</p>
Path parameters</h2>
Using path parameters is a straightforward way of passing data from one screen to another. This is done by appending a path variable to our path</code>.</p>
Say we want to pass an ID from HomeScreen</code> to the SettingsScreen</code>. We can achieve this by adding a :id</code> variable to our path in our routerConfig</code>. Let's also update HomeScreen</code> to pass a value for the id (e.g. 42). Finally, we also update SettingsScreen</code> to accept an id</code> String value and display it once loaded.</p>
//part of router_config.dart</span></span>
</span>
GoRoute</span>(</span></span>
   path</span>:</span> '/settings/:id'</span>,</span></span>
   builder</span>:</span> (context</span>,</span> state) {</span></span>
     final</span> id </span>=</span> state</span>.</span>pathParameters[</span>'id'</span>] </span>??</span> ''</span>;</span></span>
     return</span> SettingsScreen</span>(</span></span>
       id</span>:</span> id</span>,</span></span>
     )</span>;</span></span>
   }</span>,</span></span>
)</span>,</span></span></code></pre>// part of home_screen.dart</span></span>
</span>
IconButton</span>(</span></span>
	onPressed</span>:</span> () {</span></span>
		context</span>.</span>push</span>(</span>'/settings/42'</span>)</span>;</span></span>
	}</span>,</span></span>
	icon</span>:</span> const</span> Icon</span>(</span>Icons</span>.</span>settings)</span>,</span></span>
)</span></span></code></pre>// settings_screen.dart</span></span>
</span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:go_router/go_router.dart'</span>;</span></span>
</span>
class</span> SettingsScreen</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> SettingsScreen</span>({super</span>.</span>key</span>,</span> required</span> this</span>.</span>id})</span>;</span></span>
</span>
  final</span> String</span> id</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      body</span>:</span> Container</span>(</span></span>
        color</span>:</span> Colors</span>.</span>blue[</span>300</span>]</span>,</span></span>
        child</span>:</span> Center</span>(</span></span>
          child</span>:</span> Column</span>(</span></span>
            mainAxisSize</span>:</span> MainAxisSize</span>.</span>max</span>,</span></span>
            mainAxisAlignment</span>:</span> MainAxisAlignment</span>.</span>center</span>,</span></span>
            children</span>:</span> [</span></span>
              Text</span>(</span>'Settings - ID: $</span>id</span>'</span>)</span>,</span></span>
              OutlinedButton</span>(</span></span>
                onPressed</span>:</span> () {</span></span>
                  context</span>.</span>pop</span>()</span>;</span></span>
                }</span>,</span></span>
                child</span>:</span> const</span> Text</span>(</span>'Go Back'</span>)</span>,</span></span>
              )</span></span>
            ]</span>,</span></span>
          )</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
To get the value of the parameter from the path, we use the state</code> parameter of the GoRoute</code> builder function. This GoRouterState</code> has a property called pathParameters</code> which returns a map of parameters. In our example, we use id</code> to retrieve this value.</p>
</p>
Figure 4. Passing data to another screen with path parameters.</p>
Query parameters</h2>
We can also use query parameters for passing data in between screens. The approach however is different with path parameters. With query parameters, we do not need to update the path of a GoRoute</code>. Instead, we can just check whether there is a value passed with a given key using uri.queryParameters</code>.</p>
Using our current example, let's include a query parameter called queryParam</code> when navigating to SettingsScreen</code>.</p>
//part of home_screen.dart</span></span>
</span>
IconButton</span>(</span></span>
	onPressed</span>:</span> () {</span></span>
		context</span>.</span>push</span>(</span>'/settings/42?queryParam=mango'</span>)</span>;</span></span>
	}</span>,</span></span>
	icon</span>:</span> const</span> Icon</span>(</span>Icons</span>.</span>settings)</span>,</span></span>
)</span></span></code></pre>//part of router_config.dart    </span></span>
</span>
GoRoute</span>(</span></span>
	path</span>:</span> '/settings/:id'</span>,</span></span>
	builder</span>:</span> (context</span>,</span> state) {</span></span>
		final</span> id </span>=</span> state</span>.</span>pathParameters[</span>'id'</span>] </span>??</span> ''</span>;</span></span>
		final</span> queryParam </span>=</span> state</span>.</span>uri</span>.</span>queryParameters[</span>'queryParam'</span>]</span>;</span></span>
		return</span> SettingsScreen</span>(</span></span>
      id</span>:</span> '$</span>id</span> $</span>queryParam</span>'</span>,</span></span>
		)</span>;</span></span>
	}</span>,</span></span>
)</span>,</span></span></code></pre>
With this update, we should see the queryParam</code> with the value mango</code>.</p>
</p>
Figure 5. Passing data to another screen with query parameters.</p>
Object parameter</h2>
It is best practice to only pass data between screens using data type String</code>. However, if your app requires passing an object, you can use the extra</code> argument when navigating to another screen.</p>
//part of home_screen.dart</span></span>
</span>
	IconButton</span>(</span></span>
		onPressed</span>:</span> () {</span></span>
    	context</span>.</span>push</span>(</span></span>
      	'/settings/42?queryParam=mango'</span>,</span></span>
        extra</span>:</span> 30.0</span>,</span> // << Extra object</span></span>
      )</span>;</span></span>
    }</span>,</span></span>
    icon</span>:</span> const</span> Icon</span>(</span>Icons</span>.</span>settings)</span>,</span></span>
)</span></span></code></pre>//part of router_config.dart</span></span>
</span>
GoRoute</span>(</span></span>
	path</span>:</span> '/settings/:id'</span>,</span></span>
	builder</span>:</span> (context</span>,</span> state) {</span></span>
		final</span> id </span>=</span> state</span>.</span>pathParameters[</span>'id'</span>] </span>??</span> ''</span>;</span></span>
		final</span> queryParam </span>=</span> state</span>.</span>uri</span>.</span>queryParameters[</span>'queryParam'</span>]</span>;</span></span>
    final</span> value </span>=</span> state</span>.</span>extra </span>as</span> double</span>;</span> // << Cast the extra with the right class</span></span>
    return</span> SettingsScreen</span>(</span></span>
    	id</span>:</span> '$</span>id</span> $</span>queryParam</span> $</span>value</span>'</span>,</span></span>
    )</span>;</span></span>
  }</span>,</span></span>
)</span>,</span></span></code></pre>
</p>
Figure 6. Passing non-String data to another screen</p>
Conclusion</h1>
That's all the basic things that you need to learn in order to start using go_router</code> as your navigation library. There are many other features that can be used from this library such as ShellRoutes</code> for multiple navigation trees, as well as custom animations in-between screens.</p>
References</h1>

https://pub.dev/packages/go_router</a></li>
</ul>


Build a simple game with Flutter and Flame
2024-02-06T00:00:00+00:00
Flutter is a powerful development framework in building applications across different platform. It is very versatile that we can even make a game with it.</p>
In this tutorial, we will learn how to build a very basic game in Flutter using the Flame game engine. We will go through each step in building this 2D game called Bug Squash, in which you try to squash as many bugs as you can.</p>
We will start by setting up the project, add game sprites to represent the bugs, build the user-interface, and eventually, add the game logic. This article should help you learn the basics of Flame so that you can make more complex games moving forward.</p>
</p>
What is Flame?</h1>
Flame is a game engine built for Flutter that provides a complete set of solutions for building different types of games. It contains all the necessary features to build a game such as its own game loop, sprites, animations, input, and collision detection.</p>
The Flame engine follows a component system (similar to Flutter's widget tree) called Flame Component System (FCS)</code>. While this sounds like a lot, we will only be using a few of the components in this system to build our game.</p>
The Bug Squash game</h1>
I was inspired to build this simple game when the summer season arrived here in Australia. This warm weather comes with a bunch of real-life bugs crawling in our home trying to escape the heat outside. So instead of removing real life bugs (and software bugs), let's build a game where we can squash bugs.</p>
Before we write our code, let's first think about what our game should be, how it should work, and how it would look like. I want this game to be really simple so that we can understand how to use Flame in Flutter.</p>
</p>
_{Figure 1. Bug squash game design.</sub></p>}
This game is a straight forward squash as many bugs as you can type of game. These critters will appear in the screen and to get points, you need to click or tap the bugs.</p>
Project Setup</h1>
Create the project by either using the terminal with flutter create bug_squash --org com.yourname</code> or using Visual Studio Code's Flutter: New Project > Empty Application</code>. Regardless, we want a clean starter project to begin with.</p>
//Insert link to setting up a Flutter project blog post</p>
Install Flame</h2>
Add the Flame</code> library by doing running flutter pub add flame</code> command in the terminal to get the latest version. Doing so will add the dependency in your project's pubspec.yaml</code>. Another option is by directly updating the pubspec.yaml</code> and adding Flame as part of the dependencies, which at the time of writing is at version 1.14.0</code>:</p>
flutter</span> pub add flame</span></span></code></pre># pubspec.yaml</span></span>
dependencies</span>:</span></span>
  flame</span>:</span> ^1.14.0</span></span>
  flutter</span>:</span></span>
    sdk</span>:</span> flutter</span></span></code></pre>
If you run into some version conflict problems, you may run flutter pub upgrade --major-versions</code> to upgrade, and then try adding the Flame library again.</p>
Clean up main.dart</h2>
It is much easier to learn Flame if we remove the clutter in our app. Start by making sure that main.dart</code> only has the runApp()</code> function just to be sure that we are starting out from scratch. Then, let's add the minimum requirements for building a game using Flame: The GameWidget</code> and the FlameGame</code>. I will discuss these two components later but for now, make sure you have your main.dart</code> written up like this.</p>
//main.dart</span></span>
</span>
import</span> 'package:flame/game.dart'</span>;</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  runApp</span>(</span></span>
    GameWidget</span>(</span></span>
      game</span>:</span> FlameGame</span>()</span>,</span></span>
    )</span>,</span></span>
  )</span>;</span></span>
}</span></span>
</span></code></pre>Run the app on your device</h2>
You can use whichever device you want to test your game. I will be using an iPhone simulator and make sure that our code builds successfully.</p>
<img src="hello-world-bug-squash.png" alt="hello-world-bug-squash" style="zoom:100%;" /></p>
_{Figure 2.1 Hello world of Bug Squash game</sub></p>}
Alright! We have a running Flutter app using Flame as its game engine. It does not show anything, but we will eventually build our way up to our beautiful game.</p>
Now that our app is running, let's start building Bug Squash!</p>
GameWidget and FlameGame</h1>
The fundamental widget used in building a game on Flutter with Flame is the GameWidget</code>. Because it is a Widget</code>, we can insert a Flame game anywhere in the widget tree of any Flutter app. We can think of GameWidget</code> as a container for another important component of Flame called Game</code>. A Game</code> is an interface in which the game itself gets rendered. A ready made implementation of Game</code> that we will use in this project is the FlameGame</code>.</p>
Building our own Game instance</h2>
We want to add bugs, animations, and game logic in Bug Squash. The best way to do it is to create a class that extends from FlameGame</code>. Let's create a class called BugSquashGame</code> that extends FlameGame</code>. Replace the game:</code> instance in our main.dart</code> and run the app.</p>
//bug_squash_game.dart</span></span>
</span>
import</span> 'package:flame/game.dart'</span>;</span></span>
</span>
class</span> BugSquashGame</span> extends</span> FlameGame</span> {}</span></span>
</span></code></pre>// main.dart</span></span>
</span>
import</span> 'package:bug_squash_demo/bug_squash_game.dart'</span>;</span></span>
import</span> 'package:flame/game.dart'</span>;</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  runApp</span>(</span></span>
    GameWidget</span>(</span></span>
      game</span>:</span> BugSquashGame</span>()</span>,</span> // Use our BugSquashGame</span></span>
    )</span>,</span></span>
  )</span>;</span></span>
}</span></span>
</span></code></pre>
Once we have this set up, we can start adding our game logic within the BugSquashgame</code> class. If we run the app again, we will see the same screen as seen in Figure 1.</p>
Changing the background colour</h2>
We can change the default background colour by overriding the backgroundColor</code> property of BugSquashGame</code>.</p>
//bug_squash_game.dart</span></span>
</span>
import</span> 'dart:ui'</span>;</span></span>
</span>
import</span> 'package:flame/game.dart'</span>;</span></span>
</span>
class</span> BugSquashGame</span> extends</span> FlameGame</span> {</span></span>
  @override</span></span>
  Color</span> backgroundColor</span>() {</span></span>
    return const</span> Color</span>(</span>0xFFEBFBEE</span>)</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
We should see our game change its background to green.</p>
<img src="bug-squash-with-background-color.png" alt="bug-squash-with-background-color" style="zoom:100%;" /></p>
_{Figure 2.2. Updated background colour.</sub></p>}
Loading components</h1>
Components</code> in Flame represent objects that we can either see or interact within the game. In Bug Squash, we will be dealing with components</code> such as sprites that are moving around the screen in which we can squash when we tap on them. In order to load components in our game, we have to be familiar with Flame's lifecycle.</p>
</p>
_{Figure 3. The Game class lifecycle. </sub></p>}
All instances of Game</code> follows the lifecycle represented in Figure 3. For now, let's focus on the onLoad</code> method.</p>
The onLoad</code> method is where we initialise the components that we want to see in our game. If we want to add a sprite of a bug in our game, the onLoad</code> method is the best place to do so.</p>
Set up the assets directory</h2>
Flame has a proposed file structure in organising our game's assets such as videos, images, and audio. In the root directory of your project, create a folder called assets</code> and make sure you have the following structure:</p>
.</span></span>
└── assets</span></span>
    ├── audio</span></span>
    │   └── squash.mp3</span></span>
    └── images</span></span>
    		└── bug.png</span></span>
    		└── squashed_bug.png</span></span></code></pre>
You can download the assets that I used for this game using this link, or feel free to use your own sound effects and images.</p>
Don't forget to add these in your pubspec.yaml</code> to make sure that these assets are accessible from your app.</p>
# pubspec.yaml</span></span>
</span>
flutter</span>:</span></span>
  uses-material-design</span>:</span> true</span></span>
  assets</span>:</span></span>
    -</span> assets/images/bug.png</span></span>
    -</span> assets/images/squashed_bug.png</span></span>
    -</span> assets/audio/squash.mp3</span></span></code></pre>Adding sprites</h2>
Let's add a bug component in our game. We will be using a component called SpriteComponent</code> to represent our bug. A SpriteComponent</code> lets us use an image which will be rendered in our game. We learned that we can initialise and load this image in the onLoad()</code> method of our BugSquash</code> game, so let's do that.</p>
We override the onLoad()</code> method in our BugSquashGame</code> so we can load the bug sprite. Since we want to make sure that the image bug.png</code> has been loaded correctly, we need to make the onLoad()</code> method an async</code> method and wait for the image to load first.</p>
//bug_squash_game.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:ui'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:flame/game.dart'</span>;</span></span>
</span>
class</span> BugSquashGame</span> extends</span> FlameGame</span> {</span></span>
  @override</span></span>
  Color</span> backgroundColor</span>() {</span></span>
    return const</span> Color</span>(</span>0xFFEBFBEE</span>)</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    final</span> bugSprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
    final</span> bugComponent </span>=</span> SpriteComponent</span>(sprite</span>:</span> bugSprite)</span>;</span></span>
    add</span>(bugComponent)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
We first instantiate a Component</code>. A SpriteComponent</code> requires a Sprite</code> instance, therefore we instantiate the bugSprite</code> first before building the Component</code>. It can be added into the game by using the Game</code> interface method called add()</code>. Take note that the add()</code> method can be called anywhere in the lifecycle of the Game</code>, and will be displayed on the screen once the render()</code> method of the Game</code> and Component</code> has been called.</p>
If we run the updated BugSquashGame</code>, we should be able to see our bug sprite on the screen.</p>
<img src="sprite-component-rendered.png" alt="sprite-component-rendered" style="zoom:100%;" /></p>
_{Figure 4. Loading bug image in the game with SpriteComponent. </sub></p>}
So now we have successfully added the bug sprite. It may or may not be the position where we want to put this bug, but at least it's there.</p>
Position of Components</h1>
A Component</code> can be set to a particular location of the screen as long as it is a type of PositionComponent</code>. A PositionComponent</code> represents an object that can be be moved around the screen. It can also be rotated, translated, and scaled accordingly.</p>
Many of the Components</code> in Flame including the SpriteComponent</code> extends PositionComponent</code>, which means that we can move this bug around.</p>
X-Y Axis</h2>
Any position in the screen can be represented by a point defined by its x and y coordinates. The 0</code> position of the X-axis starts from the left, whilst the 0</code> of Y-axis starts at the top.</p>
</p>
_{Figure 5. Coordinate system of Flame</sub></p>}
When we loaded the bugComponent</code> in our game, its properties assumed the default values. The default position of a component is (0,0)</code> or x = 0</code> and y = 0</code>.</p>
Setting a component's position</h2>
To set the position of the Component</code>, we update the PositionComponent's</code> property called position</code> and assign a Vector2</code> value on it where the first argument is the x-coordinate</code> whilst the second is the y-coordinate</code>.</p>
//bug_squash_game.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:ui'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:flame/game.dart'</span>;</span></span>
</span>
class</span> BugSquashGame</span> extends</span> FlameGame</span> {</span></span>
  </span></span>
	//rest of the code</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    final</span> bugSprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
    final</span> bugComponent </span>=</span> SpriteComponent</span>(sprite</span>:</span> bugSprite)</span>;</span></span>
    bugComponent</span>.</span>position </span>=</span> Vector2</span>(</span>100</span>,</span> 300</span>)</span>;</span> //Set the position</span></span>
    add</span>(bugComponent)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
If we set the x-coordinate to be 100</code> and the y-coordinate to be 300</code>, then we expect the bug to be located at this part of the screen.</p>
<img src="sprite-component-updated-position.png" alt="sprite-component-updated-position" style="zoom:100%;" /></p>
_{Figure 6. Updating the position of the sprite component</sub></p>}
If the GameWidget</code> is the root widget of your app, then the Game</code> fills up the space that it can. In our BugSquashGame</code>, we can determine the size of the screen by getting the value of size</code> which is a type of Vector2</code>. We can use this value as a reference to position any component</code> anywhere within the bounds of the game's size.</p>
It means that if we want to position our component at the centre of the screen, we can set the position at the half point.</p>
//bug_squash_game.dart</span></span>
</span>
bugComponent</span>.</span>position </span>=</span> Vector2</span>(size</span>.</span>x </span>/</span> 2</span>,</span> size</span>.</span>y</span>/</span>2</span>)</span>;</span> //size is a `Game` property</span></span>
</span></code></pre>
However, if we update our code and run it, the bug is not quite at the centre as you can see in Figure 7.</p>
<img src="bug-not-in-the-centre.png" alt="bug-not-in-the-centre" style="zoom:100%;" /></p>
_{Figure 7. Bug not in the centre</sub></p>}
The reason is because we have to consider another property of a component</code> called anchor</code>.</p>
Setting a component's anchor</h2>
The anchor</code> of a component</code> is where this component is referenced and measured from in terms of its position. We can also think of the anchor as the point where we can rotate it. By default, the anchor of a component is at (0, 0)</code>, or top-left</code>.</p>
</p>
_{Figure 8. Anchor of a component</sub></p>}
It is common to always set the anchor</code> of a component to center</code> to make it more intuitive when positioning components across the screen. To do so, we can set it by using the provided Anchor</code> constants.</p>
//bug_squash_game.dart</span></span>
</span>
//rest of the code</span></span>
bugComponent</span>.</span>position </span>=</span> Vector2</span>(size</span>.</span>x </span>/</span> 2</span>,</span> size</span>.</span>y </span>/</span> 2</span>)</span>;</span></span>
bugComponent</span>.</span>anchor </span>=</span> Anchor</span>.</span>center</span>;</span></span>
add</span>(bugComponent)</span>;</span></span></code></pre>
If we run with this updated code, we should be able to see the component exactly in the middle of the screen.</p>
<img src="bug-in-the-centre.png" alt="bug-in-the-centre" style="zoom:100%;" /></p>
_{Figure 9. Bug in the center of the screen</sub></p>}
We should now know how to place any components in our game within the screen. Understanding both position and anchor should save you the headache in the long run when you are designing your own game later.</p>
Adding tap capability</h1>
Our game is squashing bugs, let's add a feature to handle tap events. By default, the SpriteComponent</code> and other Component</code> classes do not accept tap inputs. The way to add this capability is by creating our own Component</code> and implementing the mixin called TapCallbacks</code>.</p>
Creating your own Components</h2>
First, let's create a class that extends SpriteComponent</code> and call it Bug</code>. Components</code> have similar lifecycle as a Game</code>, in which we put initialisation of properties within the onLoad()</code> method.</p>
Instead of building the bug SpriteComponent</code> from the BugSquashGame</code>, we can contain this initialisation within the new Bug</code> class.</p>
// bug.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
</span>
class</span> Bug</span> extends</span> SpriteComponent</span> {</span></span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    sprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
Since we know that a Bug</code>  will always have the bug.png</code> sprite, we can initialise this sprite during the onLoad()</code> method of  our Bug</code> component. This Bug</code> can now be instantiated anywhere in the app, but for now, let's create one in BugSquashGame</code>.</p>
//bug_squash_game.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:ui'</span>;</span></span>
</span>
import</span> 'package:bug_squash_demo/bug.dart'</span>;</span></span>
import</span> 'package:flame/game.dart'</span>;</span></span>
import</span> 'package:flame/particles.dart'</span>;</span></span>
</span>
class</span> BugSquashGame</span> extends</span> FlameGame</span> {</span></span>
  @override</span></span>
  Color</span> backgroundColor</span>() {</span></span>
    return const</span> Color</span>(</span>0xFFEBFBEE</span>)</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    final</span> bugComponent </span>=</span> Bug</span>()</span>;</span></span>
    bugComponent</span>.</span>position </span>=</span> Vector2</span>(size</span>.</span>x </span>/</span> 2</span>,</span> size</span>.</span>y </span>/</span> 2</span>)</span>;</span></span>
    bugComponent</span>.</span>anchor </span>=</span> Anchor</span>.</span>center</span>;</span></span>
    add</span>(bugComponent)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
If we run the updated code, we should see the same result as Figure 9. Nothing has changed except that we have a more customisable Bug</code> component.</p>
Implementing the TapCallbacks mixin</h2>
To make our component tappable, we need to implement the TapCallbacks</code> mixin. This interface has few methods we can use to handle inputs such as tapping down, tapping up, long tap, and even cancelling the tap. In our Bug Squash game, we will just handle the event of tapping down the bug.</p>
// bug.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:flame/events.dart'</span>;</span></span>
</span>
class</span> Bug</span> extends</span> SpriteComponent</span> with</span> TapCallbacks</span> {</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    sprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  void</span> onTapDown</span>(</span>TapDownEvent</span> event) {</span></span>
    //Write logic when the bug is tapped.</span></span>
  }</span></span>
}</span></span>
</span></code></pre>Adding sound effects</h1>
Now to the fun part, let's add a sound effect whenever we tap the bug on the screen. Make sure that you have added the squash.mp3</code> audio file in your project, as well as putting it in the correct directory. See [set up the assets section](#Set up the assets directory) to be sure.</p>
Unfortunately, Flame</code> does not have an audio player built in the same library. We have to add this separately in our project.</p>
flutter</span> pub add flame_audio</span></span></code></pre>
This should add the dependency in your pubspec.yaml</code>.</p>
Then, all we need to do is to play this sound whenever we tap the bug.</p>
// bug.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:flame/events.dart'</span>;</span></span>
import</span> 'package:flame_audio/flame_audio.dart'</span>;</span></span>
</span>
class</span> Bug</span> extends</span> SpriteComponent</span> with</span> TapCallbacks</span> {</span></span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    sprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  void</span> onTapDown</span>(</span>TapDownEvent</span> event) {</span></span>
    FlameAudio</span>.</span>play</span>(</span>"squash.mp3"</span>)</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
If you don't hear any sound, try closing the app and then rebuild your code as FlameAudio</code> requires some rebuilding when being added into a project.</p>
You should now be able to hear the bug being squashed!</p>
Displaying the bug being squashed</h1>
When we tap the bug, it is better to see the bug being squashed to inform us that we should squash the next bug. There are many ways we can do this, but I will show you one option.</p>
Composition of components</h2>
The components</code> of Flame were designed to be composable just like Flutter widgets. A component can have multiple children</code> components which can be grouped however it would make sense to you.</p>
An example of this is the BugSquashGame</code> that we have. This class extends from FlameGame</code> which is, you guess it, is also a component</code>. The BugSquashGame</code> can contain multiple components such as Bug</code>, Score</code>, and other user interface that we want to add. Think of it as a container of components.</p>
</p>
Figure 10. Components having children components</p>
We can use this idea to add an effect of the bug being squashed by adding a child component to the Bug</code> component class. The Bug</code> class can have a SpriteComponent</code> child that has an image of a squashed bug. We use the  add()</code> method of Component</code> to add this sprite inside the onLoad()</code> function.</p>
// bug.dart</span></span>
</span>
	//rest of the code</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    sprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
</span>
    final</span> squashedBugSprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'squashed_bug.png'</span>)</span>;</span></span>
    final</span> squashedBugComponent </span>=</span> SpriteComponent</span>(sprite</span>:</span> squashedBugSprite)</span>;</span></span>
    add</span>(squashedBugComponent)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
  </span></span>
  //rest of the code</span></span></code></pre>
If you run your project with the updated code above, you will see that the squashed bug is on top of our normal bug sprite. Adding a component always go on top of previously added components by default in that order. You can change this behaviour by updating the priority</code> property of a component</code> (the higher priority, the more front the component will be).</p>
<img src="squashed-bug-over-bug.png" alt="squashed-bug-over-bug" style="zoom:100%;" /></p>
Figure 11. Squashed bug</p>
Our Bug</code> component has a child SpriteComponent</code> that shows a squashed bug. But this is not the behaviour that we want. We expect this sprite to only appear after we tap on the bug. That's the game!</p>
Let's fix this by hiding the splatter, and only show it after tapping the bug. What we can do is to set the opacity</code> of the splatter to be 0, so we don't see it initially. Once we tap it, we can set the opacity to 100% so we can see it.</p>
// bug.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:flame/events.dart'</span>;</span></span>
import</span> 'package:flame_audio/flame_audio.dart'</span>;</span></span>
</span>
class</span> Bug</span> extends</span> SpriteComponent</span> with</span> TapCallbacks</span> {</span></span>
  late</span> SpriteComponent</span> _squashedBugComponent</span>;</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    sprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
</span>
    final</span> squashedBugSprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'squashed_bug.png'</span>)</span>;</span></span>
    _squashedBugComponent </span>=</span> SpriteComponent</span>(sprite</span>:</span> squashedBugSprite)</span>;</span></span>
    _squashedBugComponent</span>.</span>opacity </span>=</span> 0</span>;</span></span>
    add</span>(_squashedBugComponent)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  void</span> onTapDown</span>(</span>TapDownEvent</span> event) {</span></span>
    FlameAudio</span>.</span>play</span>(</span>"squash.mp3"</span>)</span>;</span></span>
    _squashedBugComponent</span>.</span>opacity </span>=</span> 1</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
We made the squashedBugComponent</code> to be a private variable inside the Bug</code> class so that it can be accessed across different method. We initially set the opacity</code> to 0 in onLoad()</code> and set it to 100%  opacity = 1</code> when we tap the bug. The visual effect should be better!</p>
</p>
Video 1. The bug is squashed when tapped</p>
As we can see in Video 1, the basic logic of our app is now working!</p>
Animating Components using Effects</h1>
A game is boring if nothing is moving around. Let's solve this by using Effects</code>. An Effect</code> is a type of Component</code> that changes its properties over time. Time moves forward when a game is running, and Effects</code> use this to alter a Component</code>'s properties such as angle, position, opacity, and more.</p>
There are many types of Effects</code>, but for this game, we will only use a few.</p>
Moving a Component using MoveEffect</h2>
The simplest way to move a Component around is by using the MoveEffect</code>.  This effect changes the position of a component in different ways. Let's start with MoveEffect.to()</code>.</p>
The MoveEffect.to()</code> accepts two arguments;  a destination represented by a Vector2</code> and EffectController</code> which determines the time and approach a component would take to reach the destination.</p>
Let's try an example. Add the following code at the end of onLoad()</code> function in bug.dart</code>.</p>
// bug.dart</span></span>
</span>
	//rest of the code</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    sprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
</span>
    final</span> squashedBugSprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'squashed_bug.png'</span>)</span>;</span></span>
    _squashedBugComponent </span>=</span> SpriteComponent</span>(sprite</span>:</span> squashedBugSprite)</span>;</span></span>
    _squashedBugComponent</span>.</span>opacity </span>=</span> 0</span>;</span></span>
    add</span>(_squashedBugComponent)</span>;</span></span>
</span>
    //Add move effect</span></span>
    final</span> destination </span>=</span> Vector2</span>(</span>100</span>,</span> 600</span>)</span>;</span></span>
    final</span> effectController </span>=</span> EffectController</span>(</span></span>
      startDelay</span>:</span> 2.0</span>,</span></span>
      duration</span>:</span> 1.0</span>,</span></span>
    )</span>;</span></span>
    final</span> moveEffect </span>=</span> MoveEffect</span>.</span>to</span>(destination</span>,</span> effectController)</span>;</span></span>
    add</span>(moveEffect)</span>;</span></span>
		</span></span>
    super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
 </span></span>
	//rest of the code</span></span>
</span>
}</span></span>
</span></code></pre>
The MoveEffect.to()</code> is a method to use if we want to change the position of a Component</code> to a specific location on the screen using a Vector2</code> type. The EffectController</code> can be used to change how an Effect</code> is done, whether it would repeat, reverse, how fast, and more.</p>
Using the code above, the bug will start moving to position x: 100 and y: 600</code> after 2 seconds</code>. The duration of this movement will last for 1 second.</p>
</p>
Video 2. Bug movement (It's stuttering due to .gif compression)</p>
Of course, there are many other types of MoveEffect</code> that you can use, so feel free to find out what works best for your game.</p>
Changing the angle of a component</h2>
The movement of the bug shown in Video 2 does not seem natural because the bug is facing up the entire time while moving.  Let's change the angle of the bug to the direction of movement.</p>
</p>
Figure 12. Relative angles in radians</p>
In Flame, the angle</code> property of a Component</code> is represented in radians</code>. Since the bug is facing up, we can assume that the upwards direction is 0 radians</code>. Since it's moving to the bottom-left, that direction is around 5 * pi / 4</code>.</p>
// bug.dart</span></span>
</span>
//rest of the code</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    sprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
</span>
    final</span> squashedBugSprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'squashed_bug.png'</span>)</span>;</span></span>
    _squashedBugComponent </span>=</span> SpriteComponent</span>(sprite</span>:</span> squashedBugSprite)</span>;</span></span>
    _squashedBugComponent</span>.</span>opacity </span>=</span> 0</span>;</span></span>
    add</span>(_squashedBugComponent)</span>;</span></span>
</span>
    //Change the bug angle</span></span>
    angle </span>=</span> 5</span> *</span> pi </span>/</span> 4</span>;</span></span>
    </span></span>
    //Add move effect</span></span>
    final</span> destination </span>=</span> Vector2</span>(</span>100</span>,</span> 600</span>)</span>;</span></span>
    final</span> effectController </span>=</span> EffectController</span>(</span></span>
      startDelay</span>:</span> 2.0</span>,</span></span>
      duration</span>:</span> 1.0</span>,</span></span>
    )</span>;</span></span>
    final</span> moveEffect </span>=</span> MoveEffect</span>.</span>to</span>(destination</span>,</span> effectController)</span>;</span></span>
    add</span>(moveEffect)</span>;</span></span>
</span>
    super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
</span>
	//rest of the code</span></span>
}</span></span>
</span></code></pre>Removing components</h1>
Our game should have multiple bugs running around. Once they are squashed, they should disappear from the game. A convenient way to do this is to remove the bug Component</code> from the game. This will also save your device's memory in the long run the moment you have a lot of bugs running around the screen.</p>
A parent Component</code> has a method called remove()</code> to dispose the a child Component</code>. In our code, we can add a logic in our BugSquashGame</code> to remove a Bug</code> when tapped. We should also keep track of the Bug</code> components that the game has added.</p>
The first thing we can change is how we set the OnTapDown</code> method of Bug</code>. We can keep the logic of playing the squash sound effect and making the visual effect appear. However, we need to set another logic to remove this Bug</code> from the parent. We will do this by making the onTapDown</code> method settable outside the class.</p>
// bug.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:math'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:flame/effects.dart'</span>;</span></span>
import</span> 'package:flame/events.dart'</span>;</span></span>
import</span> 'package:flame_audio/flame_audio.dart'</span>;</span></span>
</span>
class</span> Bug</span> extends</span> SpriteComponent</span> with</span> TapCallbacks</span> {</span></span>
  late</span> SpriteComponent</span> _squashedBugComponent</span>;</span></span>
</span>
  Function</span>()</span>?</span> onTap</span>;</span></span>
</span>
  late</span> MoveEffect</span> _moveEffect</span>;</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    sprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
</span>
    final</span> squashedBugSprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'squashed_bug.png'</span>)</span>;</span></span>
    _squashedBugComponent </span>=</span> SpriteComponent</span>(sprite</span>:</span> squashedBugSprite)</span>;</span></span>
    _squashedBugComponent</span>.</span>opacity </span>=</span> 0</span>;</span></span>
    add</span>(_squashedBugComponent)</span>;</span></span>
</span>
    //Change the bug angle</span></span>
    angle </span>=</span> 5</span> *</span> pi </span>/</span> 4</span>;</span></span>
</span>
    //Add move effect</span></span>
    final</span> destination </span>=</span> Vector2</span>(</span>100</span>,</span> 600</span>)</span>;</span></span>
    final</span> effectController </span>=</span> EffectController</span>(</span></span>
      startDelay</span>:</span> 2.0</span>,</span></span>
      duration</span>:</span> 1.0</span>,</span></span>
    )</span>;</span></span>
    _moveEffect </span>=</span> MoveEffect</span>.</span>to</span>(destination</span>,</span> effectController)</span>;</span></span>
    add</span>(_moveEffect)</span>;</span></span>
</span>
    super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  void</span> onTapDown</span>(</span>TapDownEvent</span> event) {</span></span>
    //Stop the movement of the bug when tapped.</span></span>
    if</span> (</span>!</span>_moveEffect</span>.</span>isPaused) {</span></span>
      _moveEffect</span>.</span>pause</span>()</span>;</span></span>
    }</span></span>
    FlameAudio</span>.</span>play</span>(</span>"squash.mp3"</span>)</span>;</span></span>
    _squashedBugComponent</span>.</span>opacity </span>=</span> 1</span>;</span></span>
</span>
    // Call the onTap method set by the parent component</span></span>
    onTap</span>?</span>.</span>call</span>()</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>//bug_squash_game.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:ui'</span>;</span></span>
</span>
import</span> 'package:bug_squash_demo/bug.dart'</span>;</span></span>
import</span> 'package:flame/game.dart'</span>;</span></span>
import</span> 'package:flame/particles.dart'</span>;</span></span>
</span>
class</span> BugSquashGame</span> extends</span> FlameGame</span> {</span></span>
  @override</span></span>
  Color</span> backgroundColor</span>() {</span></span>
    return const</span> Color</span>(</span>0xFFEBFBEE</span>)</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    final</span> bugComponent </span>=</span> Bug</span>()</span>;</span></span>
    bugComponent</span>.</span>position </span>=</span> Vector2</span>(size</span>.</span>x </span>/</span> 2</span>,</span> size</span>.</span>y </span>/</span> 2</span>)</span>;</span></span>
    bugComponent</span>.</span>anchor </span>=</span> Anchor</span>.</span>center</span>;</span></span>
</span>
    // Remove the bug 500 ms after tapping</span></span>
    bugComponent</span>.</span>onTap </span>=</span> () {</span></span>
      Future</span>.</span>delayed</span>(</span>const</span> Duration</span>(milliseconds</span>:</span> 500</span>))</span>.</span>then</span>(</span></span>
        (value) {</span></span>
          if</span> (</span>!</span>bugComponent</span>.</span>isRemoved) {</span></span>
            remove</span>(bugComponent)</span>;</span></span>
          }</span></span>
        }</span>,</span></span>
      )</span>;</span></span>
    }</span>;</span></span>
</span>
    add</span>(bugComponent)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
We add a slight delay before removing the component so we can still see the squash effect and hear the sound before making the bug disappear from the screen. Also keep in mind that the bug should stop moving immediately after squashing the bug to make squashing the bug more believable.</p>
</p>
Video 3. Bug stops and is removed after tapping.</p>
The app should now behave as seen in Video 3. All the basic functions of our game has been implemented. We now know how to add, animate, and remove a component. For the next part of this tutorial, we will add the logic of adding multiple bugs on the screen and keeping a count of the number of bugs squashed.</p>
Adding more bugs to squash</h1>
To keep the game simple, we can add a timer function that will continuously add bugs in our game. Let's add a limit so our game won't be filled with thousands of bugs, unless that's what you want in your game.</p>
It is also important to note that we have not randomised the location where the bugs would appear, as well as their movement patterns. For now, let's make the game easy and make the bugs appear from the bottom side, and will just walk straight to the top.</p>
Move the Bug Component from left to right</h2>
If we want to make the Bug</code> move across the screen from left to right, it needs to know the size of the game and how far it will travel. The Bug</code>  component does not hold any information about its parent component. However, we know that Bug</code> will always be part of our BugSquash</code> game.</p>
We can use a mixin called HasGameReference<></code> implemented by Flame</code> to make our component know that it is part of a Game</code> component. Let's use this approach so that the Bug</code> can access the size</code> of the game from its properties.</p>
// bug.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:math'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:flame/effects.dart'</span>;</span></span>
import</span> 'package:flame/events.dart'</span>;</span></span>
import</span> 'package:flame_audio/flame_audio.dart'</span>;</span></span>
</span>
class</span> Bug</span> extends</span> SpriteComponent</span> with</span> TapCallbacks</span>,</span> HasGameReference</span><</span>BugSquashGame</span>> {</span></span>
 </span></span>
  //rest of the code</span></span></code></pre>
Once Bug</code> is implementing the HasGameReference<BugSquashGame></code>, we can use the reference game</code> to update our MoveEffect</code> to move by the game's width. We should add the Bug</code>'s width in this movement so that the bug disappears at the right side.</p>
We will also have to clear this bug after the move effect is finished since they are not needed anymore.</p>
// bug.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:math'</span>;</span></span>
</span>
import</span> 'package:bug_squash_demo/bug_squash_game.dart'</span>;</span></span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:flame/effects.dart'</span>;</span></span>
import</span> 'package:flame/events.dart'</span>;</span></span>
import</span> 'package:flame_audio/flame_audio.dart'</span>;</span></span>
</span>
class</span> Bug</span> extends</span> SpriteComponent</span></span>
    with</span> TapCallbacks</span>,</span> HasGameReference</span><</span>BugSquashGame</span>> {</span></span>
  late</span> SpriteComponent</span> _squashedBugComponent</span>;</span></span>
</span>
  Function</span>()</span>?</span> onTap</span>;</span></span>
</span>
  late</span> MoveEffect</span> _moveEffect</span>;</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    sprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'bug.png'</span>)</span>;</span></span>
</span>
    final</span> squashedBugSprite </span>=</span> await</span> Sprite</span>.</span>load</span>(</span>'squashed_bug.png'</span>)</span>;</span></span>
    _squashedBugComponent </span>=</span> SpriteComponent</span>(sprite</span>:</span> squashedBugSprite)</span>;</span></span>
    _squashedBugComponent</span>.</span>opacity </span>=</span> 0</span>;</span></span>
    add</span>(_squashedBugComponent)</span>;</span></span>
</span>
    //Set the bug angle to face right</span></span>
    angle </span>=</span> pi </span>/</span> 2</span>;</span></span>
    //Set the bug position where it is not visible from the left</span></span>
    position </span>=</span> Vector2</span>(</span>-</span>size</span>.</span>x</span>,</span> position</span>.</span>y)</span>;</span></span>
</span>
    //Move the bug from left to right</span></span>
    final</span> destination </span>=</span> Vector2</span>(game</span>.</span>size</span>.</span>x </span>+</span> (</span>2</span> *</span> size</span>.</span>x)</span>,</span> 0</span>)</span>;</span></span>
    final</span> effectController </span>=</span> EffectController</span>(</span></span>
      startDelay</span>:</span> 2.0</span>,</span></span>
      duration</span>:</span> 0.8</span>,</span></span>
    )</span>;</span></span>
    _moveEffect </span>=</span> MoveEffect</span>.</span>by</span>(destination</span>,</span> effectController)</span>;</span></span>
    </span></span>
    // Remove this bug after movement is finished</span></span>
    _moveEffect</span>.</span>onComplete </span>=</span> () {</span></span>
      parent</span>?</span>.</span>remove</span>(this)</span>;</span></span>
    }</span>;</span></span>
    add</span>(_moveEffect)</span>;</span></span>
</span>
    super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  void</span> onTapDown</span>(</span>TapDownEvent</span> event) {</span></span>
    //Stop the movement of the bug when tapped.</span></span>
    if</span> (</span>!</span>_moveEffect</span>.</span>isPaused) {</span></span>
      _moveEffect</span>.</span>pause</span>()</span>;</span></span>
    }</span></span>
    FlameAudio</span>.</span>play</span>(</span>"squash.mp3"</span>)</span>;</span></span>
    _squashedBugComponent</span>.</span>opacity </span>=</span> 1</span>;</span></span>
</span>
    // Call the onTap method set by the parent component</span></span>
    onTap</span>?</span>.</span>call</span>()</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
The BugSquashGame</code> should be updated as well so that the bugs created are in a random y-position. The value of the y-position ranges from 0 to the game's height. We set the angle of the Bug</code> to be facing right so that the movement would look more natural.</p>
//bug_squash_game.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:math'</span>;</span></span>
import</span> 'dart:ui'</span>;</span></span>
</span>
import</span> 'package:bug_squash_demo/bug.dart'</span>;</span></span>
import</span> 'package:flame/game.dart'</span>;</span></span>
import</span> 'package:flame/particles.dart'</span>;</span></span>
</span>
class</span> BugSquashGame</span> extends</span> FlameGame</span> {</span></span>
  @override</span></span>
  Color</span> backgroundColor</span>() {</span></span>
    return const</span> Color</span>(</span>0xFFEBFBEE</span>)</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() </span>async</span> {</span></span>
    final</span> bugComponent </span>=</span> _createBug</span>()</span>;</span></span>
    // Remove the bug 500 ms after tapping</span></span>
    bugComponent</span>.</span>onTap </span>=</span> () {</span></span>
      Future</span>.</span>delayed</span>(</span>const</span> Duration</span>(milliseconds</span>:</span> 500</span>))</span>.</span>then</span>(</span></span>
        (value) {</span></span>
          if</span> (</span>!</span>bugComponent</span>.</span>isRemoved) {</span></span>
            remove</span>(bugComponent)</span>;</span></span>
          }</span></span>
        }</span>,</span></span>
      )</span>;</span></span>
    }</span>;</span></span>
    add</span>(bugComponent)</span>;</span></span>
    return</span> super</span>.</span>onLoad</span>()</span>;</span></span>
  }</span></span>
</span>
  Bug</span> _createBug</span>() {</span></span>
    final</span> bugComponent </span>=</span> Bug</span>()</span>;</span></span>
    final</span> gameHeight </span>=</span> size</span>.</span>y</span>;</span></span>
    final</span> randomYPosition </span>=</span> Random</span>()</span>.</span>nextDouble</span>() </span>*</span> gameHeight</span>;</span></span>
    bugComponent</span>.</span>anchor </span>=</span> Anchor</span>.</span>center</span>;</span></span>
    bugComponent</span>.</span>position </span>=</span> Vector2</span>(</span>0</span>,</span> randomYPosition)</span>;</span></span>
    bugComponent</span>.</span>angle </span>=</span> pi </span>/</span> 2</span>;</span></span>
    return</span> bugComponent</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
If we run the updated code, we should be seeing the bug crawling from left to right from a random y-position.</p>
</p>
Video 4. Bug moving from left to right.</p>
Adding more bugs</h2>
The last thing we want to do is to add a function that will continously add bugs. To keep it simple, we can add a bug every second until we close the app by using a Timer</code> class from Flame</code>.</p>
The Timer</code> class accepts an argument limit</code> which defines the time interval in which function, onTick</code>, will be called. For our use case, we can set the limit</code> to 1.0 second. We should also set the repeat</code> argument to true</code>. The onTick</code> function will be a function to add a Bug</code> in the game.</p>
Using the update() method</h2>
Finally, we need to override the method update()</code> from the Game</code> class. The update</code> method is called every game loop to give us an option on what to do with with the game based on the time elapsed. In this case, we want to create a Bug</code> after 1 second has elapsed.</p>
Since we are using the Timer</code> class from Flame</code>, all the implementation has been made for us, and we just need to call Timer</code>'s update()</code> function inside our BugSquashGame</code>'s update method.</p>
Following all these instructions, our new BugSquashGame</code> will look like this.</p>
//bug_squash_game.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:math'</span>;</span></span>
import</span> 'dart:ui'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:bug_squash_demo/bug.dart'</span>;</span></span>
import</span> 'package:flame/game.dart'</span>;</span></span>
</span>
class</span> BugSquashGame</span> extends</span> FlameGame</span> {</span></span>
  late</span> Timer</span> _interval</span>;</span></span>
</span>
  BugSquashGame</span>() {</span></span>
    _interval </span>=</span> Timer</span>(</span>1.0</span>,</span> onTick</span>:</span> _createBug</span>,</span> repeat</span>:</span> true</span>)</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  void</span> update</span>(</span>double</span> dt) {</span></span>
    _interval</span>.</span>update</span>(dt)</span>;</span></span>
    super</span>.</span>update</span>(dt)</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  Color</span> backgroundColor</span>() {</span></span>
    return const</span> Color</span>(</span>0xFFEBFBEE</span>)</span>;</span></span>
  }</span></span>
</span>
  // Function to be called in onTick() every 1 second</span></span>
  void</span> _createBug</span>() {</span></span>
    final</span> bugComponent </span>=</span> Bug</span>()</span>;</span></span>
    final</span> gameHeight </span>=</span> size</span>.</span>y</span>;</span></span>
    final</span> randomYPosition </span>=</span> Random</span>()</span>.</span>nextDouble</span>() </span>*</span> gameHeight</span>;</span></span>
    bugComponent</span>.</span>anchor </span>=</span> Anchor</span>.</span>center</span>;</span></span>
    bugComponent</span>.</span>position </span>=</span> Vector2</span>(</span>0</span>,</span> randomYPosition)</span>;</span></span>
    bugComponent</span>.</span>angle </span>=</span> pi </span>/</span> 2</span>;</span></span>
    bugComponent</span>.</span>onTap </span>=</span> () {</span></span>
      Future</span>.</span>delayed</span>(</span>const</span> Duration</span>(milliseconds</span>:</span> 500</span>))</span>.</span>then</span>(</span></span>
        (value) {</span></span>
          if</span> (</span>!</span>bugComponent</span>.</span>isRemoved) {</span></span>
            remove</span>(bugComponent)</span>;</span></span>
          }</span></span>
        }</span>,</span></span>
      )</span>;</span></span>
    }</span>;</span></span>
    add</span>(bugComponent)</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
Notice that we have removed overriding the onLoad()</code> function. We can do this because we create the Bug</code> after the BugSquashGame</code> has been created through the _interval</code> timer variable. Now every second, a new Bug</code> will be spawned randomly at the left side of the screen.</p>
</p>
Video 5. Spawn bugs continuously.</p>
Our game is now taking shape! There will be bugs crawling from left to right and it's up to you to squash them as soon as you can.</p>
The last thing that we will do is to add the number of bugs squashed somewhere on the screen.</p>
Adding the number of bugs squashed</h1>
The last part of this tutorial is to add a counter for the number of bugs squashed. One way to do this is to use a TextComponent</code> where you can render any text on your game. Since this is a Component</code>, using it would be the same as how we did with our sprite and effects.</p>
We add the scoring logic in the BugSquashGame</code> as this class has the general knowledge of how the game is played. The score can be stored in the _score</code> variable, and is displayed by the TextComponent</code> called _scoreComponent</code>. Let's bring the old onLoad()</code> method to initialise the new component.</p>
Initialising the TextComponent</h2>
A TextComponent</code> can be initialised by setting the text and its text style. It is good to note that it is a subclass of PositionComponent</code>, which means that we can put this anywhere in the game by updating the position</code> property.</p>
//bug_squash_game.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:math'</span>;</span></span>
</span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:bug_squash_demo/bug.dart'</span>;</span></span>
import</span> 'package:flame/game.dart'</span>;</span></span>
import</span> 'package:flame/text.dart'</span>;</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> BugSquashGame</span> extends</span> FlameGame</span> {</span></span>
	</span></span>
  //rest of the code</span></span>
  </span></span>
  late</span> TextComponent</span> _scoreComponent</span>;</span></span>
  int</span> _score </span>=</span> 0</span>;</span></span>
</span>
	//rest of the code</span></span>
</span>
  @override</span></span>
  FutureOr</span><</span>void</span>></span> onLoad</span>() {</span></span>
    _scoreComponent </span>=</span> TextComponent</span>(</span></span>
      text</span>:</span> "$</span>_score</span>"</span>,</span></span>
      textRenderer</span>:</span> TextPaint</span>(</span></span>
        style</span>:</span> const</span> TextStyle</span>(color</span>:</span> Colors</span>.</span>black</span>,</span> fontSize</span>:</span> 24.0</span>)</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
    _scoreComponent</span>.</span>anchor </span>=</span> Anchor</span>.</span>center</span>;</span></span>
    _scoreComponent</span>.</span>position </span>=</span> Vector2</span>(size</span>.</span>x </span>/</span> 2</span>,</span> 100</span>)</span>;</span></span>
    add</span>(_scoreComponent)</span>;</span></span>
  }</span></span>
  </span></span>
  //rest of the code</span></span>
}</span></span>
</span></code></pre>
The _scoreComponent</code> should be displayed at the top centre part of the game. Running this updated code should show you the default score of 0</code>.</p>
</p>
Figure 13. Game with default score of 0.</p>
Updating the score when tapping the bug</h2>
The last important bit that we have to do is to increment the score by 1</code> whenever we tap a bug. We can add this logic inside the onTap</code> function that we set in the Bug</code> class.</p>
//bug_squash_game.dart</span></span>
</span>
//rest of the code</span></span>
		bugComponent</span>.</span>onTap </span>=</span> () {</span></span>
      _scoreComponent</span>.</span>text </span>=</span> "${++</span>_score</span>}"</span>;</span> // Increment the score</span></span>
      Future</span>.</span>delayed</span>(</span>const</span> Duration</span>(milliseconds</span>:</span> 500</span>))</span>.</span>then</span>(</span></span>
        (value) {</span></span>
          if</span> (</span>!</span>bugComponent</span>.</span>isRemoved) {</span></span>
            remove</span>(bugComponent)</span>;</span></span>
          }</span></span>
        }</span>,</span></span>
      )</span>;</span></span>
    }</span>;</span></span>
//rest of the code</span></span></code></pre>
This will work fine. However, you will notice that if you tap on a Bug</code> multiple times, the score increases as much. The expected behaviour should be to only increment the score by 1</code> per bug, not by the number of taps. The fix for this can be added inside the Bug</code> class' onTapDown</code> implementation.</p>
// bug.dart</span></span>
</span>
import</span> 'dart:async'</span>;</span></span>
import</span> 'dart:math'</span>;</span></span>
</span>
import</span> 'package:bug_squash_demo/bug_squash_game.dart'</span>;</span></span>
import</span> 'package:flame/components.dart'</span>;</span></span>
import</span> 'package:flame/effects.dart'</span>;</span></span>
import</span> 'package:flame/events.dart'</span>;</span></span>
import</span> 'package:flame_audio/flame_audio.dart'</span>;</span></span>
</span>
class</span> Bug</span> extends</span> SpriteComponent</span></span>
    with</span> TapCallbacks</span>,</span> HasGameReference</span><</span>BugSquashGame</span>> {</span></span>
  </span></span>
  //rest of the code..</span></span>
  </span></span>
  var</span> _isAlive </span>=</span> true</span>;</span> //status of the bug</span></span>
  </span></span>
  @override</span></span>
  void</span> onTapDown</span>(</span>TapDownEvent</span> event) {</span></span>
    //Stop the movement of the bug when tapped.</span></span>
    if</span> (</span>!</span>_moveEffect</span>.</span>isPaused) {</span></span>
      _moveEffect</span>.</span>pause</span>()</span>;</span></span>
    }</span></span>
    FlameAudio</span>.</span>play</span>(</span>"squash.mp3"</span>)</span>;</span></span>
    _squashedBugComponent</span>.</span>opacity </span>=</span> 1</span>;</span></span>
</span>
    // Call the onTap method set by the parent component</span></span>
    if</span> (_isAlive) {</span></span>
      _isAlive </span>=</span> false</span>;</span></span>
      onTap</span>?</span>.</span>call</span>()</span>;</span></span>
    }</span></span>
  }</span></span>
  </span></span>
  //rest of the code..</span></span>
  </span></span>
}</span></span>
  </span></span></code></pre>
When we tap the bug while it's still alive, we should first set it to be dead by clearing the _isAlive</code> flag. Only if it is still alive that we call the callback function onTap()</code> that we set from the BugSquashGame</code>. This way, the onTap()</code> method won't be spammed to inflate the score.</p>
If I change the _interval</code> of spawning bugs from 1 second to 0.4 seconds in BugSquashGame</code>, the final result will look something like this.</p>
</p>
Video 6. Final version of the app with spawn interval of 0.4 seconds</p>
Conclusion</h1>
That's all I have for this simple game of squashing bugs using Flutter</code> and Flame</code>. For now, we have a game where the goal is to squash as much bugs as you can as they appear from the left side of the screen.</p>
One way to improve this game further is to have a more customised and randomised path for the bugs to crawl through. You can also add stages, timers, and even multiple screens if you want to.</p>
I encourage you to learn more about Flame</code> to make cross-platform games with Flutter</code> and share it to the world.</p>

References</h1>

https://docs.flame-engine.org/latest/</a></li>
</ul>


My 2024 plans and goals for rafaelds
2024-01-30T00:00:00+00:00
Some of you know that I started rafaelds</code> as my outlet to learn (and share) anything about mobile app development with Flutter. I usually build Flutter apps to help myself automate repetitive tasks related to my work and life, and I usually write articles about the things I learn whilst building those apps.</p>
I have received some feedback regarding the structure of rafaelds. The most impactful feedback that I got was about the website not having a direction. It would be nice if visitors to the website would find out how and where to start if they want to build apps with Flutter. Currently, rafaelds has just random articles about Flutter.</p>
I want to acknowledge your feedback and suggestions by coming up with a plan of action and goals for 2024.</p>
2024 Goals</h1>
I only have 4 goals for rafaelds this year. I'll be happy if I can do more, but I will try to prioritise these goals first.</p>
📖  Free e-book to learn Flutter from scratch by building a full-fledged app
📑  Improve the free Flutter widget cheat sheet PDF
📝  At least 2 articles/tutorials per month
📝  Write at least 15 articles</p>
📖  Free e-book to learn Flutter from scratch by building a full-fledged app</h1>
My main goal this year is to write up a zero-to-hero tutorial for learning Flutter in e-book format. This e-book will guide you to build an app whilst touching on the important aspects of app development.</p>
Everything found in this e-book should be available online across different sources. The difference is I want to make it as accessible to everyone as I can. I believe that having most of the things we need to build an app compiled in one place will drastically speed up the learning process. The only thing to worry about is making the time to read it and build apps with Flutter.</p>
📑  Improve the free Flutter widget cheat sheet PDF</h1>
I am currently in the works of building a tool (using Flutter) so I can easily update this PDF and add more common widgets. I made this PDF using Sketch.app</code> but it proved to be time-consuming if I wanted to add more content.</p>
If you have any suggestions on this, please let me know!</p>
📝  At least 2 articles / tutorials per month</h1>
I already failed this goal for January since it is almost February 😅. But this year, I plan to make more time for writing articles and be consistent with it. At the minimum, 1 article every fortnight should be enough.</p>
📝  Write at least 15 articles for the year</h1>
15 articles is not a lot, but having more Flutter content is definitely better. I started in June of 2023 last year and was able to write 14 articles until December. I plan to add more Flutter tutorials regarding architecture, patterns, best-practices, and the use of popular third-party libraries as these things change very frequently.</p>
Summary</h1>
To summarise, you can expect more Flutter articles and tutorials in 2024, as well as a free e-book on learning to build an app with Flutter 🔥.</p>
Happy coding!
Raf</p>


Trying out Advent of Code 2023
2023-12-03T00:00:00+00:00
As per tradition, Eric Wastl</a> has already started the 2023 Advent of Code</a>.</p>
My goal is to solve as much problem as I can before giving up. Let's see how far I'd get with this 😅.</p>
Platform</h2>
I'll be using Kotlin</code> using Android Studio</code>. This would mean that I would heavily depend on the pre-written Kotlin extension functions and what not to make solving these exercises faster.</p>
My solution</h2>
If you wanna see how awful and brute-forcey my solutions are (if they even run), come check it out here</a>.</p>
Have fun!</p>
Ta.</p>


How to use Isolates for parallel processing in Flutter
2023-11-07T00:00:00+00:00
Every dart program and consequently, Flutter apps, run on a single-thread event loop called Isolate</code>. This means that every asynchronous code we use, such as Future</code> and  Stream</code>, does not run on a separate thread when processed.</p>
This is important to understand because when Flutter apps start doing some heavy work, whether synchronously or asynchronously, each work will take away valuable resources that will cause your app to slow down.</p>
Dart does not support multiple threads but runs in an environment with its memory called Isolate</code>. While technically not a multi-threaded or multi-process environment, we can use Isolates</code> to run different workloads in parallel.</p>
Dart / Flutter Isolates</h2>
It might feel like the functions in our apps run in parallel when we use Future</code> calls whilst still accepting input events and updating the UI being displayed. However, according to Dart's documentation, this is not the case.</p>

_{From: https://dart.dev/language/concurrency</sub></p>}
By default, Flutter apps run on a single Isolate</code> called Main isolate</code> which accepts input events and works on some computations while updating the UI. If we replace the computations with heavy computations, we will notice a significant difference.</p>
Examples of heavy computations include image conversion, processing big data, complex mathematical functions, and more.  </span></span></code></pre>
I have made a simple app to demonstrate this behaviour. This app constantly updates the timer every ~60 milliseconds. The app also has two tasks triggered by button presses; one light process and a heavy process.</p>
In this demo app, the light computation involves a delay to represent a light task. This is similar to a light process such as retrieving data from the internet. The heavy computation on the other hand is a function that loops 1 billion times.</p>
//Light load process</span></span>
Future</span><</span>void</span>></span> _lightComputation</span>() </span>async</span> {</span></span>
  return await</span> Future</span>.</span>delayed</span>(</span>const</span> Duration</span>(seconds</span>:</span> 2</span>))</span>;</span></span>
}</span></span></code></pre>
_{Light computation function that represents light processing such as fetching data from the internet.</sub></p>}//Heavy load process</span></span>
Future</span><</span>void</span>></span> _heavyComputationWithoutIsolate</span>() {</span></span>
  int</span> x </span>=</span> 1</span>;</span></span>
  for</span> (</span>int</span> i </span>=</span> 1</span>;</span> i </span><</span> 1000000000</span>;</span> i</span>++</span>) {</span></span>
    x </span>=</span> x </span>+</span> i</span>;</span></span>
  }</span></span>
  return</span> Future</span>.</span>value</span>()</span>;</span></span>
}</span></span></code></pre>
_{Heavy computation representing light processing such as image conversions and file manipulation.</sub></p>}
Note that both functions are wrapped in a Future</code>, so one might think that everything should be fine. Let's observe this behaviour.</p>
Running light computations without Isolate</h2>
Observe the timer in the app in the video below. The time value itself is irrelevant but focus on how it gets updated.</p>

_{Light computation example.</sub></p>}
When it is a simple task, a normal asynchronous call works well. You will not notice any performance issues when you try to load something from the internet.</p>
But what happens when we do a more complicated task?</p>
Running heavy computations without Isolate</h2>
Looping through a task a billion times is a good representation of a heavy computation. As such, we need to run this on a background thread.</p>

_{Heavy computation without Isolate example.</sub></p>}
There is a noticeable jank in the timer display the moment we start running the heavy computation. Even if it runs asynchronously using Future</code>, the speed still depends on the capacity of the main Isolate</code> of the code.</p>
Running one-off computations on an Isolate</h2>
Heavy tasks need to be performed on an Isolate</code>. The simplest way to do that is by using Isolate.run()</code>.</p>
Future</span><</span>void</span>></span> _heavyComputationUsingIsolateRun</span>() </span>async</span> {</span></span>
  return await</span> Isolate</span>.</span>run</span>(</span></span>
    () {</span></span>
      _heavyComputation</span>(</span>1000000000</span>)</span>;</span></span>
    }</span>,</span></span>
  )</span>;</span></span>
}</span></span>
</span>
void</span> _heavyComputation</span>(</span>int</span> count) {</span></span>
  int</span> x </span>=</span> 1</span>;</span></span>
  for</span> (</span>int</span> i </span>=</span> 1</span>;</span> i </span><</span> count</span>;</span> i</span>++</span>) {</span></span>
    x </span>=</span> x </span>+</span> i</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
The Isolate.run()</code> method accepts a Function</code> as an argument that will run on a separate Isolate. This method allows you to offload a heavy task, runs it separately, and notifies you once it's finished.</p>
Using our simple example, the Isolate.run</code> code will result in this behaviour.</p>

_{Heavy computation using Isolate example.</sub></p>}
We have now solved our issue with the app freezing when doing a for loop 1 billion times. It makes sense that this heavy workload was offloaded to the new Isolate</code> that we just created. Happy days!</p>
The next thing to consider is how the new Isolate</code> communicates with the main Isolate</code>. Isolates</code> cannot simply access the memory space of other Isolates</code> and will result in thrown errors if you attempt to. Calling Isolate.run()</code> can only return a value to the calling Isolate</code> the moment the task has finished.</p>

_{Source: https://dart.dev/language/concurrency</sub></p>}
The solution is to communicate between Isolates</code> through ports</code>.</p>
Communication between Isolates through Isolate.spawn()</code> and ports</code></h2>
There are many reasons why some tasks performed in an Isolate</code> should communicate with the Main isolate</code>.

_{Source: https://dart.dev/language/concurrency</sub></p>}
One thing that comes to mind is informing the progress of a task. If we are converting some images, we may need to show our users the elapsed time of how long their image is being processed or how much data has been processed.</p>
Another reason for communicating between Isolates</code> is for tasks that run for a long time. The Main isolate</code> may require some data from time to time. The same thing goes in which the new Isolate</code> may need some commands from the Main isolate</code>.</p>
All of these can be implemented using Isolate.spawn()</code> and ports</code>.</p>
The common usage of Isolate.spawn()</code> is to pass two arguments; the function to run and a single</strong> argument to that function. As a simple example, if we want to use Isolate.spawn()</code> to run a function with an int</code> argument, then we do:</p>
val isolate </span>=</span> Isolate</span>.</span>spawn</span>(</span></span>
  (integerArg) {</span></span>
    //Prints 1000</span></span>
    print</span>(</span>'argument: $</span>integerArg</span>'</span>)</span></span>
  }</span>,</span></span>
  1000</span>,</span></span>
)</span>;</span></span></code></pre>
_{Isolate.spawn() code example.</sub></p>}
However, if we want these Isolates</code> to communicate with each other, we need to pass a SendPort</code>. A SendPort</code> is a channel in which an Isolate</code> can send messages that can be listened to by a ReceivePort</code>. A SendPort</code> is usually obtained by first creating a ReceivePort</code> which has a SendPort</code> field.</p>
val receivePort </span>=</span> ReceivePort</span>()</span>;</span></span>
val sendPort </span>=</span> receivePort</span>.</span>sendPort</span>()</span>;</span></span></code></pre>
_{Defining receive and send ports.</sub></p>}

_{Different Isolates talking to each other through ports.</sub></p>}
We can pass this SendPort</code> instance the moment we create an Isolate</code> using the .spawn()</code> method.</p>
final</span> receivePort </span>=</span> ReceivePort</span>()</span>;</span></span>
final</span> sendPort </span>=</span> receivePort</span>.</span>sendPort</span>;</span></span>
Isolate</span>.</span>spawn</span>(</span></span>
  (sendPort) {</span></span>
    //Use sendPort to communicate with other isolates</span></span>
  }</span>,</span></span>
  sendPort</span>,</span></span>
)</span>;</span></span></code></pre>
_{Passing the SendPort as an argument.</sub></p>}
Creating an Isolate</code> using .spawn()</code> won't let you have more than one arguments for the function that you will run.</p>
To get around this limitation, we can pass a List</code> of arguments instead containing the SendPort</code> as well as other arguments that you need to pass.</p>
final</span> receivePort </span>=</span> ReceivePort</span>()</span>;</span></span>
final</span> sendPort </span>=</span> receivePort</span>.</span>sendPort</span>;</span></span>
const</span> iterationCount </span>=</span> 10000000</span>;</span></span>
Isolate</span>.</span>spawn</span>(</span></span>
  (args) {</span></span>
    //Cast the arguments inside the list of args</span></span>
    final</span> sendPort </span>=</span> args[</span>0</span>] </span>as</span> SendPort</span>;</span></span>
    final</span> countIteration </span>=</span> args[</span>1</span>] </span>as</span> int</span>;</span></span>
    </span></span>
    //Use the arguments as you need</span></span>
  }</span>,</span></span>
  [sendPort</span>,</span> iterationCount]</span>,</span> //List argument</span></span>
)</span>;</span></span></code></pre>
_{Use a List of arguments to get around the single argument limitation</sub></p>}
The next thing to do is to typecast these arguments in the function to use them correctly.</p>
The last step is to listen to the messages sent by the child Isolate</code> through the ReceivePort</code> that we just created.</p>
final</span> receivePort </span>=</span> ReceivePort</span>()</span>;</span></span>
final</span> sendPort </span>=</span> receivePort</span>.</span>sendPort</span>;</span></span>
const</span> iterationCount </span>=</span> 10000000</span>;</span></span>
</span>
receivePort</span>.</span>listen</span>((message) {</span></span>
  //Process the message from the spawned isolate</span></span>
  //e.g. update the UI state</span></span>
})</span>;</span></span>
</span>
Isolate</span>.</span>spawn</span>(</span></span>
  (args) {</span></span>
    //Cast the arguments inside the list of args</span></span>
    final</span> sendPort </span>=</span> args[</span>0</span>] </span>as</span> SendPort</span>;</span></span>
    final</span> countIteration </span>=</span> args[</span>1</span>] </span>as</span> int</span>;</span></span>
</span>
    //Use the arguments as you need</span></span>
    int</span> x </span>=</span> 1</span>;</span></span>
    for</span> (</span>int</span> i </span>=</span> 1</span>;</span> i </span><</span> countIteration</span>;</span> i</span>++</span>) {</span></span>
      sendPort</span>.</span>send</span>(</span>'Processing ${</span>i</span> + </span>1</span>} of $</span>countIteration</span>'</span>)</span>;</span></span>
      x </span>=</span> x </span>+</span> i</span>;</span></span>
    }</span></span>
  }</span>,</span></span>
  [sendPort</span>,</span> iterationCount]</span>,</span></span>
)</span>;</span></span></code></pre>
Going back to our example, we can now have the child Isolate</code> send updates to the main one through these ports. The listener would get these messages and update the UI accordingly to show the progress of the task.</p>

_{Displaying the message sent from the Worker Isolate. </sub></p>}
Data types that are acceptable as arguments</h2>
Unfortunately, there are some restrictions as to what types of arguments you can pass through an Isolate</code>. You can pass simple data types such as int</code>, float</code>, String</code>, and Lists</code>. However, you cannot pass objects such as Sockets</code>, closure functions</code>, or objects that can alter state across different Isolates</code>.</p>
Check out the documentation</a> for a complete list of objects that are allowed to be used as an argument.</p>
Obtaining the result of an Isolate</h2>
There are cases where we need to know if the task running inside another Isolate</code> has finished. It is also useful to know whether this task running in parallel successfully finished or failed due to an error.</p>
Getting the result from Isolate.run()</code></h2>
It is simple to get the result of a task that was executed using Isolate.run()</code>. This method returns a Future<R></code> where R</code> is the return type of the function inside it. What it means is that we can simply return the result if the Isolate.run()</code> call as a Future<R></code> or with async - await</code> approach.</p>
See how to use Future in Flutter</a></p>
Future</span><</span>bool</span>></span> getResultFromIsolateRun</span>() {</span></span>
  return</span> Isolate</span>.</span>run</span>(_processSomething)</span></span>
}</span></span>
</span>
bool</span> _processSomething</span>() {</span></span>
  //Do some stuff</span></span>
  return</span> true</span></span>
}</span></span></code></pre>Getting the result from Isolate.spawn()</code></h2>
Calling Isolate.spawn()</code> however does not return the data type of the function passed to it.  This method call returns a Future<Isolate></code> in which you can do additional things such as add error listeners, exit listeners, and even terminal this Isolate</code>.</p>
If we want to get the result of the task inside an Isolate</code> created using the spawn()</code> method, we would need to utilise the onExit</code> and onError</code> arguments. These two arguments require a SendPort</code> which would get the event the moment the task has finished or produced an error.</p>
onExit</code> for successful result and onError</code> for errors</h2>
To determine if the Isolate</code> finishes whether successfully or not, we can check when the message sent by the SendPort</code> is either null</code> or a List<String></code> for successful and failed results respectively.</p>
final</span> receivePort </span>=</span> ReceivePort</span>()</span>;</span></span>
final</span> sendPort </span>=</span> receivePort</span>.</span>sendPort</span>;</span></span>
</span>
receivePort</span>.</span>listen</span>((message) {</span></span>
  //Process the message from the spawned isolate</span></span>
  if</span> (message </span>==</span> null</span>) {</span></span>
    //Task in the isolate has successfully finished</span></span>
  } </span>else if</span> (message </span>is</span> List</span>) {</span></span>
    //Task threw an error</span></span>
    print</span>(</span>'Error: ${</span>message</span>[</span>0</span>]}'</span>)</span>;</span></span>
  }</span></span>
})</span>;</span></span>
</span>
Isolate</span>.</span>spawn</span>(</span></span>
  (args) {}</span>,</span></span>
  [sendPort]</span>,</span></span>
  onExit</span>:</span> sendPort</span>,</span></span>
  onError</span>:</span> sendPort</span>,</span></span>
)</span>;</span></span></code></pre>
If you want to have a more distinct message, you can use addOnExitListener()</code> and addErrorListener</code> as they let you define what message the SendPort</code> will send when the task finishes. The caveat here is that you need get a reference of the Isolate</code> before you can use these methods.</p>
Errors will always have a List<String></code> as a message when it happens even if we use addErrorListener()</code>.</p>
final</span> receivePort </span>=</span> ReceivePort</span>()</span>;</span></span>
final</span> sendPort </span>=</span> receivePort</span>.</span>sendPort</span>;</span></span>
</span>
receivePort</span>.</span>listen</span>((message) {</span></span>
  //Process the message from the spawned isolate</span></span>
  if</span> (message </span>==</span> 'EXIT_MESSAGE'</span>) {</span></span>
    //Task in the isolate has successfully finished</span></span>
  } </span>else if</span> (message </span>is</span> List</span>) {</span></span>
    //Task threw an error</span></span>
    print</span>(</span>'Error: ${</span>message</span>[</span>0</span>]}'</span>)</span>;</span></span>
  }</span></span>
})</span>;</span></span>
</span>
Isolate</span>.</span>spawn</span>(</span></span>
  (args) {}</span>,</span></span>
  [sendPort]</span>,</span></span>
)</span>.</span>then</span>(</span></span>
  (isolate) {</span></span>
    isolate</span>.</span>addOnExitListener</span>(</span></span>
      sendPort</span>,</span></span>
      response</span>:</span> 'EXIT_MESSAGE'</span>,</span></span>
    )</span>;</span></span>
    isolate</span>.</span>addOnErrorListener</span>(sendPort)</span>;</span></span>
  }</span>,</span></span>
)</span>;</span></span></code></pre>Make Isolate.spawn()</code> task to be blocking call</h2>
The last thing that I want to discuss is the approach to make sure that the caller of our Isolate</code> tasks gets the result of this run. This can be achieved by using a Completer</code> object.</p>
In our app example above, we want to reset the button states to be clickable again once the function within the Isolate.spawn()</code> call is finished, whether successfully or not. We use a Completer</code> object to block the call and only complete</code> it when we get a successful or error result.</p>
Future</span><</span>bool</span>></span> doBackgroundWork</span>() </span>async</span> {</span></span>
  final</span> receivePort </span>=</span> ReceivePort</span>()</span>;</span></span>
  final</span> sendPort </span>=</span> receivePort</span>.</span>sendPort</span>;</span></span>
  final</span> completer </span>=</span> Completer</span><</span>bool</span>>()</span>;</span></span>
</span>
  receivePort</span>.</span>listen</span>(</span></span>
    (message) {</span></span>
      //Process the message from the spawned isolate</span></span>
      if</span> (message </span>==</span> null</span>) {</span></span>
        //Task in the isolate has successfully finished, so unblock this function</span></span>
        completer</span>.</span>complete</span>(</span>true</span>)</span>;</span></span>
      } </span>else if</span> (message </span>is</span> List</span>) {</span></span>
        //Task in the isolate has an error, so unblock this function</span></span>
        completer</span>.</span>complete</span>(</span>false</span>)</span>;</span> // or use completer.completeError()</span></span>
      }</span></span>
    }</span>,</span></span>
  )</span>;</span></span>
</span>
  Isolate</span>.</span>spawn</span>(</span></span>
    (args) {}</span>,</span></span>
    [sendPort]</span>,</span></span>
    onExit</span>:</span> sendPort</span>,</span></span>
    onError</span>:</span> sendPort</span>,</span></span>
  )</span>;</span></span>
  //Blcoked until completer.complete() is called</span></span>
  return</span> completer</span>.</span>future</span>;</span></span>
}</span></span></code></pre>
_{Using Completer to block Isolate.spawn</sub></p>}
With this approach, any outside caller of the function doBackgroundWork</code> can treat it as a normal function that returns a Future<bool></code> and can decide how to handle the results accordingly.</p>

Conclusion</h1>
That's all the basic things that we need to understand to do parallel processing in Flutter through Isolates</code>. We can use Isolate.run()</code> for simple one-off tasks and use Isolate.spawn()</code> for tasks that require constant updates and communication.</p>
While this is a very basic introduction of the topic, there are still many problems that we might encounter when using Isolates</code> that are not covered in this article. But I still hope that you can apply immediate improvements to your apps with this introductory article.</p>

References</h1>

https://dart.dev/language/concurrency</a></li>
https://api.flutter.dev/flutter/dart-isolate/Isolate-class.html</a></li>
https://api.flutter.dev/stable/3.1.5/dart-isolate/Isolate/spawn.html</a></li>
</ul>


On the importance of abstraction when using third-party libraries
2023-09-29T00:00:00+00:00
A good rule of thumb when using a third-party library is to use wrapper functions to abstract the implementation instead of calling their APIs directly. Doing so makes your code easily testable and flexible whenever you decide to use a different library.</p>
This applies to third-party libraries that use databases, networking, hardware sensor events, and more.</p>
The code samples here will be written in Kotlin but the idea can be applied to any programming language and framework.</p>
I will share some insights on how abstraction allows us to move faster in developing new features while keeping our code testable. Imagine we are tasked to make a feature-rich Android app for taking card payments. This app will depend on a particular vendor that builds the device and provides us with an SDK (Software Development Kit) along with it.</p>






Directly using a third-party library influences the app's architecture</h2>
The quickest way to use a library is by calling its APIs directly. When building an app, it is straightforward to adapt to what the SDK interface gives you.</p>
Suppose the VendorSdk</code> has an API for payment like this.</p>
interface</span> VendorSdk</span> {</span></span>
    enum class</span> VendorPaymentStatus</span> {</span></span>
        SUCCESS,</span></span>
        FAILED,</span></span>
        CARD_DENIED</span></span>
    }</span></span>
    fun</span> makePayment</span>(amount: </span>Int</span>, resultCallback: (</span>VendorPaymentStatus</span>) -> </span>Unit</span>)</span></span>
}</span></span></code></pre>
In this example, the vendor SDK provides a makePayment</code> function that accepts an amount</code> and informs the caller of the payment result through the resultCallback</code> function argument.</p>
If I implement a payment flow within FeatureA</code>, it would look something like this.</p>
class</span> FeatureA</span> constructor</span>(</span></span>
    private val</span> vendorSdk: </span>VendorSdk</span>,</span></span>
    private val</span> analyticsService: </span>AnalyticsService</span></span>
) {</span></span>
    fun</span> triggerCardPayment</span>(amount: </span>Int</span>, paymentResultCallback: (</span>isSuccessful</span>: </span>Boolean</span>) -> </span>Unit</span>) {</span></span>
        vendorSdk.</span>makePayment</span>(amount) { vendorPaymentStatus: </span>VendorSdk</span>.VendorPaymentStatus </span>-></span></span>
            when</span> (vendorPaymentStatus) {</span></span>
                VendorSdk.VendorPaymentStatus.SUCCESS </span>-></span> {</span></span>
                    analyticsService.</span>reportSuccessfulPayments</span>()</span></span>
                    paymentResultCallback</span>(</span>true</span>)</span></span>
                }</span></span>
                else -></span> {</span></span>
                    analyticsService.</span>reportUnsuccessfulPayments</span>()</span></span>
                    paymentResultCallback</span>(</span>false</span>)</span></span>
                }</span></span>
            }</span></span>
        }</span></span>
    }</span></span>
}</span></span></code></pre>
This implementation looks fine. The FeatureA</code> module has access to VendorSdk</code>, which in turn has access to the device's hardware for making payments. But notice how FeatureA</code> has to adapt VendorSdk</code>'s interface which in this case is a callback function.</p>
There is nothing wrong with defining the triggerCardPayment()</code> method in FeatureA</code> to accept a callback function. The problem is that we were somehow forced to include paymentListener</code> because the SDK requires one. That is the only way we can handle the payment result of the VendorSdk</code>.</p>
This might pose a problem because our entire app depends on how to use a specific vendor SDK and how it defines a particular way of getting the result. What if we decide to move to another vendor? Changing all the feature blocks to adhere to a new interface is very time-consuming. The ideal approach when migrating to another vendor's SDK is only to change a single point in our app.</p>
Create a wrapper class to abstract a third-party library's API</h2>
A wrapper class (or function) in programming is a container whose purpose is to call another function. It might seem redundant, but this approach introduces a few advantages to improve our code.</p>






With this approach, we can decide how we pass and receive data between the app and the VendorSdk</code>. This extra layer will transform data and define the interface the app expects from third-party libraries.</p>
In rare instances when a particular third-party library has been deprecated, moving to another library will only involve changing the Wrapper</code> container whilst keeping the features of our app the same. This is in line with the principle of coding against interfaces, not implementations</em> where the PaymentWrapper</code> is such an interface to one or more different third-party libraries.</p>
Returning to our example, we might implement a PaymentWrapper</code> that looks like this.</p>
interface</span> PaymentWrapper</span> {</span></span>
    suspend fun</span> pay</span>(amount: </span>Int</span>) : </span>PaymentResult</span></span>
</span>
    enum class</span> PaymentResult</span> {</span></span>
        SUCCESS,</span></span>
        FAILED</span></span>
    }</span></span>
}</span></span>
</span>
class</span> VendorSdkPaymentWrapper</span> constructor</span>(</span></span>
    private val</span> vendorSdk: </span>VendorSdk</span>,</span></span>
) : </span>PaymentWrapper</span> {</span></span>
    override suspend fun</span> pay</span>(amount: </span>Int</span>): </span>PaymentWrapper</span>.</span>PaymentResult</span> {</span></span>
        try</span> {</span></span>
            val</span> completableDeferred </span>=</span> CompletableDeferred</span><</span>PaymentWrapper</span>.</span>PaymentResult</span>>()</span></span>
            return</span> withTimeout</span>(</span>5_000</span>) {</span></span>
                vendorSdk.</span>makePayment</span>(amount) { result </span>-></span></span>
                    when</span> (result) {</span></span>
                        VendorSdk.VendorPaymentStatus.SUCCESS </span>-></span> {</span></span>
                            completableDeferred.</span>complete</span>(PaymentWrapper.PaymentResult.SUCCESS)</span></span>
                        }</span></span>
                        else -></span> {</span></span>
                            completableDeferred.</span>complete</span>(PaymentWrapper.PaymentResult.FAILED)</span></span>
                        }</span></span>
                    }</span></span>
                }</span></span>
                completableDeferred.</span>await</span>()</span></span>
            }</span></span>
        } </span>catch</span> (e: </span>Exception</span>) {</span></span>
            return</span> PaymentWrapper.PaymentResult.FAILED</span></span>
        }</span></span>
    }</span></span>
}</span></span></code></pre>
As a team decision, we may have agreed to have our payment interface return the payment result from the function call instead of through a callback function. We can transform this approach in the VendorSdkPaymentWrapper</code>.</p>
The FeatureA</code> module can adapt to this interface without knowing how the vendor implements their payment flow. We could potentially write the FeatureA</code> as follows where the triggerCardPayment()</code> can be run on a separate coroutine (asynchronously):</p>
class</span> FeatureA</span> constructor</span>(</span></span>
    private val</span> paymentWrapper: </span>PaymentWrapper</span>,</span></span>
    private val</span> analyticsService: </span>AnalyticsService</span>,</span></span>
    private val</span> coroutineContext: </span>CoroutineContext</span></span>
) {</span></span>
    suspend fun</span> triggerCardPayment</span>(amount: </span>Int</span>) : </span>Boolean</span> {</span></span>
        val</span> result </span>=</span> paymentWrapper.</span>pay</span>(amount)</span></span>
        return when</span>(result) {</span></span>
            PaymentWrapper.PaymentResult.SUCCESS </span>-></span> {</span></span>
                analyticsService.</span>reportSuccessfulPayment</span>()</span></span>
                true</span></span>
            }</span></span>
            else -></span> {</span></span>
                analyticsService.</span>reportUnsuccessfulPayment</span>()</span></span>
                false</span></span>
            }</span></span>
        }</span></span>
    }</span></span>
}</span></span></code></pre>
In this particular example, this is a better approach than using a callback function because there is a chance that the callback function may never be called, rendering your app to be stuck if there are no safeguards for timeouts.</p>
The important thing here is that the PaymentWrapper</code> interface is dependent on your (or your team's) decision and not decided by the third-party library that you're using.</p>
Now that there's an abstraction on how we make payments, our code will be easier to change if the vendor SDK changes its implementation.</p>
Running automated tests with third-party libraries</h2>
For the most part, running automated tests on an app that includes third-party libraries on emulators or simulators works fine as long as these libraries depend on common platform APIs such as Android or iOS frameworks. But what happens if a library is hardware-dependent?</p>






If we want to run automation tests on an emulated device when a particular SDK only works on real devices, then using the third-party library directly will not work. In our payment app, these automation tests would fail as emulators do not have the necessary hardware for payment.</p>
The good thing is that with the PaymentWrapper</code> we wrote, it is easier to make testing possible by changing a few bits in our implementation.</p>
Use interfaces or abstract classes when writing wrapper classes</h3>
Use the abstract or interface construct when writing your wrapper functions or classes (as long as your framework supports it). This approach makes it easier to swap implementation whenever needed. Since we have already written PaymentWrapper</code> as an interface</code>, we can simply write up new implementations according to the services we need.</p>






Our app will have two instances of PaymentWrapper</code>, one for running the real app for production and the other for running UI tests on emulators.</p>
class</span> UiTestPaymentWrapper</span> : </span>PaymentWrapper</span> {</span></span>
    override suspend fun</span> pay</span>(amount: </span>Int</span>): </span>PaymentWrapper</span>.</span>PaymentResult</span> {</span></span>
        return</span> PaymentWrapper.PaymentResult.SUCCESS</span></span>
    }</span></span>
}</span></span></code></pre>
The implementation of UiTestPaymentWrapper</code> does not depend on the VendorSdk</code>, so we are sure that this will run on UI tests. In this example, calling the pay()</code> method always returns a successful result. To change this result, you can introduce a setter()</code> function and change the return value according to different test cases.</p>
Inject the correct instance of PaymentWrapper according to use-case</h3>






Swapping implementations of PaymentWrapper</code> when building the app depends on how you implement dependency management, and how these dependencies are injected into your wrappers. (For Android, Hilt</a> is a popular dependency injection library).</p>
As mentioned before, this approach also solves the problem of migrating from one vendor to another. Instead of rewriting everything, we only need to add another implementation of PaymentWrapper</code> that adheres to the interface of the new vendor SDK. Each feature's existing implementation and tests will be untouched because the interface never changes.</p>






Conclusion</h2>
Abstraction of third-party libraries can make your app more scalable, testable, and flexible when it comes to changes. Using wrapper classes as an abstraction can keep your features unchanged regardless of how a third-party library is implemented under the hood. This extra layer may seem like additional work, but the benefits of being resilient to dependency changes and testable code far outweigh the time cost.</p>


Using Future in Flutter - Get comfortable with asynchronous data
2023-09-19T00:00:00+00:00
A Future</code> refers to an object that can hold data at a point in time when it is ready to do so. This is used in cases where the app should not block or freeze other processes if the data needed has not been obtained yet.</p>
Learning to use Future</code> in Flutter is essential because many applications you build will rely on packages and APIs that use Futures extensively. It also makes your app responsive. An app without Futures</code> is like an app without features (get it?</em> 😇).</p>
Why do we need to use Future in Flutter?</h1>
It is easier to understand the concept of Future</code> with examples. Let's look at a simple example: fetching data from the internet</strong>.</p>
Downloading an image through a slow network</p>
For simplicity's sake, let's write up a simple function that gets data from the internet and returns this value as a String</code>. Because we are not using a Future</code>, the code will look like this:</p>
Blocking operation to download from the internet</p>
This code is a straightforward approach to fetching data from a website, but what happens then if the internet connection of the device is slow?</p>
The line of code that gets the data will operate for a few seconds before it returns the result. This will cause the app to block until the work is complete.</p>
You will not have a chance to show a loading animation or do anything else because this line of code is blocking</code> or synchronous</code>, rendering your app unresponsive.</p>
Use Future for operations that take time to complete</h1>
If a function takes a long time to complete, then it is preferred to use Futures</code>.</p>
A Future</code> can execute operations without blocking. Once the data is ready, a callback will be executed with the data ready to be used.</p>
Let's use the http</code> library as an example to get data from the internet. The http</code> package has an API to make a GET</code> request, which returns a Future</code> of data type Response</code>.</p>
Using http</code> package to fetch data</p>
Since the object that we get from the http.get()</code> method is a Future</code>, the futureResponse</code> value does not necessarily contain the actual response of fetching the data from some website.</p>
The good news is this call to fetch the data will not block your app. But how can we obtain and use the actual value of the futureResponse</code>?</p>
Getting the value from Future asynchronously using callbacks</h1>
One way of evaluating the Future</code> is to use callbacks.</p>
For successful evaluation, we can use the Future</code> function .then()</code> which accepts a callback function to consume the Future</code> value.</p>
In some cases, evaluating a Future</code> may throw an error or an exception. We can use the .onError()</code> function to add a callback for this situation.</p>
Use .then()</code> and .error()</code> to handle Future</code> values with callback functions</p>
Most use cases of using callbacks on Future</code> values involved terminal operations such as saving to databases, sending analytics events, and other processes that do not require their results to be returned by the function.</p>
Getting the value from Future synchronously using async and await</h1>
There are instances when we want to use the value of a Future</code> such as transforming this into another object. In cases like this, the callback approach will not work because callback values cannot be returned by the function.</p>
To evaluate the value of the Future</code>, we need to use the keywords async</code> and await</code>.</p>
The async keyword</h2>
The async</code> keyword modifies a function so that we can evaluate a Future</code> value in that function using the await</code> keyword. Keep in mind that marking your function as async</code> means that it can never return data types other than void</code> and Future<T></code> and will result in a compilation error if you try.</p>
To define a function to be asynchronous, add the async</code> keyword after the function name signature.</p>
The correct and incorrect ways of using async</code> keyword</p>
The await keyword</h2>
The key to evaluating a Future</code> synchronously is by using the await</code> keyword. When you add an await</code> keyword before a Future</code> value or a function that returns a Future</code>, this line will block and wait</strong> until the value has been evaluated.</p>
The await</code> operation will only work if this code is in an async</code> function and will throw a compilation error if it is missing.</p>
The await</code> keyword waits for the value of a Future</code></p>
In the example above, we have the getAlbumFromInternet()</code> function that represents fetching data from the internet. Since this function is an async</code> function, we can use the await</code> keyword to evaluate the value of a Future</code>.</p>
Evaluating the Future.delayed()</code> with async</code> keyword will block this line until the elapsed duration. We also use the constructor Future.value()</code> to return a Future</code> with the value 'Album name'</code>.</p>
Using the same example, we have an asynchronous function that can evaluate another function that returns a Future</code>. Inside the getAlbumName()</code>, we can synchronously wait for the value of getAlbumName()</code> with the await</code> keyword.</p>
In short, use await</code> to evaluate the value of a Future</code> inside an async</code> function.</p>
Using Future in Flutter widgets</h1>
Now that we have covered the basics of Future</code> and the necessary keywords to use them, we can move on to using these concepts in a Flutter app.</p>
FutureBuilder widget</h2>
The most basic way of consuming Future</code> objects in a widget is through the FutureBuilder<T></code>.</p>
Building this widget requires a few parameters.</p>
The first parameter is the Future</code> itself future:</code> which will be evaluated when the widget is built. This argument allows you to set the Future</code> that you wanted to get a value from.</p>
The next one is the initial value initialData:</code> of type T</code> which will be used when the Future<T></code> value has not been evaluated yet. This is useful for situations where the Future takes time to assess, such as fetching data with slow internet or doing long processes in the background. Although not a required argument, it's better to include an initial value to constrain the possible values of the Future.</p>
Finally, the most important argument of FutureBuilder</code> is the builder:</code> itself. The builder function lets you decide what widget to display depending on the state of the future based on its function argument AsyncSnapshot<T></code>.</p>
Example use of FutureBuilder</code></p>
The builder function of the FutureBuilder<T></code> provides access to an AsyncSnapshot</code> argument that gives you both the current state and the current value of the Future</code> that you provided.</p>
You can get the current state of the FutureBuilder</code> through the snapshot.connectionState</code> getter method. The values include active</code>, waiting</code>, done</code>, or none</code>. In most cases, you can check the connectionState</code> if it is done and then show the appropriate widget by obtaining the value of the Future</code> using snapshot.data</code>.</p>
The current value of the Future</code> can be null sometimes depending on the state of Future</code>, that's why it is better to do a null check on snapshot.data</code> or validate the current state through snapshot.connectionState</code> to show the appropriate widget.</p>
Sample weather app using Future</h1>
Let's put our learnings into practice by creating a simple app that fetches data from a publicly available API.</p>
Setup</h2>
A weather app can be a good example to demonstrate the use of Futures</code>.
One of my favourite sources of free public APIs is the public-api repo</a> from Github, so let's use one of the weather API there called open-meteo</code>.</p>
In this example, we will need to use the http</code> package for fetching data from the internet. The result is a json</code> formatted file, so we will also need the dart:convert</code> for converting json</code> formatted string to a usable object in our app.</p>
Install the http</code> package by running flutter pub add http</code> on the terminal inside your project directory, or add http: ^1.1.0</code> (latest version at the time of writing</em>) as part of your dependencies inside the pubspec.yaml</code>.</p>
As I am using a macOS machine to run this app, I also have to add the necessary permission to access the network by adding this snippet in macos/Runner/DebugProfile.entitlements</code>.</p>
<key>com.apple.security.network.client</key></span></span>
<true/></span></span></code></pre>
💡</p>
Accessing data from the internet requires network permission on your device. Head over to https://docs.flutter.dev/data-and-backend/networking</a> to learn how to add network permission on the device you're using to run this example app.</p>
App source code</h2>
Here's the full code for our weather app example:</p>
</p>
Sample Weather app that uses Future</code> to obtain and display the current temperature</p>
When you run this code, you should have something like this:</p>
</p>
Weather app running on desktop</p>
Code explanation</h2>
Let's dissect the source code and understand what each of the parts is doing by first looking at the getCurrentWeather()</code> Future</code> function.</p>
The async</code> function getCurrentWeather()</code></p>
The getCurrentWeather()</code> function provides our app with the weather data that we need to display. Since we know that fetching data from the internet may block our app while waiting for the result, this is the perfect time to use a Future<T></code>.</p>
We also want to display the weather data as a String</code>, so we defined the return type to be Future<String></code>.</p>
Blocking operation to obtain the response using await</code></p>
The first thing that this function does is to fetch data from the open-meteo</code> API. Since we need to process the JSON result from http.get()</code>, we have to use the await</code> keyword to block this function while waiting for the result.</p>
The response</code> will have a data type Response</code> as part of the http</code> interface. The response</code> body will have a value in JSON format similar to this:</p>
Weather data in JSON format</p>
We use the jsonDecode</code> from dart:convert</code> package to convert this JSON object into a Map. Since we want to traverse this JSON and get the current_weather</code>, we access this value using the Map</code> interface.</p>
Converting JSON data to map</p>
Once we have the temperature value, we can return this value to type Future<String></code> by constructing a Future with the temperature as its value in String</code>.</p>
Constructor method of a Future</code> with value</p>
Data fetch is asynchronous</h2>
While all the data were being fetched and converted from the internet, the sample app DOES NOT</strong> block because we use a FutureBuilder</code> that processes the Future</code>. If we look at our FutureBuilder</code>, we show a Loading</code> widget while waiting for the Future to get the actual result.</p>
Implementation example of using FutureBuilder</code></p>
This is one way of ensuring we display the appropriate widget according to the state of the Future</code>. We can check for the current status of the Future</code> in a FutureBuilder</code> by using the ConnectionState</code> of the snapshot</code> argument in the function. Based on the status, we can decide which widget to display, such as a loading spinner widget or an error widget, whichever is more appropriate.</p>
The sample app shows a Text</code> widget with a Loading</code> text because the snapshot.connectionState</code> is equal to active</code> as it has not finished fetching the data yet.</p>
The snapshot</code> argument also lets you know if an error has occurred so you can display the appropriate message to the app's users.</p>
Conclusion</h1>
Implementing Futures</code> is an essential part of responsive apps in Flutter. Using Future</code> allows your app to process data asynchronously so it can run smoothly.
Understanding Futures</code> also lets you use a wide range of Flutter packages, which is very important to save time creating your own features.</p>
The await</code> keyword lets you wait for a Future</code> value to be processed within an async</code> function. This enables you to treat Future</code> values synchronously in some parts of your app for data transformation and eventually make your apps responsive.</p>

Reference</h1>

https://api.flutter.dev/flutter/dart-async/Future-class.html</a></li>
</ul>


Dependency Injection in Flutter using Riverpod
2023-08-08T00:00:00+00:00
In this post, I will talk about the use of the Riverpod package as a dependency injection framework in Flutter.</p>
Managing dependencies is important when writing a scalable project. A component that depends on another dependency should be able to obtain them without needing to know how to create them. One approach to achieve this is through dependency injection.</p>
What is Dependency injection?</h1>
Dependency injection is a concept for managing dependencies and separating the concerns of the different blocks of your code.</p>
Let's say that I would need a Professor</code> to learn from when attending a lecture. I do not care who the assigned Professor</code> is in this particular class. I just need someone to teach the lecture that I am attending. Dependency injection would be the school providing a professor I can learn from without choosing who that person would be.</strong></p>
Why do we need to use Dependency Injection?</h1>
The main reason behind using a dependency injection framework is to make our coding experience smoother.</p>
The component that we are building should be able to locate and use another component easily. Our component should also be testable in a way that it can easily get a stub or fake version of its dependency when we run tests.</p>
//BAD Example</span></span>
class</span> Lecture</span> {</span></span>
  const</span> Lecture</span>()</span>;</span></span>
</span>
  final</span> Professor</span> _professor </span>=</span> const</span> Professor</span>(</span>'Proton'</span>)</span>;</span></span>
</span>
  void</span> participate</span>(</span>Student</span> student) {</span></span>
    student</span>.</span>enterClassroom</span>()</span>;</span></span>
    student</span>.</span>sit</span>()</span>;</span></span>
    student</span>.</span>listenTo</span>(_professor)</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
To be consistent with our previous example, look at the example code above. The participate()</code> method will first make a student enter the classroom, sit on a chair, and listen to the _professor</code>.</p>
This will work but what if we want to test this Lecture</code> component? Since the professor was defined internally and was not injected</strong>, we cannot mock or stub this dependency. It is always set to be the same value; Professor Proton</code>.</p>
// BETTER example</span></span>
class</span> Lecture</span> {</span></span>
  const</span> Lecture</span>({</span></span>
    required</span> Professor</span> professor</span>,</span></span>
  }) </span>:</span> _professor </span>=</span> professor</span>;</span></span>
</span>
  final</span> Professor</span> _professor</span>;</span></span>
</span>
  void</span> participate</span>(</span>Student</span> student) {</span></span>
    student</span>.</span>enterClassroom</span>()</span>;</span></span>
    student</span>.</span>sit</span>()</span>;</span></span>
    student</span>.</span>listenTo</span>(_professor)</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
A better example would be to use the class constructor</code> as a means of injecting the dependency. As we create an instance of a Lecture</code>, we can easily pass a fake professor as a parameter argument when running tests.</p>
But what happens then when we start having more than one dependency? Using constructor injection is tedious as your app grows. This is the problem we want to solve by using a dependency injection framework.</p>
What is Riverpod?</h1>
</p>
Riverpod is a reactive caching and data-binding framework built by Remi Rousselet. It is a popular solution built for doing state management, dependency injection and caching data which the Flutter framework does not provide natively.</p>
While it's mainly used for state management, Riverpod can be used for dependency injection alone if your project is using another library for managing states such as BLoC.</p>
Riverpod is best used as a complete package as it can accomplish everything from state management to data caching and not just dependency injection.</span></span></code></pre>
Each dependency that we want to inject is wrapped by an object called Provider</code>. In Riverpod, a Provider</code> is an immutable object that is used to obtain a dependency. It wraps the dependency that you need so that it can be accessed anywhere in your app that is within a ProviderScope</code>.</p>
Installation</h1>
Set up your project by including the Flutter Riverpod dependency.</p>
$</span> flutter pub add flutter_riverpod</span></span></code></pre>How do we get dependencies with Riverpod?</h1>
Let's use a more realistic example (a simple weather app) to demonstrate how to use Riverpod for dependency injection.</p>
There are three main blocks in Riverpod</code> that we need to be familiar with;  Provider</code>, Ref</code> (or WidgetRef</code> in Flutter widgets), and the ProviderScope. Each of these blocks is important to get Riverpod</code> running.</p>
1. Provider</h2>
The first block that we already know is the Provider</code> which can give us the dependency we need. For example, if we have a WeatherRepository</code> to get today's weather, we can build a provider for this dependency as such:</p>
// Weather Repository to get today's weather</span></span>
class</span> WeatherRepository</span> {</span></span>
</span>
  final</span> WeatherDataSource</span> _dataSource </span>=</span> OpenWeatherApiDataSource</span>()</span>;</span></span>
  </span></span>
  Future</span><</span>String</span>></span> todaysWeather</span>() {</span></span>
    return</span> _dataSource</span>.</span>getWeatherToday</span>()</span>;</span></span>
  }</span></span>
}</span></span>
</span>
// Weather Repository provider</span></span>
final</span> Provider</span><</span>WeatherRepository</span>> weatherRepositoryProvider </span>=</span></span>
    Provider</span><</span>WeatherRepository</span>>(</span></span>
  (ref) {</span></span>
    return</span> WeatherRepository</span>()</span>;</span></span>
  }</span>,</span></span>
)</span>;</span></span></code></pre>
The weatherRepositoryProvider</code> can be accessed and used across our app to obtain a WeatherRepository</code> dependency.</p>
2. ProviderScope</h2>
Each dependency that is wrapped by a Provider</code> is only accessible within a ProviderScope</code>. The ProviderScope</code> sets the environment of our app so that the state of our dependencies is contained within this scope.</p>
void</span> main</span>() {</span></span>
  runApp</span>(</span></span>
    const</span> ProviderScope</span>(</span></span>
      child</span>:</span> WeatherApp</span>()</span>,</span></span>
    )</span>,</span></span>
  )</span>;</span></span>
}</span></span></code></pre>
The best approach to define the scope of providers is to wrap the whole app in a ProviderScope</code>. It is usually done in the top-most parent widget of the app so that all the dependencies can be accessed anywhere within that scope.</p>
3a. Dependency injection in providers using Ref</h2>
The Ref</code> object is the key to locating our providers in the defined scope. If we want to inject a weather data source for our WeatherRepository</code>, we can create a Provider</code> for this data source.</p>
// Weather data source interface</span></span>
abstract class</span> WeatherDataSource</span> {</span></span>
  Future</span><</span>String</span>></span> getWeatherToday</span>()</span>;</span></span>
}</span></span>
</span>
// Dummy OpenWeatherAPI Weather data source</span></span>
class</span> OpenWeatherApiDataSource</span> extends</span> WeatherDataSource</span> {</span></span>
  @override</span></span>
  Future</span><</span>String</span>></span> getWeatherToday</span>() </span>async</span> {</span></span>
    await</span> Future</span>.</span>delayed</span>(</span>const</span> Duration</span>(seconds</span>:</span> 2</span>))</span>;</span></span>
    return</span> "10C"</span>;</span></span>
  }</span></span>
}</span></span>
</span>
// Weather Data Source provider</span></span>
final</span> Provider</span><</span>WeatherDataSource</span>> openWeatherDataSourceProvider </span>=</span></span>
    Provider</span><</span>WeatherDataSource</span>>(</span></span>
  (ref) {</span></span>
    return</span> OpenWeatherApiDataSource</span>()</span>;</span></span>
  }</span>,</span></span>
)</span>;</span></span>
</span></code></pre>
Now that we have a Provider</code> for our weather data source, we can inject this into our WeatherRepository</code>. First, we refactor the repository to accept a data source when constructing the object. Then, we use the watch</code> method of the Ref</code> object in the weather repository provider to obtain the data source.</p>
The watch</code> method locates the latest state of the provider being watched. In our example, it will be the OpenWeatherApiDataSource</code> instance.</p>
//Using ref to find a weather data source</span></span>
final</span> Provider</span><</span>WeatherRepository</span>> weatherRepositoryProvider </span>=</span></span>
    Provider</span><</span>WeatherRepository</span>>(</span></span>
  (ref) {</span></span>
    final</span> weatherDataSource </span>=</span> ref</span>.</span>watch</span>(openWeatherDataSource)</span>;</span></span>
    return</span> WeatherRepository</span>(weatherDataSource</span>:</span> weatherDataSource)</span>;</span></span>
  }</span>,</span></span>
)</span>;</span></span></code></pre>
Instead of tightly coupling the open weather data source with the WeatherRepository</code>, we have improved the code by injecting this dependency instead.</p>
Now that we know how to obtain dependencies using the Ref</code> object, let's continue with WidgetRef</code>.</p>
3b. Dependency injection in widgets using WidgetRef</h2>
The Ref</code> is used to obtain provider dependencies within other providers. On the other hand, WidgetRef</code> is used to locate providers inside a Flutter widget.</p>
The most common approach to get a WidgetRef</code> is to make your widget extend from the ConsumerWidget</code> class if it is a StatelessWidget</code>, or from ConsumerStatefulWidget</code> if it is a StatefulWidget</code>.</p>
Here's an example of a stateless widget using ConsumerWidget</code>.</p>
//Using widget ref to find a weather data source</span></span>
class</span> WeatherScreen</span> extends</span> ConsumerWidget</span> {</span></span>
  const</span> WeatherScreen</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context</span>,</span> WidgetRef</span> ref) {</span></span>
    final</span> weatherRepository </span>=</span> ref</span>.</span>watch</span>(weatherRepositoryProvider)</span>;</span></span>
    return</span> FutureBuilder</span>(</span></span>
      future</span>:</span> weatherRepository</span>.</span>todaysWeather</span>()</span>,</span></span>
      builder</span>:</span> (context</span>,</span> snapshot) {</span></span>
        if</span> (snapshot</span>.</span>hasData) {</span></span>
          return</span> Text</span>(snapshot</span>.</span>data</span>!</span>)</span>;</span></span>
        } </span>else</span> {</span></span>
          return const</span> CircularProgressIndicator</span>()</span>;</span></span>
        }</span></span>
      }</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
We use the WidgetRef</code> instance in the widget's build function to obtain the dependency that we need. In the WeatherScreen</code> example, we get the WeatherRepository</code> dependency to obtain today's weather.</p>
Any widgets extending either ConsumerWidget or ConsumerStatefulWidget within the ProviderScope</code> can access the WeatherRepository</code> using ref.watch()</code>.</p>
Is defining providers as global variables a bad thing?</h1>
There is a bad connotation with using global variables in your code due to mutability, testability, and scalability dangers. Global variables tend to be not testable due to their global scope and the ability to be modified anywhere in the code.</p>
Providers in Riverpod are safe in this manner because the states that they hold are contained within the ProviderScope</code>. They are also always declared as final</code> in which variables pointing to them cannot be updated or replaced.</p>
How do we replace dependencies when running tests?</h1>
We should be able to constrain the environment and scope of our app when running tests. Dependencies such as data repositories should be easy to replace with mocked or stubbed instances as you write your tests. Here is how you do it with Riverpod.</p>
Let's have all our providers in a separate file called providers.dart</code> which will look something like this:</p>
//providers.dart</span></span>
</span>
final</span> Provider</span><</span>WeatherDataSource</span>> openWeatherDataSourceProvider </span>=</span></span>
    Provider</span><</span>WeatherDataSource</span>>(</span></span>
  (ref) {</span></span>
    return</span> OpenWeatherApiDataSource</span>()</span>;</span></span>
  }</span>,</span></span>
)</span>;</span></span>
</span>
final</span> Provider</span><</span>WeatherRepository</span>> weatherRepositoryProvider </span>=</span></span>
    Provider</span><</span>WeatherRepository</span>>(</span></span>
  (ref) {</span></span>
    final</span> weatherDataSource </span>=</span> ref</span>.</span>watch</span>(openWeatherDataSourceProvider)</span>;</span></span>
    return</span> WeatherRepository</span>(weatherDataSource</span>:</span> weatherDataSource)</span>;</span></span>
  }</span>,</span></span>
)</span>;</span></span></code></pre>
If we want to run our app, we usually run the main.dart</code> which should look like this:</p>
// Production code</span></span>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:flutter_riverpod/flutter_riverpod.dart'</span>;</span></span>
</span>
import</span> 'weather_app.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  runApp</span>(</span></span>
    const</span> ProviderScope</span>(</span></span>
      child</span>:</span> WeatherApp</span>()</span>,</span></span>
    )</span>,</span></span>
  )</span>;</span></span>
}</span></span>
</span></code></pre>
However, if we want to inject fake versions of our dependencies in tests, we can override them by using the overrides</code> argument in the ProviderScope</code> of our test file.</p>
//Test code</span></span>
import</span> 'package:flutter_riverpod/flutter_riverpod.dart'</span>;</span></span>
import</span> 'package:flutter_riverpod_di/app.dart'</span>;</span></span>
import</span> 'package:flutter_riverpod_di/providers.dart'</span>;</span></span>
import</span> 'package:flutter_riverpod_di/services.dart'</span>;</span></span>
import</span> 'package:flutter_test/flutter_test.dart'</span>;</span></span>
</span>
class</span> FakeWeatherDataSource</span> extends</span> WeatherDataSource</span> {</span></span>
  @override</span></span>
  Future</span><</span>String</span>></span> getWeatherToday</span>() {</span></span>
    return</span> Future</span>.</span>value</span>(</span>'Fake value'</span>)</span>;</span></span>
  }</span></span>
}</span></span>
</span>
void</span> main</span>() {</span></span>
  testWidgets</span>(</span></span>
    'Use a fake weather data source'</span>,</span></span>
    (tester) </span>async</span> {</span></span>
      await</span> tester</span>.</span>pumpWidget</span>(</span></span>
        ProviderScope</span>(</span></span>
          overrides</span>:</span> [</span></span>
            openWeatherDataSourceProvider</span>.</span>overrideWithValue</span>(</span></span>
              FakeWeatherDataSource</span>()</span>,</span></span>
            )</span>,</span></span>
          ]</span>,</span></span>
          child</span>:</span> const</span> WeatherApp</span>()</span>,</span></span>
        )</span>,</span></span>
      )</span>;</span></span>
    }</span>,</span></span>
  )</span>;</span></span>
}</span></span></code></pre>
In the example code above, we replace the open weather data source with a fake one whilst using the real WeatherRepository</code>. To do so, we need to use the provider's method overrideWithValue</code> and supply your desired instance.</p>
The variables being global did not cause any issue because the scope is still controlled when running our widget tests and was overridden using the overrides parameter of the ProviderScope</code>. We keep our production code as is and the same time able to stub our dependencies with fake ones.</p>
Weather app example</h1>
Putting everything that we learn into practice, let's implement the simple weather app.</p>
</p>
The first thing to do is make sure that our weather app is wrapped within a ProviderScope</code>.</p>
main.dart</code></p>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:flutter_riverpod/flutter_riverpod.dart'</span>;</span></span>
</span>
import</span> 'weather_app.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  runApp</span>(</span></span>
    const</span> ProviderScope</span>(</span></span>
      child</span>:</span> WeatherApp</span>()</span>,</span></span>
    )</span>,</span></span>
  )</span>;</span></span>
}</span></span></code></pre>
We then declare the different services that we will use in the project. We define the WeatherRepository and WeatherDataSource interface and its implementation.</p>
services.dart</code></p>
abstract class</span> WeatherDataSource</span> {</span></span>
  Future</span><</span>String</span>></span> getWeatherToday</span>()</span>;</span></span>
}</span></span>
</span>
class</span> OpenWeatherApiDataSource</span> extends</span> WeatherDataSource</span> {</span></span>
  @override</span></span>
  Future</span><</span>String</span>></span> getWeatherToday</span>() </span>async</span> {</span></span>
    await</span> Future</span>.</span>delayed</span>(</span>const</span> Duration</span>(seconds</span>:</span> 2</span>))</span>;</span></span>
    return</span> "10C"</span>;</span></span>
  }</span></span>
}</span></span>
</span>
class</span> WeatherRepository</span> {</span></span>
  const</span> WeatherRepository</span>({</span>required</span> this</span>.</span>weatherDataSource})</span>;</span></span>
</span>
  final</span> WeatherDataSource</span> weatherDataSource</span>;</span></span>
</span>
  Future</span><</span>String</span>></span> todaysWeather</span>() {</span></span>
    return</span> weatherDataSource</span>.</span>getWeatherToday</span>()</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
Next, we define the providers that we will use to get our dependencies in a file called providers.dart</code>.  We need a WeatherRepository</code> to fetch today's weather using a data source WeatherDataSource</code>. In our implementation, our data source will be hardcoded to a value including a delay to simulate loading progress.</p>
providers.dart</code></p>
import</span> 'package:flutter_riverpod/flutter_riverpod.dart'</span>;</span></span>
</span>
import</span> 'services.dart'</span>;</span></span>
</span>
final</span> Provider</span><</span>WeatherDataSource</span>> openWeatherDataSourceProvider </span>=</span></span>
    Provider</span><</span>WeatherDataSource</span>>(</span></span>
  (ref) {</span></span>
    return</span> OpenWeatherApiDataSource</span>()</span>;</span></span>
  }</span>,</span></span>
)</span>;</span></span>
</span>
final</span> Provider</span><</span>WeatherRepository</span>> weatherRepositoryProvider </span>=</span></span>
    Provider</span><</span>WeatherRepository</span>>(</span></span>
  (ref) {</span></span>
    final</span> weatherDataSource </span>=</span> ref</span>.</span>watch</span>(openWeatherDataSourceProvider)</span>;</span></span>
    return</span> WeatherRepository</span>(weatherDataSource</span>:</span> weatherDataSource)</span>;</span></span>
  }</span>,</span></span>
)</span>;</span></span></code></pre>
Finally, all that is left is to write up our widgets to display the weather. Our WeatherApp</code> extends from ConsumerWidget</code> so that it can access the dependencies it needs to get the weather data.</p>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:flutter_riverpod/flutter_riverpod.dart'</span>;</span></span>
</span>
import</span> 'providers.dart'</span>;</span></span>
import</span> 'services.dart'</span>;</span></span>
</span>
class</span> WeatherApp</span> extends</span> ConsumerWidget</span> {</span></span>
  const</span> WeatherApp</span>({</span></span>
    Key</span>?</span> key</span>,</span></span>
  }) </span>:</span> super(key</span>:</span> key)</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context</span>,</span> WidgetRef</span> ref) {</span></span>
    final</span> WeatherRepository</span> weatherRepository </span>=</span></span>
        ref</span>.</span>watch</span>(weatherRepositoryProvider)</span>;</span></span>
    return</span> MaterialApp</span>(</span></span>
      theme</span>:</span> ThemeData</span>(</span></span>
        colorScheme</span>:</span> ColorScheme</span>.</span>fromSeed</span>(seedColor</span>:</span> Colors</span>.</span>blueGrey)</span>,</span></span>
        useMaterial3</span>:</span> true</span>,</span></span>
      )</span>,</span></span>
      debugShowCheckedModeBanner</span>:</span> false</span>,</span></span>
      home</span>:</span> Scaffold</span>(</span></span>
        floatingActionButton</span>:</span> FloatingActionButton</span>.</span>extended</span>(</span></span>
          onPressed</span>:</span> () {</span></span>
            ref</span>.</span>invalidate</span>(weatherRepositoryProvider)</span>;</span></span>
          }</span>,</span></span>
          label</span>:</span> const</span> Text</span>(</span>'Refresh'</span>)</span>,</span></span>
        )</span>,</span></span>
        body</span>:</span> Center</span>(</span></span>
          child</span>:</span> FutureBuilder</span><</span>String</span>>(</span></span>
            future</span>:</span> weatherRepository</span>.</span>todaysWeather</span>()</span>,</span></span>
            builder</span>:</span> (context</span>,</span> snapshot) {</span></span>
              if</span> ((snapshot</span>.</span>hasData) </span>&&</span></span>
                  (snapshot</span>.</span>connectionState </span>==</span> ConnectionState</span>.</span>done)) {</span></span>
                return</span> Text</span>(</span></span>
                  snapshot</span>.</span>data</span>!</span>,</span></span>
                  style</span>:</span> Theme</span>.</span>of</span>(context)</span>.</span>textTheme</span>.</span>headlineMedium</span>,</span></span>
                )</span>;</span></span>
              } </span>else</span> {</span></span>
                return const</span> CircularProgressIndicator</span>()</span>;</span></span>
              }</span></span>
            }</span>,</span></span>
          )</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span>
</span></code></pre>
When the WeatherApp</code> widget builds, it will obtain a reference of the weather repository and get the Future</code> value of today's weather. Using a FutureBuilder</code> widget, it will wait for the call to finish before displaying the result.</p>
</p>
I have also added a button to simulate fetching up-to-date weather data. The ref.invalidate(provider)</code> is the way to clear the data cache stored by Riverpod. When we call this method, the provider will provide a fresh and updated state for our dependents to access. In our example, it will try to fetch new data from the WeatherDataSource</code>.</p>
The sample weather app was written to demonstrate dependency injection of services such as data sources and repositories. When using Riverpod, it is much better to use providers like `FutureProvider` or `StreamProvider` to display cached data.</span></span></code></pre>Summary</h1>
Dependency injection is important in your app's architecture as it keeps your codebase maintainable and scalable. Riverpod is a great framework to use not only for state management but also for implementing dependency injection.</p>
To get the best results from Riverpod, check out https://riverpod.dev/ to get a more detailed explanation about the framework and how it is meant to be used.</p>

References</h1>

https://riverpod.dev/</a></li>
</ul>


Should I learn Flutter in 2023 - An App Developer's edge
2023-07-13T00:00:00+00:00
Yes</strong>, it is worth learning Flutter app development in 2023. You get the satisfaction of creating something valuable, get paid for it, and all the other good stuff!</p>
I want to share the benefits and advantages that you will get if you decide to learn it, or even start a career as an app developer.</p>
This article is not only for current software engineers who want to learn a new framework but also for people without a programming background who are considering making a career shift to the world of app development.</p>
Starting a career in software engineering</h1>
I personally did not start in the app development space. I was not even a programmer when I finished university. But after spending time learning on my own and doing side projects, I was able to build a career that is still going on for 10 years.</p>
Some people might tell themselves they do not have what it takes to start a career writing code. I disagree. Anyone can become a software developer as long as they have these two key assets: Determination and Time.</p>
1. Determination</h2>
You need to be determined to learn new skills. You just have to want it. All information that you need to be successful is freely available on the internet, this website included! It is only yourself that's preventing you to gain more knowledge.</p>
You don't need a high level of mathematics knowledge to start. Considering the requirements and gruelling interview processes posted by companies looking for software engineering candidates, I understand that it is a very bold statement. You still need to learn the fundamentals to start moving.</p>
Knowing the fundamentals of logic theory and mathematics is essential, and is something that you will learn eventually as you start your learning journey in software development.</p>
The catch is that you need to have the determination to start. You need to start soon.</p>
2. Time</h2>
The other requirement is time. Author Malcolm Gladwell proposed that mastery of a skill happens after spending 10,000 hours of dedicated work. This roughly translates to working on your skills for around 3 hours a day, every day, for 10 years.</p>
While your first goal is not to be a master at first, it is important to designate a reasonable amount of time to learn how to write code, understand programming concepts, and learn the framework that we want to use.</p>
Why Flutter?</h1>
</p>
Flutter x Google</p>
Flutter is an open-source framework made by Google used to build apps across different platforms.</p>
1. It's easy*</h2>
The primary language used in Flutter is Dart</code>. Based on my experience, Dart</code> is a relatively easy programming language to learn, especially for developers who have worked with Java, Python, or other object-oriented languages.</p>
Building a user interface in Flutter is straightforward. Flutter code can be described as hierarchical in nature, built from trees of basic units called Widgets. You create these widgets and combine them with each other to form beautiful screens.</p>
The truth is, learning your first programming language may require certain changes in your perspective to understand (e.g. loops, condition statements, etc.). Flutter's thorough examples and documentation will definitely help to get you started.</p>
☝🏾</span></span>
</span>
Flutter is easy given the assumption that you have been writing code before.</span></span></code></pre>2. It runs on all platforms</h2>
This is the best time to write Flutter apps because of how Flutter supports development not just on mobile platforms but also on desktop and web.</p>
</p>
Flutter apps running on different platforms https://flutter.dev</a></p>
Learning just Dart</code> and Flutter</code> keeps your mind focused on developing features instead of learning all the bits and pieces of each platform that you want to build the app for. As they say, one code to rule them all.</p>
3. It provides a smooth development experience</h2>
Imagine working together with a designer while both of you are going through a prototype. Flutter makes it possible to do this seamlessly because it was built to make the development process fast as it reduces unnecessary waiting times for feedback.</p>
Hot reload is one of the features that I like where you see your new changes in code being applied on your test device instantaneously. There is no need to wait to compile and deploy your app to see the changes which saves you a lot of time.</p>
The framework itself is also open-source, which means a whole bunch of contributors are improving Flutter and developing useful libraries for your apps.</p>
The Edge of an App Developer</h1>
The perks you get as a Flutter developer</h3>
1 - Be a creator</h2>
Humans have always been driven to create solutions. A study from Drexel University</a> has shown that creating something and solving a problem invokes a certain reward response from the brain. This response produces pleasurable experiences similar to food intake, positive social experiences, addictive drugs, and orgasms. You can say that our brain rewards us for being creative.</p>
Make your idea a reality - Source: Unsplash</a></p>
Being a Flutter engineer makes you a creator. You can create solutions for other people's problems. If you discover a problem and think of a solution, you can immediately test a solution by yourself.</p>
Having the ability to quickly write up an app gives you the opportunity to provide instant value especially if it involves a technical approach. If you come up with an interesting business idea or even join a [hackathon](https://www.techtarget.com/searchcio/definition/hackathon?ref=rafaelds#:~:text=A hackathon%2C also known as,build a new software program.), you can easily spin up a product on a browser or desktop and have something to show for it.</p>
2 - Financial stability</h2>
The technology space is one of the most lucrative fields to have a career in 2024. A quick lookup at the current market in Sydney shows an average salary of $130,000 AUD</a> for entry to mid-level software engineering roles. This may widely vary from where you live or your experience but it's hard to deny the monetary opportunity it can provide.</p>
As for Flutter-specific developer roles, Flexiple</a> has provided data from different sources that show a similar average salary in the US market.</p>
</p>
Flexiple's 2024 Flutter salary data</p>
The game has changed now in terms of software engineering opportunities. Many tech start-ups and companies are still on the lookout for developers. Even non-technical businesses are starting to have their own digital transformation, which in turn creates high demands for engineers.</p>
Getting a job from these companies still depends on your skills, but knowing how many tech roles there are indicates the strong demand for software engineers.</p>
3 - Freelancing opportunities</h2>
Working full-time for a company might not be the best fit for you. You may have dependents or might be in a certain condition where you cannot work on a full-time schedule.</p>
Being a Flutter developer gives you the opportunity to work on a freelance basis. Online portals such as Fiverr and UpWork have businesses looking for developers to build their apps from scratch.</p>
</p>
Maybe work in Iceland - Source: Unsplash</a></p>
I had a colleague who used to move constantly from one place to another while working according to her local time zone at the time. As long as you have your computer, an internet connection, and skills, you can do your projects wherever you are.</p>
4 - Entrepreneurial endeavours</h2>
Building a business is one of the many paths you can take when you start learning Flutter.</p>
As a Flutter developer, you already have what it takes to build something that generates revenue. Whether you build an app and sell it on different app stores or have subscription-based services, your skills will give you a push to start building.</p>
</p>
Deliver product fast for early feedback - Source: Unsplash</a></p>
You can also build a start-up based on your ideas which you would pitch with an actual proof-of-concept you just built. Showing an actual app on a device is a much more effective pitch than pure speech.</p>
Another great by-product of running a business is creating jobs for other people. While you're earning money, you also help your team achieve financial stability. It's a win-win situation for everyone.</p>
Final thoughts</h1>
Many of the things I shared are based on my experiences as an app developer. I have first-hand experience with many of the points I mentioned and am still working to achieve the rest.</p>
I hope that I have inspired you to try out app development. Whether you have a tech background or not, you will succeed</strong> if you dedicate your time to working on it.</p>
Start learning Flutter and start giving value to yourself and others. Happy coding!</p>

References</h1>

https://flutter.dev</a></li>
https://www.sciencedirect.com/science/article/pii/S1053811920302445</a></li>
https://au.talent.com/salary?job=software+engineer</a></li>
https://flexiple.com/flutter/salary/</a></li>
</ul>


Flutter Design Challenge #1 - Product Page
2023-07-07T00:00:00+00:00
Welcome to the first Flutter design challenge of rafaelds. Here, we find a beautiful design and try to write it up and implement it into an app.</p>
The goal of design challenges is not to implement the full product itself, but instead make up the design in Flutter so everyone including me can learn and apply the learnings in our own apps.</p>
The design</h1>
For our first design challenge, we will implement a simple shopping page that contains a photo of the product, a favourite button, and a buy button. I found a great mock-up in Dribbble to illustrate this concept.</p>
</p>
For our app, I will use a different photo and change a few bits in the content to make it a little more original.</p>
App outcome</h1>
After writing up the code for our challenge, here's what it looks like.</p>
</p>
Resources</h1>
Let's start by defining the resources that we need for this challenge.</p>
1. Colour Palette</h2>
The colours we used in this project are the following:</p>

Orange - Color(0xFFF6AB53)</code></li>
Black - Color(0xFF161616)</code></li>
White - Color(0xFFFCFCFC)</code></li>
</ul>
2. Image</h2>
The photo we will be using is from Unsplash by Tamara Bellis</a>.</p>
3. Font</h2>
The font used from Dribbble is Neogrotesk Pro</code>  but since it requires a license to use, I chose a font that looks similar called WorkSans</a></p>
4. Simulator</h2>
I will use an iPhone 14 simulator</strong> in this challenge, so all the padding dimensions will be appropriate for this phone's size.</p>
Screen layout</h1>
Let's determine the different parts of this screen and how they are arranged. We have a full-screen photo behind a content box. This content box is on the same plane as the bottom bar which contains two buttons: the favourite button and the buy button.</p>
Now that we have defined the main components of this screen, we can do a quick implementation to demonstrate this arrangement.</p>
</p>
main_screen.dart</strong></p>
</p>
I use a Scaffold</code> widget to contain the components on this screen. I will use the scaffold's bottomNavigationBar</code> property to contain the buttons bar widget. Scaffold also has a body</code> property that contains the main content. For the body</code>, we will use a Stack</code> widget to contain two widgets: the image and the content container. We use a stack so we can put elements on top of each other.</p>
Now it's time to replace each component with the right widgets.</p>
Implementing the image widget</h1>
For the primary image, we will use an Image.asset()</code> widget. This is the best option for static images that are already included in the asset directory of your project.</p>
</p>
Transform the image</h2>
That image seems a bit small, so we can transform its size and position it accordingly. To do this, wrap the Image.asset()</code> with a Transform</code> widget.</p>
To increase the size, we can use a Transform.scale()</code> and set the scale accordingly. To adjust the position of the image, we can use the Transform.transalate()</code> and move the image vertically so we can see the clothes we are selling clearly.</p>
I used scale = 2.2</code> and imageOffset = Offset(x = 0, y = 340)</code> to achieve my desired outcome for an iPhone 14 screen.</p>
The last thing to note is that the edges of the image should be rounded. Let's trim the corners to be rounded by using the ClipRRect</code> widget, which stands for ClipRoundedRectangle</em>.</p>
</p>
After doing these changes, we can make a reusable widget that accepts a scale, position offset, and the source image to use as parameters. I will name this RoundedCornerImage</code>.</p>
rounded_corner_image.dart</strong></p>
</p>
After updating the main_screen.dart</code> with the new widget we created, the screen should be updated with a bigger photo that highlights the product better.</p>
Implementing the product content</h1>
The product content is the white container that contains the product name, brand, and description. Writing code for this would have been a simple Container</code>, but because of the curves found on the top left and top right corners, we cannot simply use a container.</p>
Using the ClipPath widget</h2>
One approach to do these curved corners is to use the ClipPath</code> widget and write our own CustomClipper<Path></code>. Check out the official tutorial for ClipPaths</a> but for a simple explanation, the custom clipper should draw a rectangle base, with the top left curved clockwise, and the top right curved counter-clockwise.</p>
FancyClipPath implementation</strong></p>
</p>
The next thing to do is to create a Container</code> that has a minimum and maximum height and can contain a widget (Column of texts)</em> that describes our product. Let's make this a reusable widget too and name it CurvedCornerContainer</code>.</p>
</p>
Once we replace the purple box with this container, it should show a white box with our fancy corners on top.</p>
</p>
Adding the description content</h2>
The content can be a simple Column</code> with three Text</code> widgets as its children. The important part here is the different text styles used for each text. As we have included the necessary font in this project (WorkSans)</em>, it is just a matter of using different fontWeight</code> , fontSize</code> , and paddings in between.</p>
After writing the code for this, we can make this a reusable widget and call it DescriptionContent</code> which accepts a product title, brand, and description.</p>
</p>
We should now use this widget and put this as a child of the CurvedCornerContainer</code> that we just wrote. The screen should look much closer to our chosen design!</p>
</p>
Implementing the buttons bar</h1>
The last component that we will write is the buttons bar. It contains two buttons laid out vertically, so we will use a Row</code>.</p>
Favourite button</h2>
The favourite button is implemented using a MaterialButton</code>. To replicate the button in the design, we have to set the shape</code> property of the button to CircleBorder</code> which has a grey border with a very thin width.</p>
For the icon itself, we use an Icon</code> widget that uses the Icons.favorite</code> as the image. To make this image smaller, use Padding</code> to push the image into a smaller size.</p>
favourite_button.dart</strong></p>
</p>
Buy button</h2>
The same thing will be used for the BuyButton</code>. We use a MaterialButton</code> to wrap a Text</code> widget. In order to get the desired shape, we use a RoundedRectangleBorder</code> as the shape</code> property of the MaterialButton</code>.</p>
We also need to make sure that the button colour is black and the text should be white.</p>
buy_button.dart</strong></p>
</p>
Buttons bar implementation</h1>
As mentioned before, the buttons bar will be implemented using a Row</code> widget to hold the buttons horizontally.</p>
One thing to note here is that the BuyButton</code> fills up the remaining space next to the FavouriteButton</code>. To do this behaviour, we need to wrap the BuyButton</code> with an Expanded</code> widget to fill up the remaining space in the Row</code>.</p>
We also need to put appropriate Padding</code> so the sizes and spacings will look more natural.</p>
buttons_bar.dart</strong></p>
</p>
Once we replace the Scaffold</code>'s bottomNavigationBar</code> with the ButtonsBar</code> widget, our app will look almost the same as our design inspiration.</p>
</p>
White border outline</h1>
In the original design, there is a white outline along the border of the screen. We produce the same effect by adding a Padding</code> to our Stack</code> of widgets.</p>
Main screen implementation</h1>
Once we have converted everything, our MainScreen</code> widget should be complete. Mainly, it is a Scaffold</code> that consists of a customised bottomNavigationBar</code> and a Stack</code> that consists of the product image and the content description.</p>
</p>

Final result</h1>
</p>
This side-by-side comparison tells us that our design challenge was a success! This product page was implemented without using external libraries and was built using widgets included in the Flutter library.</p>
Further improvements</h1>
As you get more experienced with Flutter, you will learn that hard-coded values do not work in a real-world setting. While the values that we use in this project worked on an iPhone 14 device, this will not look as good in an iPhone SE, or worse, on a tablet.</p>
These considerations are out of scope for this design challenge but are something to keep in mind when developing real apps.</p>
References</h1>

Dribbble mock-up designed by Dinara Malysheva</a>.</li>
Unsplash by Tamara Bellis</a>.</li>
Google Font - WorkSans</a></li>
</ul>


Rows in Flutter - Arrange Flutter widgets horizontally
2023-06-30T00:00:00+00:00
There are a few basic Flutter layout widgets that you will always use in all your projects, one of which is the Row</code> widget. The Row</code> widget allows you to arrange the layout of your components horizontally.</p>
For vertical arrangements, see the Column</code> layout widget.</p>
Using a Row</h2>
The main parameter when using a Row</code> widget is the children</code> property which accepts a list of child widgets to arrange horizontally.</p>
</p>
Row example</p>
</p>
Example of Row code in Flutter</p>
Row properties</h2>
Aside from the required children</code> parameter, it is important to know the other properties to use the Row</code> widget effectively.</p>
Axis Alignment</h3>
The mainAxisAlignment</code> handles how the child widgets are arranged along the horizontal space. The types of mainAxisAlignment</code> that can be used include start</code>, end</code>, center</code>, spaceAround</code>, spaceEvenly</code> and spaceBetween</code>.</p>
On the other hand, the crossAxisAlignment</code> arranges the child widget along the vertical space. Values of this alignment include  start</code>, end</code>, center</code>, stretch</code>, and baseline</code>.</p>
Horizontal Size</h3>
When using the Row</code> widget, the horizontal size stretches according to its child widgets and as allowed by its parent widget. You can override this behaviour by setting the mainAxisSize</code> to MainAxisSize.min</code>.</p>
Direction</h3>
Child widgets in a Row</code> are laid out from left to right by default. To change this behaviour, you can override the horizontalDirection</code> property.</p>
When to use Rows</h2>
Use Rows</code> when you want to arrange static widgets horizontally. For example, we could use a Row</code> to horizontally arrange the logo, the description part which is a Column</code> layout, and the options button in a job advertisement widget.</p>
</p>
Job ad using Row</p>
Issues with Rows</h2>
Because a Row</code> is not a scrollable widget, one common issue developers encounter is that when a Row's child widgets increased in size much more than it is allowed to, the app would show an overflow error.</p>
</p>
Size of the blue box extending outside the Row</p>
Solution 1: Use Expanded or Flexible</h3>
A solution for this issue is to use an Expanded</code> or Flexible</code> layout widget to wrap the big child widgets inside a Row</code>. This makes the child widgets ready to overflow safely when their content is dynamic.</p>
Solution 2: Use a ScrollView</h3>
Another way to make a Row</code> scrollable is by wrapping it with a SingleChildScrollView</code> or any widget that lets its child widgets scroll. This is used for rare situations where you have a scrollable row with a fixed item count.</p>
Solution 3: Use a ListView</h3>
If you are planning to make a row that is scrollable with dynamic content, check out ListView</code> for displaying a list of similar widgets. One example that comes to mind is when one scrolls an album horizontally from the Spotify app.</p>
</p>
Example of horizontal scrolling</p>

Summary</h1>
Here's a short introduction to using Rows</code> in Flutter. It is important to keep the usage of Rows</code> to arrange cohesive widgets horizontally. Finally, keep your content adaptable to size constraints by wrapping child widgets with Flexible</code> or Expanded</code>.</p>
References</h1>

https://api.flutter.dev/flutter/widgets/Row-class.html</a></li>
</ul>


What does a Flutter code structure look like to a beginner? - An Introduction
2023-06-28T00:00:00+00:00
Back when I started learning Flutter app development many years ago, I was surprised at how the code structure of Flutter was presented. When I learned that you only need Dart</code> code to make Flutter apps, this concept of a single language to encompass both View logic</em> and Business logic</em> was foreign to me.</p>






The first time I looked at the Hello World</code> Flutter code example, I shrugged my head and said to myself how absurd this is. Because I was a more naive developer back then, looking at the hello world app in one file</em>, and in one language</em> made me think how bad this design was.</p>
Of course, I was wrong. Not only can you separate these logic blocks cleanly, but this design decision also made Flutter one of the easiest app-development frameworks to learn these days.</p>
This nested Flutter code</h2>
It's great to look at a source code that clearly tells you exactly what it does. Let's look at an example of a UI element I wrote using Flutter.</p>






Now, without knowing how to read or write Dart</code> code or not knowing what a Widget</code> is, let's see if you can understand this nested code and what it represents.</p>






To me, this code is straightforward when it comes to telling me how this job advertisement card is implemented. It is a nest of objects where each object can have a child</code> or children</code> if it is more than one. A Row</code> arranges its children horizontally, a Column</code> vertically, and so on.</p>
You might already have a clue, but the StarRating</code> object there is made of a few nested objects as well.</p>
Disclaimer: Paddings and spacings are implemented within the objects in the sample code for simplification and demonstration purposes.</em></p>
Thinking back on my first look at the Hello World</code> example from the Flutter team made me realise that any code can be refactored and improved to be more readable and reusable.</p>
Widgets everywhere</h2>
Another popular saying in the Flutter community is "Everything in Flutter is a Widget"</em>. While it is not technically 100% true, there is still some truth to that.</p>

Everything in Flutter is a Widget, sort of.</p>
</blockquote>
A Flutter Widget</code> is the basic unit of the user interface in Flutter. It can be described as a unit of composition</em> and the building block of a Flutter app</em>. Almost everything that you see in a Flutter app is a Widget</code>.</p>
Using the example above, the Row</code>, Column</code>, and so on are Widgets</code>. The way they are arranged together, the nesting of parent and child Widgets</code>, is called a Widget Tree</code>.</p>






It is important for us developers to know this tree structure because we will need to pass data from one Widget</code> to another, and knowing how our app is structured helps us plan how to do so.</p>
This widget tree also plays a significant role when it comes to speed and memory optimisation. This involves two more sets of trees called Element Tree</code> and RenderObject Tree</code>, but is out of scope and will be discussed in another article.</p>
Flutter's composability</h2>
Take a look again at our job card code and widget tree. It is very much simplified and is composed of a few widgets. The Flutter framework was designed with the composition and reusability of Widgets</code> in mind. Of course, there are proper ways to nest Widgets</code> but for now, it is best to understand that you can.</p>






Some of the widgets that you see in the job card widget tree were built from other widgets. The StarRating</code> widget for example is implemented using a Row</code> with children composed of Image</code> widgets.</p>
While this is a common pattern that you'll see in general software design, Flutter under the hood has its own optimisations in which changing a widget's state may or may not rebuild the other widgets in the tree. (See Frederik's layer cake explanation</a> for a deep-dive explanation).</p>
User input</h2>
The last thing I want to talk about is how Flutter handles user inputs such as button clicks, scrolls, drag, and so on. Widgets</code> such as Button</code> can accept input through an onAction()</code> function callback which varies depending on which input Widget</code> you use.</p>






For widgets that don't have user inputs, one can just wrap this widget around with something like a GestureDetector</code> widget, and decide which inputs you want your widget to receive.</p>
Closing remarks</h2>
There is so much ground to cover in Flutter, like changing a Widget</code> properties such as changing colour, size, and text (hint: Flutter state management) and we will discuss that eventually. I hope you learned something from this short introductory article about what a Flutter code structure looks like.</p>
If you are new to Flutter or someone who is interested to jump into Flutter development, I guarantee that you will have a pleasant experience learning and building apps that are ready to be deployed on mobile devices, desktop devices, and even the web.</p>
References</h2>

https://api.flutter.dev/flutter/widgets/Widget-class.html</a></li>
https://medium.com/flutter-community/the-layer-cake-widgets-elements-renderobjects-7644c3142401</a></li>
https://docs.flutter.dev/resources/architectural-overview</a></li>
</ul>


Axis alignment of Columns and Rows in Flutter
2023-06-22T00:00:00+00:00
There are different ways to align widgets within a Column</code> and a Row</code>. Both widgets share similar properties, yet each differs based on their axes. In this tutorial, we will see the effects of applying different types of alignments to both Column</code> and Row</code>.</p>
Column and Row refresher</h2>
A Column</code> widget arranges its child widgets vertically, therefore defining its main axis as the Y-Axis</strong>.  A Row</code> on the other hand does it horizontally, which means that its main axis is the X-Axis</strong>. It is important to keep this in mind so we know which properties we should change to achieve a certain result.</p>
Arranging the child widgets using mainAxisAlignment</h2>
The mainAxisAlignment</code> modifies how the widgets are arranged vertically in a Column</code> and horizontally in a Row</code>. Changing this property affects either the position of the widgets along the main axis or the spacing between the child widgets.</p>
Column</span>(</span></span>
  mainAxisAlignment</span>:</span> MainAxisAlignment</span>.</span>start</span>,</span> //<< Change this</span></span>
  children </span>:</span>[</span>...</span>]</span></span>
)</span>;</span></span>
</span>
Row</span>(</span></span>
  mainAxisAlignment</span>:</span> MainAxisAlignment</span>.</span>start</span>,</span> //<< Change this</span></span>
  children </span>:</span>[</span>...</span>]</span></span>
)</span>;</span></span></code></pre>
Look at the following illustrations to learn how each type of main axis alignment affects a Column</code>.</p>
</p>
And now for a Row</code>, changing the mainAxisAlignment</code> arranges the child widgets like in the image below.</p>
</p>
For reference, the mainAxisAlignment</code> properties are:</p>

start</strong>: Move the widgets to the top for a Column</code>, left for a Row</code></li>
end</strong>: Move the widgets to the bottom for a Column</code>, right for a Row</code></li>
center</strong>: Layout the widgets to the centre</li>
spaceBetween</strong>: Arrange the widgets with even spaces between them</li>
spaceAround</strong>: Arrange widgets with even spaces between each widget, with half of that space above the top widget and below the bottom widget</li>
spaceEvenly</strong>: Arrange the widgets with equal spaces on both the top and bottom of each widget</li>
</ul>
What about crossAxisAlignment?</h2>
The crossAxisAlignment</code> property arranges the widget opposite of the main axis called the cross axis.</p>
Column</span>(</span></span>
  crossAxisAlignment</span>:</span> CrossAxisAlignment</span>.</span>start</span>,</span> //<< Change this</span></span>
  children </span>:</span>[</span>...</span>]</span></span>
)</span>;</span></span>
</span>
Row</span>(</span></span>
  crossAxisAlignment</span>:</span> CrossAxisAlignment</span>.</span>start</span>,</span> //<< Change this</span></span>
  children </span>:</span>[</span>...</span>]</span></span>
)</span>;</span></span></code></pre>
Have a look at the different crossAxisAlignment</code> values and how child widgets would look inside a Column</code>.</p>
</p>
For crossAxisAlignment</code> in a Row</code>, the child widget arrangement will be along the vertical axis.</p>
</p>
For reference, here are the crossAxisAlignment</code> values:</p>

start</strong>: Move the widgets to the top for a Row</code>, left for a Column</code></li>
end</strong>: Move the widgets to the bottom for a Row</code>, right for a Column</code></li>
center</strong>: Layout the widgets to the centre of the cross axis</li>
stretch</strong>: Fills up all available extending along the cross axis</li>
baseline</strong>: Move the children along the cross-axis such that their baselines match. It will only work if child widgets have baseline properties</li>
</ul>

Using the CrossAxisAlignment.stretch would throw a BoxConstraints error if the parent widget of the Row</code> or Column</code> does not have a constrained width e.g. parent widgets are Row</code> or Column</code> as well.</p>
</blockquote>
Summary</h1>
The mainAxisAlignment</code> and crossAxisAlignment</code> are the main properties to arrange the child widgets of Columns</code> and Rows</code>. Just remember that Column</code> has a vertical main axis and Row</code> has a horizontal main axis. The layouts' cross axes will be the opposite of their main axes.</p>

References</h1>

https://api.flutter.dev/flutter/widgets/Column-class.html</a></li>
https://appmaking.com/flutter-row-column-example/</a></li>
</ul>


Columns in Flutter - Arrange Flutter widgets vertically
2023-06-21T00:00:00+00:00
One of the key aspects of creating a beautiful user interface is to learn how to use the fundamental widgets of Flutter. The Column</code> widget is one of the most used widgets to arrange the layout of your components.</p>
What is a Column?</h2>
The Column</code> is a fundamental layout widget that allows you to arrange child widgets vertically</strong>. If you want to set the order of widgets from top to bottom or the other way around, Column is the widget you need.</p>
For horizontal arrangements, see Row</code> layout widget.</p>
Implementing a Column</h2>
The most important parameter when using a Column is the children</code> property which accepts a list of child widgets to arrange vertically.</p>
</p>
Column</span>(</span></span>
  mainAxisAlignment</span>:</span> MainAxisAlignment</span>.</span>center</span>,</span></span>
  children</span>:</span> [</span></span>
    SplashImage</span>()</span>,</span></span>
    HeaderText</span>(</span></span>
      'Columns in Flutter'</span>,</span></span>
    )</span>,</span></span>
    BodyText</span>(</span></span>
      'Learn how to arrange your widgets vertically while keeping them elegant.'</span>,</span></span>
    )</span>,</span></span>
    NextButton</span>()</span>,</span></span>
  ]</span>,</span></span>
)</span>;</span></span></code></pre>Column properties</h2>
On top of the required children</code> parameter, there are other useful properties to keep in mind when using a Column</code>.</p>
Axis Alignment</h3>
The mainAxisAlignment</code> property handles the arrangement of the child widgets along the vertical space. Types of arrangement include start</code>, end</code>, center</code>, spaceAround</code>, spaceEvenly</code> and spaceBetween</code>.</p>
On the opposite axis, the crossAxisAlignment</code> property handles the arrangement of child widgets along the horizontal space. Values of this type are start</code>, end</code>, center</code>, stretch</code>, and baseline</code>.</p>
Vertical Size</h3>
By default, Columns</code> stretch vertically as permitted by its parent widget. However, you can override this to only expand according to child widgets' sizes vertically by setting the mainAxisSize</code> to MainAxisSize.min</code></p>
Direction</h3>
The last property of a Column</code> is the verticalDirection</code>. This defines whether the widgets should start from top to bottom, or bottom to top.</p>
When to use Columns</h2>
The expected use of Columns</code> is to group static widgets vertically. For example, you are designing a card widget that has a title text and a subtitle text. While you can implement this arrangement using other layout widgets such as Stack</code>, it is more straightforward and clear to do so with Columns</code>.</p>
It is important to define your use case when using Columns</code> to avoid unnecessary problems.</p>
Issues with Columns</h2>
If you have been writing Flutter apps, you have probably encountered an issue where your Column</code> has increased in size to the point where it overflows out of its parent widget.</p>
An issue with Columns</code> is that it is not scrollable by default. When widgets inside the Column</code> grow bigger, overflow happens.</p>
</p>
Solution 1: Use Expanded or Flexible</h3>
A solution for this issue is to use an Expanded</code> or Flexible</code> layout widget to wrap the big child widgets inside a Column</code>. This makes the child widgets ready to overflow safely when their content is dynamic.</p>
Solution 2: Use a ScrollView</h3>
Another way to make a Column</code> scrollable is by wrapping it with a SingleChildScrollView</code> or any widget that lets its child widgets scroll. But in most cases, it is much better to use Column</code> to arrange related widgets vertically instead of making a scrollable screen from it.</p>
Solution 3: Use a ListView</h3>
If you are planning to make a screen that is scrollable with dynamic content, check out ListView</code> for displaying a list of similar widgets or better.</p>
Summary</h1>
We just covered a short introduction to using Columns</code> in Flutter. It is important to keep the usage of Columns to arrange cohesive widgets vertically. Finally, keep your content adaptable to size constraints by wrapping child widgets with Flexible</code> or Expanded</code>.</p>

References</h1>

https://api.flutter.dev/flutter/widgets/Column-class.html</a></li>
</ul>


The right way to create a Flutter project
2023-06-14T00:00:00+00:00
It is very important to create your Flutter project correctly. It will save you a lot of time in the future by naming your project properly, as well as setting up documentation to make your project readable.</p>
Before you start creating your project, make sure you have set up your Flutter tools on your machine. Once your machine is ready, then let's get started!</p>
Creating the Flutter Project</h2>
When creating a Flutter project from scratch, it is important to do it correctly. While you can get away with a simple flutter create</code>, it is much better to include not just the project name, but your organisation name</strong>.</p>
Your organisation name will appear both in your iOS and Android sub-directory projects, so make sure you do this right and do not end up with com.example</strong>.</p>
To do so, run the command:</p>
flutter</span> create my_awesome_app --org com.rafaelds</span></span></code></pre>
This way, your project will be your own and you won't have to worry about renaming packages later.</p>
Another good point that Andrew</a> raised to minimise your project size is to define only the platforms you are going to build an app for.</p>
flutter</span> create my_awesome_app --org com.rafaelds --platform=ios,android</span></span></code></pre>
This command will prevent creating app dependencies on other platforms like Web</code>, Desktop</code>, etc.</p>
💡Creating a project in this way adds the correct files to exclude in .gitignore, so it is best to always start a Flutter project with this.</span></span></code></pre>
You can also include a description field so that your pubspec.yaml</code> would be updated. I think updating the description within the pubspec file should be enough.</p>
Clean up your pubspec.yaml</h2>
The next thing to do is to clean up the pubspec.yaml</code>. This file contains your project's Flutter dependency and configurations.</p>
To help you set it up to standards, your pubspec.yaml</code> file should look something like this. (as of June 2023):</p>
name</span>:</span> my_awesome_app</span></span>
description</span>:</span> My Awesome App is an app to make everyone awesome.</span></span>
publish_to</span>:</span> 'none'</span> # Remove this line if you wish to publish to pub.dev</span></span>
</span>
version</span>:</span> 1.0.0+1</span></span>
environment</span>:</span></span>
  sdk</span>:</span> '>=3.0.3 <4.0.0'</span></span>
</span>
dependencies</span>:</span></span>
  flutter</span>:</span></span>
    sdk</span>:</span> flutter</span></span>
  cupertino_icons</span>:</span> ^1.0.2</span></span>
</span>
dev_dependencies</span>:</span></span>
  flutter_test</span>:</span></span>
    sdk</span>:</span> flutter</span></span>
  flutter_lints</span>:</span> ^2.0.0</span></span>
</span>
flutter</span>:</span></span>
  uses-material-design</span>:</span> true</span></span>
</span>
  # To add assets to your application, add an assets section, like this:</span></span>
  # assets:</span></span>
  # - images/a_dot_burr.jpeg</span></span>
  # - images/a_dot_ham.jpeg</span></span></code></pre>
Do not forget to add an app description here. This pubspec.yaml</code> also contains commented lines of code for assets in case you want to add images or videos to your app in the future.</p>
Clean up your README.md</h2>
Many public projects found in GitHub made by personal accounts always have the default README.md</code> starter content.</p>
It's best to update it now so that anyone looking at your project will see your efforts in your code.</p>
If you need inspiration for your README.md</code>, you can follow the template below:</p>
# My Awesome App</span></span>
My Awesome App is an app to make everyone awesome.</span></span>
</span>
## Setup</span></span>
</span>
Here are the steps to set up your machine to start running My Awesome App</span></span>
//TODO: Add more information here</span></span></code></pre>Add a LICENSE file</h2>
If you are planning to make your project public, you might want to decide which license to use. If it is going to be a private or top-secret project, then it's best to not put any license as it is by default an exclusive copyright</a>.</p>
For public or open-source projects, feel free to check out Github's tool</a> to help you decide which license will fit your use case.</p>
For simplicity's sake, use an MIT license if you want to allow other people to use, modify, and improve your project, as long as they keep this LICENSE</code> and copyright notice.</p>
MIT License</span></span>
</span>
Copyright (c) [2023] [Rafael Delos Santos]</span></span>
</span>
Permission is hereby granted, free of charge, to any person obtaining a copy</span></span>
of this software and associated documentation files (the "Software"), to deal</span></span>
in the Software without restriction, including without limitation the rights</span></span>
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell</span></span>
copies of the Software, and to permit persons to whom the Software is</span></span>
furnished to do so, subject to the following conditions:</span></span>
</span>
The above copyright notice and this permission notice shall be included in all</span></span>
copies or substantial portions of the Software.</span></span>
</span>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR</span></span>
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,</span></span>
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE</span></span>
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER</span></span>
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,</span></span>
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE</span></span>
SOFTWARE.</span></span></code></pre>Add a CHANGELOG.md file</h2>
Not everyone wants to add unnecessary files in the project that do not help in making the app run. While CHANGELOG</code> is not required, it is highly encouraged to have one in your project.</p>
CHANGELOG</code> can easily tell other developers (including you in the future) what has been done in each release. This file provides significant value especially when you publish your very own Flutter library in public.</p>
You can copy this template that I use in my projects for your CHANGELOG</code> and start adding notes every time you add new features to the new version of your app.</p>
# Changelog</span></span>
</span>
## v1.0.0</span></span>
-</span> Set up the proper project directory</span></span>
-</span> Add hello world feature</span></span></code></pre>Add an app file</h2>
Your main.dart</code> file contains all the necessary code to run your initial Flutter project. While this works, putting everything in one file is not the best practice, especially when your project gets bigger.</p>
The first thing to do is create a separate app file to contain the MyApp</code>. This is good practice because you can later put your navigation routing, screens, themes, and more in this file. You can also create other instances of this file for running tests, trying out themes, and other configurations.</p>
Go to your main.dart</code> file and cut the code that contains the MyApp</code> class and paste it into the new file created.</p>
I would suggest renaming the MyApp</code> class to your own app name e.g. MyAwesomeApp</code> using the Refactor</strong> shortcut (F2).</p>
Add a Home Page class file</h2>
You may have noticed as well in the main.dart</code> file that it contains a MyHomePage</code> default widget that contains the very first default screen. Let's clean this up by creating a separate file</strong> for this.</p>
The location of this file should not matter for now, as there are many discussions as to what the right structure of files should be (feature directory vs types directory), but we can deal with that in another tutorial.</p>
Clean up the main file</h2>
Your main.file</code> should contain less code now after moving both the MyAwesomeApp</code> class and the MyHomePage</code> class to their respective files.</p>
It is better to separate these functions and classes into their respective files as it will help you later the moment you consider having different build configs, running tests and flavour types.</p>
Fix the Widget Test</h2>
When creating a Flutter project, it adds a widget test by default. After doing the reorganisation in the previous steps, make sure to fix the widget_test.dart</code> found under the test</code> directory by fixing the imports and using the correct class names in there.</p>
Updated file output</h2>
After doing these steps and fixing the imports on each file, the different files should look something like the snippets above. All class names and imports have been updated so that it builds just fine.</p>
New main.dart</h3>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:my_awesome_app/my_awesome_app.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  runApp</span>(</span>const</span> MyAwesomeApp</span>())</span>;</span></span>
}</span></span></code></pre>
main.dart</p>
New my_awesome_app.dart</h3>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:my_awesome_app/my_home_page.dart'</span>;</span></span>
</span>
class</span> MyAwesomeApp</span> extends</span> StatelessWidget</span> {</span></span>
  const</span> MyAwesomeApp</span>({super</span>.</span>key})</span>;</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> MaterialApp</span>(</span></span>
      title</span>:</span> 'My Awesome App'</span>,</span></span>
      theme</span>:</span> ThemeData</span>(</span></span>
        colorScheme</span>:</span> ColorScheme</span>.</span>fromSeed</span>(seedColor</span>:</span> Colors</span>.</span>deepPurple)</span>,</span></span>
        useMaterial3</span>:</span> true</span>,</span></span>
      )</span>,</span></span>
      home</span>:</span> const</span> MyHomePage</span>(title</span>:</span> 'Flutter Demo Home Page'</span>)</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
my_awesome_app.dart</p>
New my_home_page.dart</h3>
import</span> 'package:flutter/material.dart'</span>;</span></span>
</span>
class</span> MyHomePage</span> extends</span> StatefulWidget</span> {</span></span>
  const</span> MyHomePage</span>({super</span>.</span>key</span>,</span> required</span> this</span>.</span>title})</span>;</span></span>
  final</span> String</span> title</span>;</span></span>
</span>
  @override</span></span>
  State</span><</span>MyHomePage</span>></span> createState</span>() </span>=></span> _MyHomePageState</span>()</span>;</span></span>
}</span></span>
</span>
class</span> _MyHomePageState</span> extends</span> State</span><</span>MyHomePage</span>> {</span></span>
  int</span> _counter </span>=</span> 0</span>;</span></span>
</span>
  void</span> _incrementCounter</span>() {</span></span>
    setState</span>(() {</span></span>
      _counter</span>++</span>;</span></span>
    })</span>;</span></span>
  }</span></span>
</span>
  @override</span></span>
  Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
    return</span> Scaffold</span>(</span></span>
      appBar</span>:</span> AppBar</span>(</span></span>
        backgroundColor</span>:</span> Theme</span>.</span>of</span>(context)</span>.</span>colorScheme</span>.</span>inversePrimary</span>,</span></span>
        title</span>:</span> Text</span>(widget</span>.</span>title)</span>,</span></span>
      )</span>,</span></span>
      body</span>:</span> Center</span>(</span></span>
        child</span>:</span> Column</span>(</span></span>
          mainAxisAlignment</span>:</span> MainAxisAlignment</span>.</span>center</span>,</span></span>
          children</span>: <</span>Widget</span>></span>[</span></span>
            const</span> Text</span>(</span></span>
              'You have pushed the button this many times:'</span>,</span></span>
            )</span>,</span></span>
            Text</span>(</span></span>
              '$</span>_counter</span>'</span>,</span></span>
              style</span>:</span> Theme</span>.</span>of</span>(context)</span>.</span>textTheme</span>.</span>headlineMedium</span>,</span></span>
            )</span>,</span></span>
          ]</span>,</span></span>
        )</span>,</span></span>
      )</span>,</span></span>
      floatingActionButton</span>:</span> FloatingActionButton</span>(</span></span>
        onPressed</span>:</span> _incrementCounter</span>,</span></span>
        tooltip</span>:</span> 'Increment'</span>,</span></span>
        child</span>:</span> const</span> Icon</span>(</span>Icons</span>.</span>add)</span>,</span></span>
      )</span>,</span></span>
    )</span>;</span></span>
  }</span></span>
}</span></span></code></pre>
my_home_page.dart</p>
New widget_test.dart</h3>
import</span> 'package:flutter/material.dart'</span>;</span></span>
import</span> 'package:flutter_test/flutter_test.dart'</span>;</span></span>
import</span> 'package:my_awesome_app/my_awesome_app.dart'</span>;</span></span>
</span>
void</span> main</span>() {</span></span>
  testWidgets</span>(</span>'Counter increments smoke test'</span>,</span> (</span>WidgetTester</span> tester) </span>async</span> {</span></span>
    // Build our app and trigger a frame.</span></span>
    await</span> tester</span>.</span>pumpWidget</span>(</span>const</span> MyAwesomeApp</span>())</span>;</span></span>
</span>
    // Verify that our counter starts at 0.</span></span>
    expect</span>(find</span>.</span>text</span>(</span>'0'</span>)</span>,</span> findsOneWidget)</span>;</span></span>
    expect</span>(find</span>.</span>text</span>(</span>'1'</span>)</span>,</span> findsNothing)</span>;</span></span>
</span>
    // Tap the '+' icon and trigger a frame.</span></span>
    await</span> tester</span>.</span>tap</span>(find</span>.</span>byIcon</span>(</span>Icons</span>.</span>add))</span>;</span></span>
    await</span> tester</span>.</span>pump</span>()</span>;</span></span>
</span>
    // Verify that our counter has incremented.</span></span>
    expect</span>(find</span>.</span>text</span>(</span>'0'</span>)</span>,</span> findsNothing)</span>;</span></span>
    expect</span>(find</span>.</span>text</span>(</span>'1'</span>)</span>,</span> findsOneWidget)</span>;</span></span>
  })</span>;</span></span>
}</span></span></code></pre>
widget_test.dart</p>
File Directory</h2>
Once everything has been updated, your Flutter project directory should look something like this. We can discuss in another tutorial how and when to use different file directory structures, but for now, this would suffice.</p>
</p>

Summary</h1>
In summary, following the steps in this tutorial is one of the better ways to start a Flutter project. While this looks like more work and setting up than just running the default set-up made by Flutter, this approach has saved me lots of time in terms of documentation and implementing new features.</p>


The top 8 Visual Studio Code shortcuts you need to know as a Flutter developer
2023-06-13T00:00:00+00:00
It is important to master the tools that you use on a daily basis. Not only does it help you produce better outcomes, but it also saves you more time that could be used for something else.</p>
Knowing and using hotkeys and shortcuts in the long term also prevents you from getting Repetitive Strain Injury</a> caused by typing and switching between your mouse and keyboard.</p>
Now let's jump right into the important shortcuts that you need to know in Visual Studio Code as a Flutter developer!</p>
If you are not using a macOS keyboard, you can usually replace the CMD shortcut with CTRL in VS Code. However, it is better to search the correct command in your OS through Settings > Keyboard Shortcuts</p>
1. Go to File</h2>
</p>
CMD + P</span></span></code></pre>
The first one is the most used shortcut in my opinion. You will always go from one file to another when working on your project.</p>
Most people will use their mouse, go to the file directory hierarchy and look for the file they need. A much faster way is to use the Go to File</strong> shortcut.</p>
To use this shortcut, press hotkeys and type the file name that you need to open. Take note that this also uses a smart search</strong> approach where you can just type a part of the file name and it will show possible results.</p>
2. Refactor</h2>
</p>
CTRL + Shift + R</span></span></code></pre>
The second most used shortcut for me is the Refactor</strong> shortcut. It gives you a lot of options to either improve your code or provide Flutter utility shortcuts.</p>
Here are some of the things Refactor shortcut can do:</p>

Wrap a widget with another widget</li>
Wrap a widget with a builder widget</li>
Extract a selected piece of code into its own method or variable</li>
Extract a selected piece of code into its own widget</li>
</ul>
3. Show All Commands</h2>
</p>
CMD + Shift + P</span></span></code></pre>
The second shortcut that I like is the Show all commands</strong> shortcut. You can think of it as the map when you get lost trying to find a shortcut.</p>
If you want to do something, say Go to File, or Format the Document, just type in the shortcut and enter the action that you want to do.</p>
4. Rename</h2>
</p>
F2</span></span></code></pre>
Rename</strong> command in Visual Studio Code is like a smart rename feature. This shortcut can save you minutes to hours by pressing this shortcut and entering the new variable or function name.</p>
This will lessen your dependence on Find and Replace</strong> whenever you want to rename a function name or a variable.</p>
The neat thing about this shortcut is that it renames not only the names within a file but all the other files that have a reference to that across the project.</p>
5. Auto-suggest and Auto-complete</h2>
CTRL + Space</span></span></code></pre>
VS Code has IntelliSense</em> where the editor helps you in terms of code completion. Whether you are writing dart code or configuration files, always use this shortcut to save you from typing more than you need.</p>
Most of the time, you won't need to press this as VS Code suggests the best completion anyway.</p>
6. Quick Fix</h2>
</p>
CMD + .</span></span></code></pre>
The other side of auto-complete is the Quick Fix</strong> shortcut. Whenever you see an error or red underline in your code, the first thing you should do is apply the quick fix shortcut. VS Code will show a pop-up window showing possible fixes for your error.</p>
To be much more efficient, if you press the shortcut twice, the error will be fixed using the best option (VS Code will choose the best fix for you)</p>
There are a few quick fixes that VS Code can do for you such as fixing imports, implementing interfaces, and access modifier suggestions.</p>
7. Organise Import</h2>
</p>
Shift + Option(ALT) + O</span></span></code></pre>
After working on a file, it should be in your nature to always apply the Organise Import</strong> shortcut.
This shortcut arranges your imports found at the top of your file. It also removes unused imports, so be sure to always use this after every edit.</p>
8. Select All Occurrence</h2>
</p>
CMD + Shift + L</span></span></code></pre>
There are times when the Rename</strong> shortcut will not work depending on which words or text you want to replace.</p>
For example, you have hard-coded strings in your code that are written repetitively across your file. Instead of using a Find and Replace, you can use the Select All Occurrence</strong> shortcut to change this in real-time.</p>

Conclusion</h1>
Now that you have learned all the important shortcuts in VS Code, it is up to you to start using them and integrating them into your workflow.</p>
To see all the shortcuts in VS Code, you can find them by going to Settings > Keyboard Shortcuts</code>. You can also customise these hotkeys in the settings.</p>


How to set up your Mac to develop Flutter apps
2023-06-11T00:00:00+00:00
I hope you are excited to start your Flutter app development journey! I believe that macOS is the best platform to develop a Flutter app, as you can cover multi-platform development all in one machine.</p>
In this article, I will share my own Mac setup and show you how to set up your Mac to start developing Flutter apps.</p>
Requirements</h2>
To make your development life easy, here are the apps that you need:</p>

Xcode</li>
Git</li>
Android Studio</li>
Visual Studio Code</li>
iTerm2</li>
Flutter</li>
</ul>
Make sure that all these apps are installed on your machine before you start installing Flutter.</p>
Installing Xcode</h2>
</p>
It is important to install Xcode as it contains libraries to run your Flutter code on your physical iOS or a simulator. It also contains SDK licenses with terms and conditions that you need to agree with.</p>
The best way to install Xcode is through the App Store</a>.</p>
Once installed, install the command lines tools included by running this command in the terminal.</p>
xcode-select</span> --install</span></span></code></pre>Installing Git</h2>
Git is supposed to be installed already after downloading Xcode. If it is not head over to git-scm</a> to download the latest version of git for your Mac.</p>
Installing Android Studio</h2>
</p>
Android Studio is necessary to help you download Android development SDKs and tools for running your Flutter app in emulators. Check out the latest Android Studio here on Google's website</a>.</p>
It is possible to run Flutter apps without Android Studio and just install the necessary command line tools, but it is much easier to just download the whole suite and not worry too much about the specific tools to find.</p>
Installing Visual Studio Code</h2>
</p>
I think The best IDE for writing Flutter code in Visual Studio Code</a>. It currently has tons of plugins, templates, and useful shortcuts to make your Flutter journey more enjoyable and streamlined.</p>
Don't forget to make it a habit of using [[The top 8 Visual Studio Code shortcuts you need to know as a Flutter developer| keyboard shortcuts in Visual Studio Code]] as it will greatly speed up your workflow.</p>
Installing iTerm2</h2>
I highly suggest you download iTerm2</strong></a> and use it over the default Terminal.app</code>. Our workflow involves more automation and scripting over UI in our domain, so we might as well get the best tool for it.</p>
</p>
Once iTerm2 is installed, I highly encourage you to download oh-my-zsh</strong></a> to make your terminal more beautiful and rich with autocomplete tools.</p>
Installing Flutter</h2>
</p>
Once you have installed all the recommended apps, it is time to install the latest version of Flutter</a>.</p>
After downloading and extracting the SDK in your chosen directory, make sure to add the Flutter executable in your shell path so you can run Flutter in your terminal.</p>
Assuming you are using zsh</strong>, open up your .zshrc</code> and add the following line:</p>
export</span> PATH</span>=</span>"</span>$PATH</span>:[PATH_WHERE_YOU_EXTRACTED_THE_FLUTTER_ZIP]/bin"</span></span></code></pre>Verifying Flutter installation</h2>
The final step is to make sure that everything works. To test if Flutter is working, run the Flutter doctor command:</p>
flutter</span> doctor</span></span></code></pre>
Normally, this would show up with a few warnings about licenses not being accepted yet, but that's okay! Since we have installed Xcode and Android Studio, we can run the following commands to accept these licenses.</p>
For Xcode licenses, run:</p>
sudo</span> xcodebuild -license accept</span></span></code></pre>
And for Android Studio, run:</p>
flutter</span> doctor --android-licenses</span></span></code></pre>
Hopefully, once you run flutter doctor</code> again, you will see that everything else has been successfully green-ticked!</p>
</p>

References</h1>

https://docs.flutter.dev/get-started/install/macos</a></li>
https://verygood.ventures/blog/very-good-flutter-setup</a></li>
https://www.freecodecamp.org/news/how-to-download-and-install-xcode/</a></li>
https://www.reddit.com/r/FlutterDev/comments/s8z1xm/android_studio_vs_vs/</a></li>
</ul>


Transforming themobilecoder to rafaelds, and the other way around
2023-06-08T00:00:00+00:00
Here's an update for those looking 👀 into my page.</p>
I got a notification in my email that my domain rafaelds dot com is expring.</p>
What?</h3>
I did not know that I HAVE</em> this domain! It's short and sweet.</p>
So for now, I will make my personal one use rafaelds.com</code>, whilst my themobilecoder.com</code> domain will be used for my Flutter-centric blog.</p>


The new mobilecoder website
2023-03-07T00:00:00+00:00
I made a decision to migrate my website rafaelds.com</a> from Bluehost/Wordpress into a static site generator.</p>
I am now using eleventy</a> as my tool to build my website. Since it is a static site generator, I have to update my source code and redeploy to my server every time I want my changes to be public. This includes new posts such as this one.</p>
This change gives me more flexibility in what I want to do with my content.</p>
Special thanks to https://www.lenesaile.com/en/</a> for sharing a beautiful Eleventy template!</p>
Ta!</p>


Flutter hackathon #hack20 journey
2020-07-06T00:00:00+00:00
I will share in this post how our Flutter hackathon #hack20 journey was. This is an anecdote on how the whole experience was for me and my team.</p>
#hack20 background</h2>
#hack20 is the second of the annual Flutter hackathon hosted by the Flutter community that happened from 27-29th of June 2020. While it is not an official Google event, it is backed and sponsored by Google and other big companies in the field.</p>
Basically, you think of a project that you can create using Flutter. You then form a team or work on your own for 48 hours before you submit your project. Top 20 winners get prizes, with the first place getting a $4000 worth of electronic setup.</p>
The theme of your project can be Saving the Planet or Retro/Cyberpunk</strong>. There were around ~2600 participants, 650 teams and ~250 submitted projects</p>
Did you win?</h2>
No, we did not</strong> 😂. There were two rounds of voting, and all participating teams get to vote on other teams' projects. We luckily managed to reach the final round (one of the 90 teams), but that was it.</p>
The project</h2>
You can checkout our code in this github repository</a>. You can also try it on web from here</a>, though some of the features are not really optimised for browsers. Make sure to use landscape! Also, exporting PDF on web sometimes work!</p>
On top of that, here is the video that we almost did not submit due to iMovie crashing 30 minutes before the deadline.</p>
</iframe></div>

The team</h2>
Our team of three is called GMT+10</strong>. We chose that name because we all work together here in Sydney, AU. The three of us are all Android developers who believed that we should use Flutter in our company app!</p>
We believe that we are at a slight disadvantage because of timezones. The official time started at Saturday, 10:00 PM Sydney local time and will end at Monday 10:00 pm. So following the rules, we only have around 24 hours with sleep because we have a day job on a Monday.</p>
Day 1 - Ideation</h2>
This is the fun part in my opinion. This is where we tried to think of ideas that can either be fun to use or just plain helpful to others. We used Invision to draw out and gather different ideas and suggestions, because all of us were working together remotely.</p>






At the same time, this is the hardest part of the hackathon. There are so many considerations while we were thinking of possible projects.</p>

Is it doable in 48 hours?</li>
Will people use it?</li>
Has anyone already made one?</li>
Will someone possibly have the same project?</li>
Will it look presentable on the demo?</li>
</ul>
Each of these points are valid considerations. At the time, we did not know how voting will work, but I realized after that the video of the demo is the most important part of it.</p>
On top of that, we avoided projects that other people will most likely make e.g. Recycling App, Retro Games, COVID tracing, etc.</p>
P.S. The winner of the hackathon was actually a retro game (Game and Watch)</em></p>

Day 2 - Making the app</h2>
This day is how we spent our time making the app. We were using Zoom to be constantly together. While everyone worked on every part of the code base, each one of us has a specific focus.</p>
App design</h3>
As a disclaimer, I am in no means a designer. None of us in the team claimed to be. Therefore, our approach is to make the best design we can do with our skills. In order to do this, we have to go for the simplest thing we could do.</p>
If you had a look at our ideation page above, the typewriter app would look something like this.</p>






Because I have prior experience in using Sketch for images in my blog, I volunteered to make the designs and export them as assets.</p>
One of the main source of assets that I used was unDraw</a>. They are open source and don't even require to cite them as sources. And if you haven't already, don't forget to give them a shoutout through twitter. I am sure that most of you have used one or two of their images.</p>
I get these images, and modify them as I go. Even our app logo was derived from it. This is how my Sketch board looks like during the hackathon.</p>






Keyboard design</h3>
I designed the keyboard using Sketch. The idea is not an original one from me, as I have to look at how a typewriter keyboard would look in a mobile app. We used the top typewriter app in Play Store as a guide. Looking at our InVision screenshot again, here is what we used as a reference.</p>






Now, the dreaded part is to design our own keyboard. I didn't have much time and experience in doing this efficiently, so I had to quickly look for tutorials on how to do this properly.</p>
In Sketch, there is a thing called Symbol</strong>, where it is like a master copy of a design. It means that if I change this master copy, all the designs that use this will also update. Here is what I had in Sketch.</p>






Using that symbol, I had to make each key that will be present in the keyboard. The letters in the keyboard has to change their cases too, so I have to account for that as well. Never forget all those numbers and symbols!</p>






Writing the code</h3>
For the most part, I wrote the code for the typewriter keyboard. It was far from perfect, and not really using any patterns such as BLoC.</p>
What I did however is to make it reusable. The typewriter keyboard widget is just a normal Flutter widget that allows you to listen to keystroke events.</p>
It means that user of this keyboard just needs to pass a TypewriterKeyboardController, listen to keys being pressed and process it elsewhere in the code. Here is an actual snippet of our main screen using the typewriter keyboard and controller.</p>
@override</span></span>
void</span> initState</span>() {</span></span>
  super</span>.</span>initState</span>()</span>;</span></span>
</span>
  _typewriterKeyboardController </span>=</span> TypewriterKeyboardController</span>()</span>;</span></span>
  _typewriterKeyboardController</span>.</span>textStream</span>.</span>listen</span>(_onTextReceived)</span>;</span></span>
}</span></span>
</span>
@override</span></span>
Widget</span> build</span>(</span>BuildContext</span> context) {</span></span>
  return</span> Scaffold</span>(</span></span>
    appBar</span>:</span> AppBar</span>(</span></span>
      leading</span>:</span> BackButton</span>()</span>,</span></span>
    )</span>,</span></span>
    bottomSheet</span>:</span> TypewriterKeyboard</span>(</span></span>
      typewriterKeyboardController</span>:</span> _typewriterKeyboardController</span>,</span></span>
    )</span>,</span></span>
  )</span>;</span></span>
}</span></span>
</span>
void</span> _onTextReceived</span>(</span>String</span> text) {</span></span>
   final</span> textValue </span>=</span> text</span>.</span>toLowerCase</span>()</span>;</span></span>
</span>
   switch</span> (textValue) {</span></span>
      //Update EditText</span></span>
    }</span></span>
}</span></span>
// © rafaelds</span></span></code></pre>

Again, this could be further refactored, such that the logic to handle keys would be on a BLoC or a different service class. Given the time and pressure, we just wrote what would work at the time.</p>
Code collaboration</h3>
This can a bit inconvenient sometimes. Each of us have our own style of writing code. While there is really no right or wrong with style, it is important to have a consistent way of structuring and formatting code within a codebase.</p>
One example is line formatting. I personally prefer putting commas at the end of a Flutter tree code so it would look like a tree when auto format happens. Some of us however prefer to make it single line if it's short enough.</p>
Due to these inconsistencies, a small commit might end up having a large changeset due to spaces and formatting</strong>.</p>
If we write code in Android, we will definitely have consistent style of writing code as we have been pair programming at work, and everyone just syncs with each other.</p>
The good thing with what we did is that we barely stepped on each others' toes. We split our work by features, such that one is working with Firebase authentication and the other is on exporting and viewing PDFs.</p>
Day 3-ish - Submitting the project</h2>
The team was able to barely finish the app on Sunday evening. The problem is that the deadline will be at 10:00 pm Monday. We have our daily job on a weekday, so we only have the Monday afternoon to finish the video.</p>
Making the video</h3>
We had an idea of just showing in the video how the app works, but it is so damn boring to present a note taking app with a typewriter design.</strong> I mean yeah, there's Firebase integration so you can save your notes online, but every other note app does the same thing!</p>
We already know that we are not going to win (not with that attitude)</em>. Our last saving grace is to just make a good video, and that's what we tried to achieve.</p>
Our solution is to select a really dramatic music that still sits well with the app, with a great message written in the note. Since we already knew we will never going to win, we decided to just write a message that wishes everyone good luck.</p>
We were sure that other teams will be writing apps that will help save the planet, so that's where we focused on. We spent a fair amount of time looking for a good music and thinking about a message.</p>
If you have not watched the video above, here is the message in our video.</p>

  </video>
  Our message to the hackathon participants</figcaption>
</figure>

Exporting the video</h3>
Exporting the whole video gave us all a mild heart attack. It was 30 minutes</strong> before the deadline, and we just started exporting this movie project to a video file.</p>
As someone who has not exported a 1-minute long video on a 6 year old laptop, this was a new experience for me. Our saving grace to our simple app is going down the drain as we saw this image. Oh, I could have benefited from the new Macbook prize 😂</p>
We are in a dilemma because if I just force shutdown iMovie, it might take another 30 minutes to export. We are also not quite sure if we have saved the movie project, because iMovie does not have a manual Save function!!</strong></p>
Fortunately, the project was auto saved. One of my teammate was using a newer Macbook, so we thought of just copying the iMovie project (which was hard to locate btw), send it to him with our amazing Australian internet speed, and let him do the file export.</p>
The miracle</h3>
While we are waiting for a miracle, my other team mate started to export the video in his laptop. I was browsing the Slack channel for this Flutter hackathon and saw a message that kept our hopes up.</p>






Now that we have an additional hour to submit our video, we knew that we will be able to sleep well that night.</p>
Even before my teammates video export, iMovie successfully exported the video. However, iMovie didn't recover so I just shut it down. If you have a dinosaur laptop like I do, stay away from iMovie.</p>
Takeaway</h2>
It was a fun hackathon experience. I was coughing the whole time during the hackathon, so it was fun but not entirely a pleasant experience.</p>
My teammates and I just proved that Flutter is a great tool to develop apps reliably on most platforms, including web. It will be a long stretch to convince our teammates in the office how much Flutter can do, but it does not matter.</p>
I honestly learned a lot more in doing designs in Sketch. This is a skill that I really want to improve.</p>
On the other hand, I am really impressed with the app ideas of the other participants, especially the ones with the Save the Environment</strong> theme.</p>
Congratulations to everyone that won, and see you next hackathon!</p>

Links</h3>

Promotional video</a></li>
Github project repo</a></li>
Demo web app</a></li>
</ul>


I started building a radio app
2020-04-04T00:00:00+00:00
I started writing a radio app following the tutorial on making a radio app in Flutter that I recently published. I was inspired to make one as I wanted to publish a radio app for iOS and Android devices.</p>
Although still in its early stages, I am planning to release this soon to both App Store and Google Play stores.</p>
Current features</h3>
At the time of writing (4th April, 2020), the radio app is at least able to play an online radio station. You can also choose which country to get stations from and bookmark them.</p>
I have used the most basic and vanilla design I can think just so I can push more features early on. No fancy animations yet!</p>

  </video>
  Radio playthrough</figcaption>
</figure>
Here are some of the features that are already in the app worth mentioning:</p>

Works on both iOS and Android</li>
Can play radio station on the background (even when the phone is locked)</li>
Can play / pause radio from the lock screen</li>
Bookmark a radio station</li>
</ul>
Challenges</h3>
I found out that the simple things are the ones difficult to implement. It took me a while to fix simple issues just to make the experience of using the app better, even if they seem very easy to do.</p>

  </video>
  Features</figcaption>
</figure>
Things like consistency between parts of the screens in the app for example. Pressing the heart button in the media player should update the favourites screen. At the same time, if I remove the station in the favourites screen, the heart button in the media player should be updated too.</p>
Another example is showing screens in between stages of the app. The app should show important information such as telling the user that there are no stations saved (instead of just showing a blank canvas). Or letting the user know that the app is still getting the list of radio stations by showing a loading spinner.</p>
Features to be added soon</h3>
The app still needs a lot of polishing and updates before I publish it. These are some of the features I might add before I release the app to the public</p>

Make the UI more beautiful</li>
Add simple animations</li>
Add a screen to show the radio information</li>
Get stations by genre (news, rock, country, etc.)</li>
</ul>
Conclusion</h3>
That is it for the update! Writing this app has been both a joy and a pain in the butt, but (double pun) I will still continue and finish this up for everyone to use.</p>

Rafael Delos Santos

Simpler and Better Flutter State Management with Cubit

Reference</h1> https://bloclibrary.dev/bloc-concepts/#cubit</a></li> </ul>

How to use custom theme colours in Flutter without using Material or Cupertino Theme

References</h2> https://pub.dev/packages/color_theme_provider</a></li> </ul>

How to use PageView in Flutter

References</h1> https://api.flutter.dev/flutter/widgets/PageView-class.html</a></li> </ul>

Flutter navigation with go_router package

Define our Screens</h1> In our example, we can have three hypothetical screens: Splash screen</code>, Home screen</code>, and Settings screen</code>.</p> </p> Figure 1. Screens to use in our navigation example.</p>

Navigating from one screen to another</h1> There are two basic ways to navigate from one screen to another. One is using context.push()</code> and the other is context.go()</code>.</p>

References</h1> https://pub.dev/packages/go_router</a></li> </ul>

Build a simple game with Flutter and Flame

References</h1> https://docs.flame-engine.org/latest/</a></li> </ul>

My 2024 plans and goals for rafaelds

Summary</h1> To summarise, you can expect more Flutter articles and tutorials in 2024, as well as a free e-book on learning to build an app with Flutter 🔥.</p> Happy coding! Raf</p>

Trying out Advent of Code 2023

How to use Isolates for parallel processing in Flutter

References</h1> https://dart.dev/language/concurrency</a></li> https://api.flutter.dev/flutter/dart-isolate/Isolate-class.html</a></li> https://api.flutter.dev/stable/3.1.5/dart-isolate/Isolate/spawn.html</a></li> </ul>

On the importance of abstraction when using third-party libraries

Using Future in Flutter - Get comfortable with asynchronous data

Dependency Injection in Flutter using Riverpod

References</h1> https://riverpod.dev/</a></li> </ul>

Should I learn Flutter in 2023 - An App Developer's edge

`Reference</h1> https://bloclibrary.dev/bloc-concepts/#cubit</a></li> </ul>`

`References</h2> https://pub.dev/packages/color_theme_provider</a></li> </ul>`

`References</h1> https://api.flutter.dev/flutter/widgets/PageView-class.html</a></li> </ul>`

Navigating from one screen to another</h1>
There are two basic ways to navigate from one screen to another. One is using `context.push()</code> and the other is context.go()</code>.</p>`

`References</h1> https://pub.dev/packages/go_router</a></li> </ul>`

References</h1>

https://docs.flame-engine.org/latest/</a></li> </ul>

Summary</h1>
To summarise, you can expect more Flutter articles and tutorials in 2024, as well as a free e-book on learning to build an app with Flutter 🔥.</p>
Happy coding! Raf</p>

References</h1>

https://dart.dev/language/concurrency</a></li>
https://api.flutter.dev/flutter/dart-isolate/Isolate-class.html</a></li>
https://api.flutter.dev/stable/3.1.5/dart-isolate/Isolate/spawn.html</a></li> </ul>

References</h1>

https://riverpod.dev/</a></li> </ul>