Rafael Delos Santos

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

Unknown — Fri, 05 Apr 2024 00:00:00 +0000

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>



Trying out Advent of Code 2023
Unknown — Sun, 03 Dec 2023 00:00:00 +0000
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>


On the importance of abstraction when using third-party libraries
Unknown — Fri, 29 Sep 2023 00:00:00 +0000
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>


Should I learn Flutter in 2023 - An App Developer's edge
Unknown — Thu, 13 Jul 2023 00:00:00 +0000
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>


What does a Flutter code structure look like to a beginner? - An Introduction
Unknown — Wed, 28 Jun 2023 00:00:00 +0000
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>


Transforming themobilecoder to rafaelds, and the other way around
Unknown — Thu, 08 Jun 2023 00:00:00 +0000
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
Unknown — Tue, 07 Mar 2023 00:00:00 +0000
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
Unknown — Mon, 06 Jul 2020 00:00:00 +0000
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>
// © themobilecoder</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
Unknown — Sat, 04 Apr 2020 00:00:00 +0000
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>

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

`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>`

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>

The Edge of an App Developer</h1>

The perks you get as a Flutter developer</h3>

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>

`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>`

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>

Links</h3>

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

Rafael Delos Santos

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

Trying out Advent of Code 2023

On the importance of abstraction when using third-party libraries

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

What does a Flutter code structure look like to a beginner? - An Introduction

Transforming themobilecoder to rafaelds, and the other way around

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

Flutter hackathon #hack20 journey

I started building a radio app

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

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>

Trying out Advent of Code 2023

On the importance of abstraction when using third-party libraries

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

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>

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>

The Edge of an App Developer</h1>

The perks you get as a Flutter developer</h3>

What does a Flutter code structure look like to a beginner? - An Introduction

Transforming themobilecoder to rafaelds, and the other way around

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

Flutter hackathon #hack20 journey

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>

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

I started building a radio app

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>

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

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>

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>`

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>

Links</h3>

Promotional video</a></li>
Github project repo</a></li>
Demo web app</a></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>