
I recently discovered what shaders are and the impact they have on the visual industry. What really surprised me was realizing how easy it is to use them in Flutter, which opens up a world of possibilities for developers.

That's why I decided to write about shaders, explain how to implement them, and share some of the tools I used. These tools made the development process much easier and, honestly, a lot more exciting.

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-1.gif)

## 👾 What is a shader?

A shader is a small program that runs on the graphics card (GPU) to process images, apply visual effects, and improve graphical performance. Its main function is to calculate how the pixels of an image should be drawn, allowing for effects such as shadows, lighting, textures, and colors.

Although shaders are often associated with 3D graphics, they also have applications in 2D. In the case of Flutter, they can be used to create custom and dynamic visual effects in the user interface, significantly expanding developers' creative capabilities.

> If you're interested in diving deeper into this topic, [The Book of Shaders](https://thebookofshaders.com/) is an excellent reference. This book covers everything from basic concepts to advanced ideas.

In Flutter, shaders are programs written in **GLSL** (OpenGL Shading Language). As mentioned earlier, they run directly on the GPU, which allows for efficient and fast graphical processing. Their basic structure includes essential elements that define how pixels are processed and how visual effects are applied to images.

### Versioning and Precision:

At the beginning of the shader code, the shader version is typically defined, for example:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-2.webp)

This indicates that we are using GLSL version 4.60, which is common for modern shaders. Additionally, the precision of the operations is set:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-3.webp)

This ensures that floating-point calculations are performed with medium precision.

> mediump means intermediate precision, sufficient for most graphical calculations without a significant impact on performance. This is especially useful for mobile devices or platforms where performance is a concern, as keeping precision at the necessary minimum can help optimize performance.

### Including Files and Defining Uniforms:
Flutter provides an effect file (`runtime_effect.glsl`) that can be included to gain additional functions, and variables are defined to be used throughout the shader:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-4.webp)

In this case, I decided to include the following variables:

- **screenSize** is a variable that defines the size of the screen or canvas where the image is being rendered.

- **inputImageTexture** is a texture used as input for the shader, usually the image to which the effect will be applied.

### Fragment Coordinate Calculation:
In the body of the shader, the main function (`main()`) is usually defined, which calculates the final color of each pixel or fragment:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-5.webp)

**FlutterFragCoord() **obtains the coordinates of the current fragment, allowing us to know the position of each pixel on the screen.
uv is the normalized texture coordinate, which is used to access the texture (inputImageTexture) and retrieve the color of the corresponding pixel.
Finally, the calculated color is assigned to **fragColor**, which is the color that will be displayed for that pixel.

It's important to understand that shaders work individually on each pixel or “fragment” of an image. This means that when a shader runs, it doesn't process the entire image at once; instead, it calculates how each pixel should look based on the given instructions. Each pixel is processed independently.


## 🧑‍💻 Implementing Shaders in Flutter

Now that we understand a bit more about what shaders are and how they work, let’s move on to the implementation!

In Flutter, we can use the [flutter_shaders](https://pub.dev/packages/flutter_shaders) library to easily and efficiently integrate shaders into our projects. Shader files are typically placed at the same level as the `lib`, organized as follows:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-6.webp)

This structure helps keep the code well organized by separating the shaders from the rest of the project logic.

To make the shaders visible to the rest of the project, you need to declare them in the `pubspec.yaml` file. This is done right below the uses-material-design section, as follows:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-7.webp)

Next, we define a widget that will act as an encapsulator for the elements to which we want to apply shader effects.

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-8.webp)

### Code Description

This widget, called `InteractiveEffectWidget`, detects the user's finger movements and updates a shader in real-time to reflect those changes.

### 1. Capturing Position with Listener
The widget uses a `Listener` to capture the user's movements on the screen. Each time the user moves their finger, the local position is updated in the `fingerPosition` variable:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-9.webp)

### 2. Using the Shader

Inside `ShaderBuilder`, we use `AnimatedSampler` to apply the shader in an animated way. The code performs the following on each frame:

- The image dimensions (width and height) are set using `shader.setFloat`.
- The finger position in x and y is provided.
- The image (frame) is passed to the shader with `shader.setImageSampler`.
- The shader is drawn over a rectangle that covers the entire screen, continuously applying the visual effect.

### Shader Part: Code Analysis

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-10.webp)

With this shader, we achieve a visual effect similar to the one shown at the beginning of the post: by moving the finger across the screen, we can modify the position of a vignette or mask that reveals specific parts of the background image.

So, how does this work? 🫤

The trick lies in how shaders process pixels. In this case, the shader takes the touch coordinates (finger position on the screen) and uses them to determine which parts of the image to display and which to darken. This dynamic effect is achieved by combining coordinate mathematics with the shader’s visual properties.

### 1. Uniforms and Variables
As we saw earlier, the shader receives information from Flutter via uniforms, which are global variables that remain constant during the drawing process:

- `screenSize`: The dimensions of the drawing area in Flutter.
- `mousePosition`: The position of the finger or cursor, updated dynamically.
- `inputImageTexture`: The image or texture that will be processed.

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-11.webp)

### 2. Coordinates and Normalization
In the shader:

- The fragment coordinates (`fragCoord`) are calculated using the `FlutterFragCoord().xy` function.
- These coordinates are normalized by dividing them by `screenSize`, resulting in values between 0.0 and 1.0 (`uv`), which makes it easier to perform proportional calculations for any screen resolution.

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-12.webp)

### 3. Calculating the Distance to the Light Center
The finger position, provided by Flutter, is also normalized (`lightCenter`). Then, the distance between each pixel and the light center is calculated:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-13.webp)

### 4. Light Intensity
`smoothstep` is used to smooth the transition between lit and dark areas, based on the distance to the light center:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-14.webp)

### 5. Color Blending
The color of each pixel of the texture is modulated according to the light intensity. As the distance increases, the color fades to create a light effect that “reveals” parts of the image:

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-15.webp)

### 6. Final Result
The processed color is assigned to `fragColor`, which is the visual output of the shader.

And that's it!!
This approach allows for applying complex visual effects to any widget within Flutter in a simple and animated way.

Feel free to check out the full code, along with some other examples 😃.

![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-16-1.webp) ![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-16-2.webp) ![](/posts/exploring-shaders-in-flutter-my-journey-from-knowing-to-implementing/media-16-3.webp)

[https://github.com/Mauro124/flutter_shaders](https://github.com/Mauro124/flutter_shaders)

See you in the next post! 👋🖖

---

### References
- [https://pub.dev/packages/flutter_shaders](https://pub.dev/packages/flutter_shaders)
- [https://thebookofshaders.com/01/](https://thebookofshaders.com/01/)
- [https://hexler.net/kodelife](https://hexler.net/kodelife)
---

If you're not familiar with the difference in processing between CPU and GPU, here's a Mythbusters video that makes it crystal clear 😉

[Video - Mythbusters Demo GPU versus CPU](https://youtu.be/-P28LKWTzrI)

>Do you want to develop an app in Flutter?

>Learn more about us at [https://mtc-flutter.com/](https://mtc-flutter.com/)

> Follow us on Instagram [@mtc.morethancode](https://www.instagram.com/mtc.morethancode)




Hello everyone! 🖖

This time, I want to share with you the journey of one of the most extravagant yet fascinating applications we’ve had to develop so far.

Its name is **Croalitoral**, and it’s capable of identifying up to 25 species of amphibians based solely on their calls.

Here’s a little preview for you.

![](https://cdn-images-1.medium.com/max/2000/1*AMTOuSaDQ2aPRn6vNyNP1A.gif)

The application originates from the biologist and researcher of [Conicet](https://www.conicet.gov.ar/) (National Council for Scientific and Technical Research), [Evelina Leon](https://www.linkedin.com/in/evelina-leon-20023896/). She needed to identify amphibians in nature based on their calls using her cell phone.

Clearly, this was an idea that didn’t just pop out of our heads 😅.

With no prior experience in the field of audio classification, we thought of turning to [Tensorflow](https://www.tensorflow.org/?hl=es-419), a tool we had already worked with for image recognition.

We started developing our own recognition models, and despite not having much knowledge of training models of any kind, by following some tutorials, we managed to achieve relatively good results. However, all these models were running on my computer ([Lenovo Legion Y720](https://www.lenovo.com/ar/es/laptops/laptops-legion/legion-serie-y/Legion-Y720/p/88GMY700794)), which had certain features that aided their performance.

And here is where our first problem showed up. 😢

These models needed to be accessible from anywhere, which meant we needed a server with specifications similar to my computer, which was very expensive.

If we add to this the premise that the application had to identify amphibians in the middle of nature (a place where there usually isn’t a great signal), it became nearly impossible to use these models.

![No connection](https://cdn-images-1.medium.com/max/2000/1*Jii8VvaW6Isy_-PRIHNJ-Q.gif)_No connection_

That’s when we turned to [Tensorflow Lite](https://www.tensorflow.org/lite?hl=es-419).

**TensorFlow Lite** (TF Lite) is an optimized and lightweight version of **TensorFlow**, specifically designed to run machine learning models on mobile devices, IoT devices, and other systems with limited resources. But most importantly, **it doesn’t require an internet connection as it runs locally and in real-time**.

This put us back on track with a small detail.

The models we had trained weren’t ready to be used with **TF Lite**. This is why we turned to [Teachable Machine](https://teachablemachine.withgoogle.com/train/audio), which allowed us to train and develop prototype models to be used with **TF Lite**.

> If you’re not familiar with Teachable Machine, I recommend taking a look _😉_ [https://teachablemachine.withgoogle.com](https://teachablemachine.withgoogle.com/)

Once the model was trained in the **Teachable Machine**, we obtained a compressed file containing 2 files:

- **labels.txt**: It contains the complete list of the trained classes, in this case, the 25 species, plus an extra class for background noise.

- **soundclassifier_with_metadata.tflitemodel**: The **TensorFlow Lite** model is ready to be integrated into our application.

Now it was time to integrate it into our **Flutter** application.

For this, we used [tflite_audio](https://pub.dev/packages/tflite_audio). We started by placing the Teachable Machine files inside the project, renaming them to frogs_labels.txt and frogs_model.tflite. We added them to pubspec.yaml and got them ready to be used by the library.

![](https://cdn-images-1.medium.com/max/2000/1*JAXPhufbrG3e3Yg-T6RBmA.png)

![pubspec.yaml](https://cdn-images-1.medium.com/max/2392/1*U2j3rXAxdPK0eMMbQp5t6A.png)_pubspec.yaml_

After importing the library, we initialized it by assigning the previously mentioned model and labels.

![](https://cdn-images-1.medium.com/max/2000/1*Be1LNMW15aLTC5ds-HXzoA.png)

Regarding the following attributes:

- **inputType**: As we are using a model developed with **Teachable Machine**, it’s necessary to set the value to **_‘rawInput’_**.

- **isAsset**: In case our model and labels are located, for example, in external storage, this attribute should be set to false. In our case, both are located in the **_‘assets’_** folder of the project.

- **outputRawScores**: By setting this attribute to true, we are asking the library to return the detection accuracy levels corresponding to each of the trained classes.

It’s important to clarify that the values returned by the library when activating the outputRawScores are in string format as follows.

![](https://cdn-images-1.medium.com/max/2000/1*iy9uo4edQdSIXowCpaLrvg.png)

Because of this, it was necessary to convert the string to an array in order to access each of the values individually and in double format.

![outputRawScores an array](https://cdn-images-1.medium.com/max/2560/1*bsqQDoz7n3oXxM21Fj3ymg.png)_outputRawScores an array_

The first position of the array refers to the first class in the labels file.

So, we could establish the connection between both lists and thus understand what the model was recognizing.

![](https://cdn-images-1.medium.com/max/2000/1*_uAWtQWah7WN1cgewvn7Ew.png)

![Labels](https://cdn-images-1.medium.com/max/2000/1*tqscdKM0RVihahxfiAyFrA.png)_Labels_

For recording, it wasn’t necessary to use any additional library; **tflite_audio** already has what’s needed to perform real-time recording and recognize the trained classes.

To initiate recording and recognition, we need to invoke the method from the library startAudioRecognitionand configure some initial attributes.

startAudioRecognition records small 1-second segments which are then analyzed by the model.

![](https://cdn-images-1.medium.com/max/2000/1*IeVP-r8Xyb6uldKt5k31tw.png)

Some of these attributes are tied to the characteristics of the dataset used to train the model. For instance, if the audio dataset was recorded with a sample rate of 16 kHz, the attribute should be configured with the same value. Similarly, when configuring audioLength and bufferSize.

> If you want to learn more about Sample Rate, Audio Length, and Buffer Size, I recommend reading the following article from Adobe [https://www.adobe.com/uk/creativecloud/video/discover/audio-sampling.html](https://www.adobe.com/uk/creativecloud/video/discover/audio-sampling.html)

In our case, we used the following values since the audio recordings were made using a **Teachable Machine**, and these are the values the platform uses for training.

![](https://cdn-images-1.medium.com/max/2000/1*AnjgmaDqi75TDz0XzoQ3vw.png)

Lastly, there are numOfInference and detectionThreshold.

As I mentioned before, when invoking the startAudioRecognition method, it records 1-second segments. numOfInference determines how many times or cycles these segments will be recorded and analyzed. If we assign a value of 2, the library will be active for 2 seconds, with 1 second per cycle.

It’s crucial to find the value where the model performs best. In some cases, the higher the number, the greater the accuracy over time. But this isn’t always the case.

![](https://cdn-images-1.medium.com/max/2000/1*JZm-4XzXzbZz4Tit_DNx8g.gif)

detectionThreshold is the value at which we ignore predictions that don't exceed this threshold.

![](https://cdn-images-1.medium.com/max/2000/1*M5WqzM_6_oPM8IYg6Mo8Iw.gif)

Once the library is configured, startAudioRecognition will return an event stream that we can easily access.

![](https://cdn-images-1.medium.com/max/2560/1*_GivQI48NDhnuN1k3fp3wg.png)

In our case, using **Riverpod**, we store these values and display them in real-time on the main screen.

![](https://cdn-images-1.medium.com/max/2000/1*AMTOuSaDQ2aPRn6vNyNP1A.gif)

And that’s it!

Thank you for coming this far. ≡ƒÿè

See you in the next post! ≡ƒæï≡ƒûû

**REFERENCES**

- [https://carolinamalbuquerque.medium.com/audio-recognition-using-tensorflow-lite-in-flutter-application-8a4ad39964ae](https://carolinamalbuquerque.medium.com/audio-recognition-using-tensorflow-lite-in-flutter-application-8a4ad39964ae)

- [https://www.adobe.com/uk/creativecloud/video/discover/audio-sampling.html](https://www.adobe.com/uk/creativecloud/video/discover/audio-sampling.html)

- [https://www.tensorflow.org/?hl=es-419](https://www.tensorflow.org/?hl=es-419)

- [https://www.tensorflow.org/lite?hl=es-419](https://www.tensorflow.org/lite?hl=es-419)

**WEBSITES**

- Teachable machine [https://teachablemachine.withgoogle.com/train/audio](https://teachablemachine.withgoogle.com/train/audio)

**LIBRARIES USED**

- For the audio recognition [tflite_audio](https://pub.dev/packages/tflite_audio).

- For state handling with [flutter_riverpod](https://pub.dev/packages/flutter_riverpod).
  > _Do you want to develop an app in Flutter?_
  > Learn more about us at [https://mtc-flutter.com/](https://www.mtc-flutter.com/)
  > Follow us on Instagram **@mtc.morethancode**



Hi everyone! 🖖

First of all, I want to thank you for your support in the last post Flutter + Rive + ML Kit.

**It was incredible!**
**Thank you all!**

Today, I came to show you my new friend **AVI**, a cute robot developed with Flutter, Rive, and Open AI.

Also, I’m working for left a link where you can access play and test him.
But AVI needs some tests more 😅.

![](https://miro.medium.com/max/640/1*IxVaip3FjE8zdit6X_h_CQ.gif)

The principal idea of this post is not to show the code but gives you an idea of ​​how I got to the current result.

_I will show some code. It is unavoidable 🤓._

AVI was borns after the last post. I thought, “I want to take this one level further”. So, I created a new character on Rive and gave it a voice.

![](https://miro.medium.com/max/640/1*Q2Gy9BMLUXcqn_Ngj2lmJg.png)

For this, I used [flutter_tts](https://pub.dev/packages/flutter_tts).

---

**TEXT TO SPEECH**

The essence was to put some text and have AVI say it in a funny voice. Lucky for me, the documentation of the package was clear. I just needed to make a few changes and get a unique instance of FlutterTts, with all the voice features I want, for all my code.

How can I do that? 🤔
With a provider.

![](https://miro.medium.com/max/720/1*z4dI6fVrvVLfpA5GZ4bd2A.png)

So, the voice now has:

locale: Because I’m Argentinian and I want to AVI speak Spanish 😄.
pitch: For the funny/cute part.
A voice: This was the hard part because I couldn’t find what each voice sounds like, so… I tried them one by one.
Now, the speak method.
I need a method that receives a sentence and executes my instance of FlutterTts.

![](https://miro.medium.com/max/720/1*eNMOylFjfWjw2wahCH7t4g.png)

Ok, ¡AVI is talking now! 🎊🎉

---

The next step was pretty obvious to me. I wanted to talk with AVI, not just write a text and listen to how he reproduces it.

So, I was going to need two things, for him to listen to me and the funniest and most beautiful thing, for him to understand and respond to me.

But… How can I do this? 😅

Well, first to first, AVI needs to listen to me. For this, I used speech_to_text.

**SPEECH TO TEXT**

Here, the idea is clear. I need to say something and translate that into a string.

Like with flutter_tts, I needed a unique instance of the [speech_to_text](https://pub.dev/packages/speech_to_text), and access to it from any part of my code.

¡YES, [provider](https://riverpod.dev/es/docs/concepts/providers/)! 😎

![](https://miro.medium.com/max/720/1*2Zg2keUrZ27tDPBRhJ7nNA.png)

Then, I need the method where all magic occurred.

![](https://miro.medium.com/max/720/1*j6LfXzxv0sCpLeoKjFlxpw.png)

So, I configured some parameters in the listen:

localeId: Like in the flutter_tts, I’m going to speak Spanish, so I need that speech-to-text to understand Spanish. Getting the AVI locale I assume that the user language is the same as the language that AVI speaks.
pauseFor: This was necessary because, on the web, the package doesn’t work perfectly. I talk and never stop to listen, at least that I stopped with a button.

¡Great, AVI can listen to me now! ✅

---

Finally, the brain 🧠.

**OpenAI — GPT-3**

Incredibly, this was the easy part of the process.

For this part, I only needed access to the API of [OpenAI](https://beta.openai.com/docs/introduction).

I don’t want to extend myself a lot with this part because I’m not joking OpenAI is super easy to use🤯.

Using the [completion](https://beta.openai.com/docs/api-reference/completions) part of the API, I configured a prompt that gives a story and personality to AVI.

Then, I attach the message from my speech and wait for the response of the API.

![](https://miro.medium.com/max/720/1*xyRT0muMbwJRTwd2rLDbxA.png)

When the OpenAI response, I put the response text on the first method of FlutterTts.

And that’s all!

![](https://miro.medium.com/max/640/1*gzIYh_m6X_ZyId5eHXnt6w.gif)

---

Thanks for getting here 🤟.

Like I said, coming soon, I’m going to provide a link where you can learn a little bit more about AVI, but most importantly, where you can play and test it.

Thanks again, and see you in the next post 👋.

---

**LIBRARIES USED**

- For .riv animation implementations, [rive](https://pub.dev/packages/rive).
- For state handling, [flutter_riverpod](https://pub.dev/packages/flutter_riverpod).
- For speech-to-text, [speech_to_text](https://pub.dev/packages/speech_to_text).
- For text-to-speech, the package [flutter_tts](https://pub.dev/packages/flutter_tts).
- For HTTP clients, the package [dio](https://pub.dev/packages/dio).

...

> If you like the post, help us to continue uploading content
> [BUY ME A COFFE](https://www.buymeacoffee.com/mtcmoretham)



## Flutter — Build, Measure & Learn

When building a product or feature, it is extremely important to understand the impact of what we are doing, be it positive or negative. To continue down the same path or pivot and repeat this **Create-Measure-Learn** process.

In this article, we will see how to prepare our Flutter application to integrate different analytics tools in a straightforward way.

![](https://miro.medium.com/max/1400/1*jPOuW0hOql8efs4goSYqeA.png)

### AnalyticsService

The first thing we are going to create is a service that allows us to interact with the trackers ([Google Analytics](https://analytics.google.com/analytics/web/), [Amplitude](https://amplitude.com/), etc) that we integrate so that our application simply communicates with this service and does not have much knowledge of **HOW** the implementation of themselves.

The basic functionalities that we can find are:

- Init the trackers
- Configure the user properties that we want to register
- Register the different events of our application

![AnalyticsService](https://miro.medium.com/max/1400/0*c6YUMwD7UW7l1xIJ.png)

Next, we will see in detail the implementation of each of these methods, but let's start by defining what a Tracker is.

### Tracker

This abstraction is what will define the behavior of each of the tools that we integrate later, that is, each of our trackers.

![Tracker](https://miro.medium.com/max/1400/0*rAyKWiHqk7JIiqBR.png)

Knowing what a tracker can do, let's go back to our AnalyticsService to complete the pending implementations.

### Initialization

Many analytics tools require initialization to use them. Initializing each of the trackers simply involves running **_tracker.init()_** for each one.

![AnalyticsService — init](https://miro.medium.com/max/1400/0*nI9-BTsMfaF6zUId.png)

This method will populate the service's internal **_trackers** list, which we will then use to mediate between the trackers and our application.

### User properties

In most analytics tools we can register user properties to better understand the type of users that use our application, create cohorts (groups of people that share common characteristics), etc.

![AnalyticsService — setUserProperties](https://miro.medium.com/max/1400/0*coNCoSrgrtAwYCPG.png)

Again, whenever we want to set or update a user's properties on our trackers, we simply call **tracker.setUserProperties(properties)** for each configured tracker.


For the example, our UserProperties are defined as follows:

![UserProperties](https://miro.medium.com/max/1400/0*80rYW4vvyoby5bwH.png)

### Events

Last but not least of the methods we are missing. All analytics tools (at least the ones I've used) to log an event require an event name and (optional) event properties.

Because of this, we are going to define an abstraction for the different events of our application.

![Event](https://miro.medium.com/max/1400/0*tKLStpJz-d5hqx48.png)

Now yes, knowing how our events are, we are going to register in the same way that we initialize and register user properties. Let's call **tracker.track(event.name, event.properties)** for each tracker.

![AnalyticsService — track](https://miro.medium.com/max/1400/0*xSDzG6MyuKcXPtlQ.png)

Up to this point, the application does not know of any particular analytics tool, it simply knows that there is a service that will allow it to track user events and properties.

### Trackers implementation

Once all the abstractions are defined, adding different analytics tools is very simple. Let's look at some examples.


### ConsoleTracker

This is a tracker that we can use for debugging purposes and, for example, verify that every time we use our service we do it correctly, that the events are "*tracked*" with the name and properties that we indicate, etc.

To create this tracker, we need to create a class that implements our Tracker abstraction.

![ConsoleTracker](https://miro.medium.com/max/1400/0*voa8AujZNYixBN3i.png)

### AmplitudeTracker

Now suppose we want to add a real tracker, such as Amplitude. The "*recipe*" is the same. Implement our Tracker abstraction and define the behavior of the methods.

![AmplitudeTracker](https://miro.medium.com/max/1400/0*FxPwPg-gDWBEfQha.png)

If we wanted to add Firebase Analytics for example, just repeat the steps of the previous trackers and that's it.

One point to note is that for each tracker we add, our application is not affected. It simply continues to use the main service without "*knowing*" that we add new trackers.

---

### Ok, and now… How do we use all this?

To start using the service in our application, the only requirement is to call **init(trackers)** before we want to register user properties or events. For example, in our *main.dart*

![main.dart](https://miro.medium.com/max/1400/0*UO7DZbFf2mgs6ghv.png)

Once our trackers are initialized, we can now register the user properties that we want.

![Register user properties](https://miro.medium.com/max/1400/0*PKAtssGXUyAwP1-i.png)

To register the different events of our app, remember that we previously defined the Event abstraction, so we must first create the concrete implementations.

Suppose our app is a dating app and we have a button that allows us to "*Like*" a user. If we wanted to track this event, we would need to create a class that extends Event (our abstract event).

![Like event](https://miro.medium.com/max/1400/0*OeunE-tdeFmM1CvZ.png)

With this, we can now track the event in our trackers using our **AnalyticsService**.

![Track event](https://miro.medium.com/max/1400/0*qh_83pgcxOnitvHb.png)

And that's it.


### Conclusión

We have created an analytics service with a certain ease of use and totally independent of our application, which could easily be an external package to which we indicate which trackers we want to use and that's it.

This is how we have implemented our analytics tools in our apps, like [Hitch](https://play.google.com/store/apps/details?id=com.mtc.hitch_app) or [WikiTrivia](https://play.google.com/store/apps/details?id=com.mtc.wikitrivia).

---

If you want to connect, you can do it through my networks:

[LinkedIn](https://www.linkedin.com/in/garispe/)

[Twitter](https://twitter.com/GuilleArispe)

More articles in our tech blog [More Than Code](https://www.mtc-flutter.com/flutter-blog) 🙌





Hi everyone! 🖖

In this opportunity a wanna show you a fusion that result very interesting and fun to me.

The final result was this:

![](https://miro.medium.com/max/1200/0*5-W7w2kGSPaaFKun.gif)

The idea of the post is to show you a little of the development and how was thinking.

For this, I am going to separate the same into 3 parts:

- (Rive) Design of the animation and implementation on Flutter.

- (Flutter) Implementation of the library camera.

- (ML Kit) Implementation of the library ML Kit.

Let's start 💪!

---

**Rive — Design and implementation**

> If you don't know Rive yet, please consider visiting https://rive.app/ 😉

As you can see in the image on top, the idea was to create an avatar with the capability to follow my face with his eyes.

It should be noted that I am not a great designer or animator, but it was enough for the test 😅.

That's how it occurred to me to use Rive to create an animation that follows a fixed point in space.

![Initial animation sample on Rive](https://miro.medium.com/max/1200/0*I8N5dNFf9lNSr43l.gif)

This point, subsequently, is going to be modified by 2 input variables, _positionX_, and _positionY_, both accessible from Flutter.

For this, Rive has something called [**State Machine**](https://help.rive.app/editor/state-machine), which allows the control of the animation throwing these 2 variables.

Once the variables were assigned to their respective animations, I got the following result:

![Sample input variables, positionX, and positionY](https://miro.medium.com/max/1200/0*0Xdk-aPJaH9zxY11.gif)

Something that blow my mind was the facilities of Rive to import and use the animations, applying just a few configurations.

Once the [rive](https://pub.dev/packages/rive) package was imported on Flutter, just needed to execute the next code:

![](https://miro.medium.com/max/1400/0*iGqv41VPKRIlu259.png)

RiveAnimation has a first parameter to configure the **.riv** exported from Rive.

A second attribute is called **artboard**. This refers to the place of work in the principal project. You can find this name on the superior corner of your animation, or the left of the hierarchy tree.

![](https://miro.medium.com/max/552/0*vIbmoLzKaj7akuAM.png)
![](https://miro.medium.com/max/594/0*azrAKH2w9vFQt1jy.png)

> You can create a lot of [artboards](https://help.rive.app/editor/fundamentals/artboards) into the same project, and work individuality in each one of them. It's for this, that the library demands define it.


Finally, the **onInit** parameter is executed once RiveAnimation is initialized. In this method, I initialize the controller of the State Machine and the input variables (positionX and positionY).

![](https://miro.medium.com/max/1400/0*LV19UFE88FfYHwOi.png)

Rive was ready! 🥳

---

**Flutter — Camera implementation**

I saw the need to implement the [camera](https://pub.dev/packages/camera) package, which allowed me to access the front camera of the cell phone and analyze in real time where my face was (specifically my nose 👃).

![](https://miro.medium.com/max/1400/0*LADrRlMWSwa0CFT0.png)

The initialization of this package begins by defining a list of **CameraDescription**. Through this list we can access the cell phone cameras, being _cameras[1]_ the front camera.

![](https://miro.medium.com/max/1400/0*BHV6xPyCzXvPxdlh.png)

The next step was to create a **CameraController**. This going to handle a data stream that would return an **InputImage** to be analyzed later by ML Kit.

![](https://miro.medium.com/max/1400/0*VhB7J4SxdXs-DPC_.png)

Access to the front camera! ✅

---

**ML Kit — Nose Analyzer 😜**

I could now move my animation wherever I wanted through input variables, and I could access my nose through the front camera of my cell phone. It only remained to unite both parts.

The implementation of [google_mlkit_face_detection](https://pub.dev/packages/google_mlkit_face_detection) was relatively simple.

I needed to initialize our **FaceDetector**, and in this case, activate the **Landmarks** option to identify the position of my nose.

![](https://miro.medium.com/max/1400/0*QmGY_KdFlQRetdvW.png)
![](https://miro.medium.com/max/1400/0*_63Ehv5UAp9FxyH_.png)


> To learn a little more about the options and features of face_detection
> I recommend you visit https://developers.google.com/ml-kit/vision/face-detection

Through the _processImage_ method, I got the points in X and Y, and with that, it might have been enough to animate the avatar, but it was quite expensive to constantly render the image, which led me to think of another option.

It occurred to me to "build" a kind of quadrant that will have 9 positions.

![](https://miro.medium.com/max/1400/0*VJTWxH6fJ22RgqlY.png)

Each of these quadrants was obtained from conditions greater and lesser than X and Y, within the camera frame.

![](https://miro.medium.com/max/1400/0*7NE36sudZbLgqk5A.png)

In this way, the animation would only be re-rendered in those cases where the position of the nose met any of the conditions.

At the end of the method, we can see the _ref.read(eyesPositionProviders.notifier).state_ statement, which can be a bit confusing if you've never used [flutter_riverpod](https://pub.dev/packages/flutter_riverpod) before.

This was necessary to be able to communicate to the animation when it should be rendered and how to do it.

![](https://miro.medium.com/max/1400/0*Fto_hoYORbFIynzG.png)

And, with this last method, I was already able to make my avatar focus on my nose. 😄

...

And that's it!

I invite you to learn a little more about the code at [https://github.com/Mauro124/avatar_animation]()

Thank you for coming this far. 😊

See you in the next post! 👋🖖

...

**MISCELLANEOUS DATA**

- The avatar was generated through [https://getavataaars.com/]()

**LIBRARIES USED**

- For .riv animation implementations, [rive](https://pub.dev/packages/rive).
- For state handling with [flutter_riverpod](https://pub.dev/packages/flutter_riverpod).
- For face detection, [google_mlkit_face_detection](https://pub.dev/packages/google_mlkit_face_detection).
- For the camera, the package [camera](https://pub.dev/packages/camera).

...

> Do you want to develop an app in Flutter?
> Learn more about us at https://mtc-flutter.com/
> Follow us on Instagram @mtc.morethancode




Hey everybody, long time no see!.

On this occasion, I'm going to show a clone of a crypto wallet using Flutter 3.0.

![](https://cdn-images-1.medium.com/max/2340/1*05IlbhNEHZr23f1ovFIHcA.png)

**It is pretty important that you can separate code in order to be readable**. In another post, I'm going to talk about **testing** and **maintainability**. In short, good practices and clean code.

![](https://cdn-images-1.medium.com/max/2252/1*AR9HmGZZblHcP7chK3B_zA.png)

So, let's code.

Analyzing the big picture, there are 2 parts of this clone: header and list of currencies. Let's dive into the first part, the header:

![](https://cdn-images-1.medium.com/max/2820/1*IDa9dFWHQnAWxk-p6_p1Dg.png)

In pseudo-widget language would be something like:

![](/posts/crypto-wallet-ui-using-flutter/code-1.png)

To achieve a rounded border at the bottom:

![Rounded border](https://cdn-images-1.medium.com/max/2220/1*6y7mGBHx9iP2EDacKYACTg.png)*Rounded border*

Now, let's dive into the second part, the list of currencies.

![Horizontal list of cryptocurrencies](https://cdn-images-1.medium.com/max/2800/1*GSESPxAZAN1Vhd8-l7DeSg.png)*Horizontal list of cryptocurrencies*

Now, we already know how to round the border (if not, see above ;)). The most important thing in this section will be dealing with **ListView.builder** and its error: **Get an error `Failed assertion: line 1687 pos 12: ‘hasSize'`** or similar.

**Remember, ListView needs a height. Otherwise, it doesn't know what to do!**

![ListView inside a column needs a height](https://cdn-images-1.medium.com/max/2252/1*TXGD4orKgi26faKbuTWsgw.png)*ListView inside a column needs a height*

CurrencyView widget manages all information currency has. The chart inside is fake, I used [LineChart](https://pub.dev/packages/line_chart) package with dummy data. In another post, I'm going to talk about how to make a request, read the response and display the UI.

Finally this post, I used the [Convex](https://pub.dev/packages/convex_bottom_bar) package because it is beautiful, take a look!

### What flutter topics are you interested in?

There are many ways to perform this design, try it out!

The full code is available on [GitHub](https://github.com/nanox77/flutter-examples/tree/master/shopping_wine).

If you want, you can read [the previous Flutter articles](https://www.mtc-flutter.com/flutter-blog).

That's all folks!

Enjoy!



Hi everybody!

In this post, we are going to see how to build a simple shopping wine using Flutter Web.

> Disclaimer: it's project only focuses in Flutter web and it is just UI.

The final project will see like this:

![Shopping wine](https://cdn-images-1.medium.com/max/4924/1*209b1e32gtYzXC90dUtJAw.png)*Shopping wine*

Let's start!

In order to sketch our view, we need to separate two components: left and right side. There are two **ListView** with their respective scroll.

On the left side, we have many components like **Text, TextField, Wrap** (menu), and another **Wrap** for products.

And on the right side, we have some **Text** and **Wrap** for shopping items.

Now, we are going to focus on the wine widget.

![Wine widget](https://cdn-images-1.medium.com/max/2000/1*CvK5Co3VGuf_X9nvoj5bBA.png)*Wine widget*

Again, I use the same method to sketch the view.

There are two sides, left side is an **Expanded** which contains a **Stack** with a background and image. The right side is another **Expanded** a **Column** with three **Text**. All are wrapped inside a **Card** widget to use elevation property and circular borders.

![Wine widget](https://cdn-images-1.medium.com/max/3940/1*_EQQBgY6MrHEutFdgG9ZQQ.png)*Wine widget*

Note **Expanded** widget has a **flex property** in 1 and 2 respectively. The flex property is the amount of space the children can occupy. So, the right side will be twice the size of than left side.

Now, like I said before background and image are contained in a **Stack** widget.

![Image and background](https://cdn-images-1.medium.com/max/2456/1*3B1F6A_rf8Sg6PrMTWmPzw.png)*Image and background*

Note I used a Container to build a background and I positioned the image where I wanted.

I think the most interesting part of this **image()** function is **Stack widget** has two important properties: **fit** and **clipBehavior**. I set the fit property on **StackFit.passthrough** whose constraints passed to the stack from its parent are passed unmodified to the non-positioned children. And I set **clipBehavior** on **Clip.none** which no clip at all.

The right side of the Wine widget contains just three **Text** inside a **Column**.

![Name, description and price Wine widget](https://cdn-images-1.medium.com/max/4096/1*-ya0obHL-YcUuzU8J4RfYg.png)*Name, description and price Wine widget*

On the right side of the page, the shopping cart will have a **ListView** of a similar widget that we saw before. You have homework! ;). *Hint: maybe you need another Expanded widget.*

Finally, you can run this project in your browser using:

<Code
    code="flutter run -d chrome"
    language="bash"
/>

If you need information or examples about **Stack** and **Positioned Widget** you can read the post [Stack and Positioned in Flutter](https://mtc-flutter.com/flutter-blog/stack-and-positioned-widget-flutter).

There are many ways to perform this design, try it out!

The full code is available on [GitHub](https://github.com/nanox77/flutter-examples/tree/master/shopping_wine).

If you want, you can read [the previous Flutter articles](https://www.mtc-flutter.com/flutter-blog).

That's all folks!

Enjoy!



Hi everybody!

In this post, we are going to build a beautiful and delicious UI using mainly **Stack** and **Positioned** widget.

![](https://cdn-images-1.medium.com/max/2484/1*-jQfMa5_uCMXjAUyNQxZlQ.png)

This design has a few components: **header/background**, **cupcake,** and **desserts**.

![Ok, I'm hungry.](https://cdn-images-1.medium.com/max/2000/0*YoNvPf4YY3xk5csG.jpg)*Ok, I'm hungry.*

The first step will be to build each **dessert** which contains an **image** and **section name** with an opacity background.

![dessert_view.dart](https://cdn-images-1.medium.com/max/2620/1*GVZ5kfvZoXyNzCviwxgKWw.png)*dessert_view.dart*

In order to overlay an **Image** and **Text** we are going to need a **Stack**. *According to official documentation: *This class is useful if you want to overlap several children in a simple way.*

![dessert_view.dart](https://cdn-images-1.medium.com/max/2960/1*6fQ0pqPm3SSabr9o6Zgwbg.png)*dessert_view.dart*

**Stack** widget *that positions its children relative to the edges of its box*. **Stack** supports two types of widgets: *positioned (wrapped in Positioned widget) or *non-positioned (simple widget like Image).*

In this case, I used a **Stack** with two non-positioned children because it was not necessary to use a Positioned child. If you want, you can use a **Positioned** to align text for example.

In addition, I used **ClipRRect** to make a circular border and **Material** for **elevation property**.

The second step will be to mix AppBar with a background:

![](https://cdn-images-1.medium.com/max/2788/1*dGea6GBK-dBqNZcR2f84jg.png)

**AppBar** has a property called **elevation** set on 0 to remove **AppBar** shadow and set backgroundColor to **Color.fromARGB(255, 254, 190, 120).**

![Scaffold and AppBar](https://cdn-images-1.medium.com/max/2000/1*b1sYi-cm8Iuf8Vri747Jgw.png)*Scaffold and AppBar*

The third step will be to build the body, I mean **cupcake** and **desserts**.

![](https://cdn-images-1.medium.com/max/2352/1*BIq_jBnihs8Qh7PhQ9z0bQ.png)

The body is a **Column** scrollable, so **SingleChildScrollView** and a **Column** as a child.

**Column** has two **Container** as children. First **Container** is an image as background. The second **Container** has a decoration that make a circular left and right top border.

This second **Container** has another **Column** as a child. This column will have beautiful **cupcake** and **desserts**.

The last step will be to build a **cupcake** **overlay** **between body and background**.

![build cupcake](https://cdn-images-1.medium.com/max/2220/1*cz9GxWl-9F0KJQmlVeL1aA.png)*build cupcake*

In order to overlay two components, we need to create a **Stack** with **Positioned** and move it **bottom: 10.0**. 

If you don't add an empty *Container* with some height will fail because *Positioned* widget needs some reference of size. And an important thing is to set the property *clipBehavior* on *Clip.none* then the image will be displayed completely. Otherwise, the image will display cropped.

There are many ways to perform this design, try it out!

The full code is available on [GitHub](https://github.com/nanox77/flutter-examples/tree/master/sweet_bake).

If you want, you can read my previous Flutter articles!.

That's all folks!

Enjoy!



Hi everybody!

In this post, we are going to clone feed Spotify UI.

![](https://miro.medium.com/max/960/1*sX1dJk0hBnko4RCD4f_WPg.jpeg)

This exercise includes many useful widgets like *SingleChildScrollView*, *BoxDecoration*, horizontal *ListView/Row* inside *Column* using *Expanded*, and more!.

Let's started!

The first step is to build our *last six albums listened to*:

![](https://miro.medium.com/max/1256/1*Gj8Rtv2B4dGVyfwPtSFf0g.png)

So, I built it using *one Row* and *two Column*. Why did I not use a GridView?. Because I wanted to show you *Expanded* widget. Of course, it's can be built using *GridView*.

![](https://miro.medium.com/max/1400/1*8GJIZK_umSUfum_RY7mjAA.png)

Using *Expanded* the *Column* will fill the available space along the *Row* in the main axis.

If I comment on one of two *Expanded* widget, the following will happen:

![](https://miro.medium.com/max/1252/1*Aot5WjjkdcZu87XaYSnHhQ.png) **Using one Expanded widget**

Because *Expanded* says _“I have all space for myself, yay!”_. But ... *Expanded* has to live with another *Expanded* widget, so ... each Expanded has 50% space.

----

The second step is to build *albums recently listened*:

![](https://miro.medium.com/max/1256/1*UhYCaK_fvpzl0qUwrL2W7g.png) **Albums recently listened**

I split it into two functions: *build album* and *build list of albums*. 

**Spoiler: podcast section uses build album function too.**

![](https://miro.medium.com/max/1400/1*MKASbkwds1xLtYfbyId8NA.png) **Horizontal ListView**

The trick here is in *buildRecentlyListened* function. When you use *ListView* inside *Column* (in this case) or any Flex widget *you must specify a height value. Otherwise, you will get an error like:*

<Code
    code="RenderBox was not laid out: RenderShrinkWrappingViewport#c6a5d relayoutBoundary=up18 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'"
    language="bash"
/>

----
The third step is to build *podcast section*. This part is the same of albums with *podcast collection* instead of *album collection*.

----
The fourth step is to build a widget one below another. To achieve we can use *Column* and set our children. By default, *Column* is not scrollable, we need to wrap it in *SingleChildScrollView* to make it scrollable.

![](https://miro.medium.com/max/1400/1*H6br2NRE3vnBCr4dhYL44Q.png) **Column scrollable.**

In the fifth step and last one, we need to build a *beautiful gradient* in the left corner of the screen.

![](https://miro.medium.com/max/1400/1*4a8QVEGibNwiQP3F4dzZWA.png) **Gradient**

We can use *decoration property* from *Container* to build a gradient. Our gradient will be a *RadialGradient* with *radius 1* and color from ARGB(255, 75, 80, 70) to Colors.black. And using an [official document of Alignment](https://api.flutter.dev/flutter/painting/Alignment-class.html) *Alignment(-1.0, -1.0)* represents the top left of the rectangle.

----
Finally, we have our *build* method with all components which we built.

![](https://miro.medium.com/max/1400/1*D2UndDscpM2dFkqgxH3Uag.png)

The full code is available on [GitHub](https://github.com/nanox77/flutter-examples/tree/master/spotify_clone).

If you want, you can read the previous Flutter articles!.

That's all folks!

Enjoy!



Hi everybody!

There are many ways to parse JSON from requests. In this post, we are going to code how to parse JSON using http package in Flutter and Dart.

At first, we need to add http dependency in pubspec.yaml

<Code
    code="http: ^0.12.2"
    language="yaml"
    withCopyButton="true"
/>

We are going to make a request, it's taking a long time. That's why we need to use **asynchronous programming**. Otherwise, the user interface will be frozen waiting for a response from the request. We don't want that!

Dart provides two different ways to asynchronous programming: **future** and the async and await keywords. We are going to use both of them to code this example.

***Note**: in future posts, we can talk about asynchronous programming. In this post, we are going to focus on parsing JSON.*

Let's code!

Imagine we need to get Flutter repositories from Github. So, we need to create a model which represents this repository.

![Repository model](https://cdn-images-1.medium.com/max/2556/1*TQQwqneKy4X38GZnb8pSNw.png)*Repository model*

We can code using async and await keywords and it looks like this:

![Parse response using async and await keyword](https://cdn-images-1.medium.com/max/3196/1*s9QzddzaRf6ekCz9Xup4lQ.png)*Parse response using async and await keyword*

Let's analyze point by point:

1- `get(url)` is a function from http the package which response a `Future<Response>` but we used await keywords it returns just `Response`.

2- Response contains body which is a string. JSON could be parsed json from Dart package. `import 'dart:convert';` to `List<dynamic>`.

3- We need to iterate each element from List and map to our `Repository`.

Use `await` keyword to get completed results of an asynchronous expression. 
Use `async` keyword before a function's body to mark it as asynchronous.

***Note**: await keyword only works within an async function.*

Another implementation is using `Future`. In this way, we don't use `await` and `async` *keywords*.

![Parse response using Future](https://cdn-images-1.medium.com/max/3364/1*AU4gyr8DtzdoGFsrpncSAA.png)*Parse response using Future*

`Future` represents the result of an asynchronous operation, and can have two states: **uncompleted or completed**.

This is same steps in previous implementation without `async` or `await` *keywords*.

The difference is only syntactic sugar. Don't worry but is not recommended to merge these ways.

**The important point is you should use asynchronous programming when a task takes a long time, i.e:**

* Fetching data over a network.

* Writing to a database.

* Reading data from a file.

The full code is available on [GitHub](https://gist.github.com/nanox77/8778b6dfa45df35b85ef632e83d619e9).

If you want, you can read my previous Flutter articles!.

That's all folks!

Enjoy!



Welcome, everybody!

This is the last post of the Twitter UI clone using the Flutter series. You can read [part 1](https://www.mtc-flutter.com/flutter-blog/twitter-ui-clone-using-flutter-part-1).

We have already created one tweet, in this post, we are going to create a list of tweets and add floating button action!.

At first, I refactored the code and renamed `MyApp` widget to `TwitterCloneApp` and I renamed `MyHomePage` file to `HomeScreen`.

Also, I created a new **Stateless Widget** called Tweet because main.dart had many responsibilities.

But, what is a **Stateless Widget**?. Well, almost everything is a Widget in Flutter.

Like its name say, a **Stateless Widget** is a widget that doesn't require a mutable state. This widget describes part of the user interface by building given others widgets. **Stateless Widgets** don't depend on anything other than some configuration to create them.

In this case, Tweet widget is perfect for this purpose. Tweet doesn't need external information or keeping mutate state.

For this, we are going to create it using `ListView.separated()`.

![](https://cdn-images-1.medium.com/max/2860/1*321xAyGiY4xwu0T1rUAFqQ.png)

Divider is a simple widget that shows a horizontal line.

We could copy the many times Tweet widget just for testing.

But Tweet widget is useless because is hardcoded, we could parameterise them.

So, Tweet constructor looks like:

![](https://cdn-images-1.medium.com/max/2000/1*DgctXPka9hP7GjO4I5hz4A.png)

required annotation indicates must include an argument specified.

> By convention, widget constructors only use named arguments. Named arguments can be marked as required using @required. Also by convention, the first argument is [key](https://api.flutter.dev/flutter/widgets/Widget/key.html), and the last argument is child, children, or the equivalent.

So, we have to create with specified arguments our Tweet widget.

![](https://cdn-images-1.medium.com/max/3940/1*aOp17nOwaGoi98nxq2kT_w.png)

To create a floating button, Scaffold widget has a property called floatingActionButton and we just could to create a FloatingActionButton widget.

![](https://cdn-images-1.medium.com/max/2184/1*wLLvoGWK6vSWrC7Eph43Lw.png)

This was the easy part, right?.

Finally, if you create many Tweet with different data, you are going to get something like that:

![](https://cdn-images-1.medium.com/max/2250/1*_v2Ebsf_vw4Pmo9Nwsr5cw.png)

The full code is available on [Github](https://github.com/nanox77/flutter-examples/tree/master/twitter_clone).

If you want, you can read my previous Flutter articles!.

That's all folks!

Enjoy!



Hi everybody,

This is a post continuation from the first part. You can read it [here](https://www.mtc-flutter.com/flutter-blog/twitter-ui-clone-using-flutter-part-1).

In this post, we are going to code a list of tweets. Let me introduce you to **Flutter Layouts**.

Layouts are **widgets** and they are used to build UI. You can compose simple layouts to build complex layouts.

There are two types of **Layouts:**

- [Single-child layout widgets](https://flutter.dev/docs/development/ui/widgets/layout#Single-child%20layout%20widgets)

- [Multi-child layout widgets](https://flutter.dev/docs/development/ui/widgets/layout#Multi-child%20layout%20widgets)

In my post, we are going to use both of them.

At first, we could diagram which layout we are going to use, for example:

![Layouts diagram](https://cdn-images-1.medium.com/max/2560/1*wVnLPqTejkK-9-PlqLNcmA.jpeg)*Layouts diagram*

It's could be the first approximation for our design. Note, some Container will have Row or Column as child.

Now, let's code!

Scaffold the widget has a property called body . This property allows us to build our list of tweets. We need to create a new function called listOfTweets .

![](https://cdn-images-1.medium.com/max/2052/1*aSH72kYfoNb5stS3CZ-RkQ.png)

listOfTweets is a Row and has only one child, for now ;).

![](https://cdn-images-1.medium.com/max/2252/1*JROqBtpaTZ_5K59vijLFHA.png)

Output UI is just CircleAvatar with margin set on10.0:

![](https://cdn-images-1.medium.com/max/2000/1*gE9ovfS3J5GJm8cvDUc2aw.png)

crossAxisAlignment will be directed in the secondary axis. In Row case, it will be a **vertical axis**. So, CrossAxisAlignment.start will be top and left alignment.

The next step will be to build the name, username, and duration time. For that, we are going to create a Column in order to align the widget below another.

I refactored the avatar in a function called tweetAvatar and I created a new function called tweetBody to set on a name, username, duration time, and options icon.

![](https://cdn-images-1.medium.com/max/2252/1*_Kg7lG3XMrxI6ALfi7nbKg.png)

tweetBody the function looks like that:

![](https://cdn-images-1.medium.com/max/2488/1*ZvNnVS9WvGvFvcdJZAZjlA.png)

Wait wait, let me explain to you!.

I'm going to explain from inside to outside. We have 4 widgets here:

Container which set the name.

Text which set a username.

Spacer which is used to fill empty spaces between Widgets.

IconButton which is an option button. I used icons from [FontAwesomeIcons](https://pub.dev/packages/font_awesome_flutter) package.

These 4 widgets are wrapped by Row because they have to be one **side-by-side** widget.

This Row is wrapped Column because is the first child of three. And this Column is wrapped by Expanded because we need to use a width-size screen. I mean, **children fill the available space** in the horizontal direction.

![](https://cdn-images-1.medium.com/max/2328/1*kO9HETq403-7_tJdFS9D6A.png)

I refactored tweetBody function to make easier visibility and maintenance.

![](https://cdn-images-1.medium.com/max/2320/1*XiWCb5TGTMoN7TPetatQQQ.png)

I added crossAxisAlignment.start to align text to left.

tweetText the function is a simple Text widget with overflow property set on clip . overflow the property indicates how the text will be shown. Clip the overflowing text to fix its container.

It looks like this:

![](https://cdn-images-1.medium.com/max/2000/1*jxxfU21BzeaREhySJKah6A.png)

We can set the color background to white in listOfTweets function.

![](https://cdn-images-1.medium.com/max/2320/1*N1rCfjM0Zk_Dr42a20IYRg.png)

Good, we are going to right way!

The last widgets are buttons for comments, retweet, like, and share.

We could build a widget to show an icon and a number.

![](https://cdn-images-1.medium.com/max/2000/1*Z4_qB8li9kMmY0fd0s_36Q.png)

And we can copy 4 times.

![](https://cdn-images-1.medium.com/max/2000/1*ipRjUsSZOGyCp22uDPgpYQ.jpeg)

We could use a Row because we need to one widget side by side. Its children could be an Icon and a Text . Something like this:

![](https://cdn-images-1.medium.com/max/2356/1*UwKnollkQScUyeR7dqBv7A.png)

We just need to use 4 times with correct params.

![](https://cdn-images-1.medium.com/max/2556/1*mIbH1aCB3g5u0gY3L_bHKg.png)

We need to use another Row because tweetIconButton have to be one widget side by side.

![](https://cdn-images-1.medium.com/max/2000/1*kNZyd_Os-zoysCGZbwsidw.png)

We used MainAxisAlignment.spaceBetween because we need to place the free space evenly between the children.

Until now, it looks like this:

![](https://cdn-images-1.medium.com/max/2000/1*I-zTpwk9A2sfCtvdL_K9BQ.png)

Well, in the next post we are going to add ListView to show list of tweets and add FloatingActionButton .

The full code is available on [GitHub](https://github.com/nanox77/flutter-examples/tree/master/twitter_clone).

If you want, you can read my previous Flutter articles!

That's all folks!

Enjoy!



# Twitter UI clone using Flutter — Part 1

Hi everybody,

In this post, we are going to clone Twitter feed UI. In order to practice widgets, we are not going to focus on business logic, it's just UI.

![](https://cdn-images-1.medium.com/max/1600/1*d7opUmFUV1uE6Kb5nkzVUg.png)

_This image is a Twitter official screenshot that was downloaded from Apple Store._

Before starting, we need an empty project and we need our main widget to execute the app:

![](https://cdn-images-1.medium.com/max/1600/1*SJ0-90WvSgZDK3tPISkNCg.png)

As I told you in [my previous posts](navigate-between-screens-flutter) [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html) is a very useful widget because it provides many properties out-of-box. One of these properties is `bottomNavigationBar` which we are going to use it.

We can use `BottomAppBar` and create an `Row` in order to build 4 icons horizontal.

![](https://cdn-images-1.medium.com/max/1600/1*kWQVvnNvCIeU6I0wPb2U6w.png)

Dddhhh! ... this code is very repetitive. In addition, to create UI code, we want to keep it maintainable.

So, we are going to create a `buildBottomIconButton` to remove repetitive code:

![](https://cdn-images-1.medium.com/max/1600/1*LTKR3YOWUmHh5C0PAQZCKA.png)

And we just use our new function and it looks like this:

![](https://cdn-images-1.medium.com/max/1600/1*muzOl2vJCjDJfn2ZGaLk9Q.png)

Good, almost we get it! We need to run and ...

![](https://cdn-images-1.medium.com/max/1600/1*fImt9OPysimyoBSlHFlT1A.png)

We forgot to tell the icons how they should be distributed!

Flutter's layout can be distributed in different ways. For example:

[Row](https://api.flutter.dev/flutter/widgets/Row-class.html) is a layout of a list of child widgets in the horizontal direction.
[Column](https://api.flutter.dev/flutter/widgets/Column-class.html) is a layout of a list of child widgets in the vertical direction.
[ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html) is a widget that arranges its children sequentially along a given axis, forcing them to the dimension of the parent on the other axis.

You can read how to use ListView in [my previous posts](mtc-flutter.com/flutter-blog/create-a-favorite-selection-on-listview-using-flutter).

`Row` has a property called `mainAxisAlignment` which indicates how to distribute widgets on the main axis. *Row main axis is in the horizontal direction. Column's main axis is in the vertical direction.*

We are going to set `mainAxisAlignment` on `MainAxisAlignment.spaceEvenly`. I mean, widgets will be distributed evenly.

![](https://cdn-images-1.medium.com/max/1600/1*MAgaJFoTYWbYubvEx9ys3g.png)

And it looks like:

![](https://cdn-images-1.medium.com/max/1600/1*cz2Z1eWnfAeurcurGWR9hw.png)

Great, the first part is done!

       --------

In order to build the top bar, we need to use another property from `Scaffold` widget called `appBar` (very intuitive!). `AppBar` is a material design app bar.

![](https://cdn-images-1.medium.com/max/1600/1*YwFje5QNgIp2cVhoAr72rA.png)

We set `backgroundColor` on white and set `title` property with a bold and black color style. Also, we set `elevation` property on 1 which controls the size of the shadow below the app bar.

![](https://cdn-images-1.medium.com/max/1600/1*75bHtYupLK7VvdWLK2We5w.png)

Good job, but the clock and signal battery and signal wifi disappear it!.

We have to set `primaryColorBrightness` on `Brightness.light` in our `ThemeData` in `MaterialApp` widget.

![](https://cdn-images-1.medium.com/max/1600/1*YFAwA2F-iBgFT7IfeExIDg.png)

The `Brightness` is `light` because it will require a dark text color to achieve readable contrast.

![](https://cdn-images-1.medium.com/max/1600/1*8UBM-SB5PScr8Qa9SePHZg.png)

We are going to add an avatar image from `assets` the folder. For that, we have to create a `assets` folder on root and add an image inside this folder.

![](https://cdn-images-1.medium.com/max/1600/1*YNZjAqArcIcvYZ7nkVlC2A.png)

And we have to declare in `pubspec.yaml` we want to use this image and where is it:

![](https://cdn-images-1.medium.com/max/1600/1*ha62XT9wPipN6ZUnNe5B1g.png)

Once declare assets, we need to stop and play the app again to Flutter incorporate the image on the build.

To show our avatar, we are going to set another property from [AppBar](https://api.flutter.dev/flutter/material/AppBar-class.html) widget called `leading` which is a widget to display before the title.

![](https://cdn-images-1.medium.com/max/1600/1*GpypMjp5UYqWc6L4KXN2OQ.png)

[CircleAvatar](https://api.flutter.dev/flutter/material/CircleAvatar-class.html) fits perfectly for this case. We wrapped with a [Container](https://api.flutter.dev/flutter/widgets/Container-class.html) to set margin and set all margins on `10.0`.

![](https://cdn-images-1.medium.com/max/1600/1*yim0RBCaD2o5kFIQIUQu0A.png)

Finally, our screen looks like this:

![](https://cdn-images-1.medium.com/max/1600/1*NiFJbyLKLdT8Lpnmnd8Bbg.png)

In the next post, we are going to continue with this clone and we are going to code screen content!

The full code is available on [GitHub](https://github.com/nanox77/flutter-examples/tree/master/twitter_clone).

If you want, you can read the previous [Flutter articles](https://www.mtc-flutter.com/flutter-blog)

That's all folks!

Enjoy!



This is the next post from my Flutter series posts. You can read them here: [part 1](https://www.mtc-flutter.com/flutter-blog/create-a-favorite-selection-on-listview-using-flutter) and [part 2](https://www.mtc-flutter.com/flutter-blog/navigate-between-screens-flutter).

This time, we are going to show how many words the user is selecting from a list. We can achieve this using a [Badge](https://pub.dev/packages/badges).

[Badge](https://pub.dev/packages/badges) is a package from https://pub.dev/ which is all packaged to Flutter and Dart. There are many useful packages there and this is a very interesting site, I recommend you take a look!

As with all Flutter and Dart packages, we need to add them in our `pubspec.yaml` file:

<Code
  code="dependencies:
  badges: ^1.1.1"
  language="yaml"
  withCopyButton="true"
/>

Once the dependency is downloaded, we are going to use the badge Widget!

We are going to wrap our `IconButton` with `Badge` Widget from

![](/posts/using-badges-flutter/code-1.png)

Then, it looks like this:

![](https://miro.medium.com/max/1400/1*nECS48mEeVAVe8ZX7FzVcw.png)

I built a new function called `pushToFavoriteWordsRoute` in order to simplify and get clean code.

![](https://miro.medium.com/max/4800/1*aezmw36nd8gkJtf40lAsuw.png)

In future posts, we are going to see what `Future` is and how it works.

Going back to this post, we wrapped `IconButton` with `Badge` widget but if you run this code exactly like before ... so what?!

Well, `Badge` has a property called `badgeContent` to set some text we want. In this case, we want to see the length of `savedWords`.

![](https://miro.medium.com/max/1400/1*ObAB1qENcJHztsubWeNOuA.png)

Note we can write this way `'${savedWords.length}'` . This way to write code is called [String Interpolation](https://dart.dev/guides/language/language-tour#strings) and Dart supports that.

Now, if you run and select some words ... its ... ok ... right?. Nop.

![](https://miro.medium.com/max/1400/1*bPEmagtSoYI_lYLxkzJ3eg.png)

`Badge` is out of the screen. To fix this `Badge` has a property called `position`. We can set it top and right.

![](/posts/using-badges-flutter/code-2.png)

![](https://miro.medium.com/max/1400/1*Ht8Zko1KrfPU6eqAyE0WWQ.png)

It's much better, right?

You can set many properties, for example, I disabled animations using:

![](/posts/using-badges-flutter/code-3.png)

![](https://miro.medium.com/max/1400/1*f3HFhyT7_QHUfEdx0URa1A.png)

Finally,

![](https://miro.medium.com/max/1000/1*Okm7t6lyDF-89xiqEECUlg.png)

You can discover many properties and play with them!

#####

![](https://miro.medium.com/max/500/0*R-MRc_-89oxb0-4u.jpeg)

Challenge time!

When there are no words selected, the badge shows zero, literally. For user experience, this could be not so good.

*The challenge*: when there are no words selected, simply don't show the badge (red circle and number).

Current:
![](https://miro.medium.com/max/300/1*ym0zAfbpJk_Xa1TZu0xYBw.png)


Challenge:
![](https://miro.medium.com/max/300/1*I3wImorsroh-pg5WrGmVXw.png)

Remind, there is no one solution.

Do you accept the challenge? Tell me in the comments and we can talk solutions!

Full code is available on [Github](https://github.com/nanox77/flutter-examples/tree/master/words).

If you want, you can read my previous Flutter articles!

That's all folks!

Enjoy!



Hi everybody,

In this post, we are going to show the favorite elements selected from a list. This is a continuation of [my previous post](https://www.mtc-flutter.com/flutter-blog/create-a-favorite-selection-on-listview-using-flutter).

We need to add a button somewhere which goes to a new screen with favorite words selected. In this case, I'm going to use an [IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html) for this design.

[AppBar](https://api.flutter.dev/flutter/material/AppBar-class.html) widget has a property called `actions` which is a `List<Widget>`, we just need to add one:

![](https://miro.medium.com/max/1400/1*xaUQpFqURIgVWFYC8voXAw.png)

![](https://miro.medium.com/max/1000/1*4dxsfflCKAuhgqUc4rq5pA.jpeg)

[IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html) represents an icon with a behavior, the `onPressed` function will be executed when the user press this button. So, we need to create a new screen called `FavoriteWordsRoute`.

>Terminology: In Flutter, screens and pages are called routes. The remainder of this recipe refers to routes.
>In Android, a route is equivalent to an Activity. In iOS, a route is equivalent to a ViewController. In Flutter, a route is just a widget.

![](https://miro.medium.com/max/1400/1*jHpsyK-G7ZFYj0K9Otc2zg.png)

In this case, our new route is [StatelessWidget](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html) which means this route is not a mutable state. I mean, *Stateless widget* are useful when the part of the user interface you are describing *does not depend* on anything other than the configuration information provided it.

On the other hand, we need to call [Navigator](https://api.flutter.dev/flutter/widgets/Navigator-class.html) this way in order to create our new route:

![](https://miro.medium.com/max/1400/1*JkGmwNtAP_IhJBEAxxLrPg.png)

[Navigator](https://api.flutter.dev/flutter/widgets/Navigator-class.html) is a widget that manages a set of child widgets with a stack discipline. Its means, that when we press the button to call a new screen, it will be put *above* the first screen.

We need to create a [MaterialPageRoute](https://api.flutter.dev/flutter/material/MaterialPageRoute-class.html) to replace the current screen with a new one. *This widget manages the screen with a platform-adaptive transition.*

Let's see `FavoriteWordsRoute` ... is empty, right?. Now, we are going to design it. We want a design that looks similar to the main list. But, we need to show the words selected.

For that, when we create `FavoriteWordsRoute` we need to pass selected items.

![](https://miro.medium.com/max/4800/1*5LQcCWUEtXEWKwS7l0el9g.png)

By convention, widget constructors only use named arguments, in this case, `favoriteItems` is a named argument. Named arguments can be marked as required using `@required`. Also by convention, the first argument is key, and the last argument is child, children, or the equivalent.

`FavoriteWordsRoute` looks like:

![](https://miro.medium.com/max/1400/1*INuvkvoc24JrSiH3-BcxNw.png)

So far, so good. But it still does nothing!

Before we create a new `ListView.separated()` main list, we need to add [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html) widget. This widget is really useful and important, it gives you many basic functionalities out of the box, like `AppBar` (with an icon which backs to the previous screen), `BottomNavigationBar`, `Drawer`, `FloatingActionButton`, etc.

So, we add `Scaffold` and `ListView.separated()` widgets to create our list of favorite words.

![](https://miro.medium.com/max/1400/1*TEPJtg4nkd6AkB_s8uRKNw.png)

In this case, we show only the title using `ListTile` widget.

Main screen:
![](https://miro.medium.com/max/1000/1*r-ZIbCeZnXlQ9at6NWU_3Q.png)

Favorite screen:
![](https://miro.medium.com/max/1000/1*AxGOm_EP06vE7NZ-XP29jw.png)

We can see that we have a new screen with the favorite words selected. We can go back to the main screen by pressing the back button.



![](https://miro.medium.com/max/500/1*AHJSwayESvBZKMBqIlsykQ.jpeg)

*CHALLENGE ALERT!*

When there are not selected some words and pressed the button, the next screen shows blank. This is not a good design for UI and for user experience.

Well, I have a challenge for you: you could show a message using a `Text` widget that has to show the following text 'No favorite words here!'.

*Remind, there is no one solution.*

Do you accept the challenge? Tell me in the comments and we can talk solutions!

In the future post, I'm going to code how to show the part number when users are selecting words over the button, like a [Badge](https://pub.dev/packages/badges).

The full code is available on [GitHub](https://github.com/nanox77/flutter-examples/tree/master/words).

If you want, you can read my previous Flutter articles!

That's all folks!

Enjoy!



Hi guys!

In this post, I'm going to show you how to create a favorite section. Something like this:

![](https://cdn-images-1.medium.com/max/1600/1*9UlnjZd-uK0k0hzJGdNjtg.jpeg)

We will need to add the next dependency in `pubspec.yaml`:

<Code
  code="english_words: ^3.1.5"
  language="yaml"
  withCopyButton="true"
/>

On this occasion, we are going to use `english_words` the package because is very useful for this example, but you can use this code in different ways.

*Let's code!*

At first, we are going to declare variables which will be nouns, and then we are going to take 40 elements.

![](/posts/create-a-favorite-selection-on-listview-using-flutter/code-1.png)

Wait ... `nouns.take(40)` returns a list ... why do I add `.toList()` ?.

Well ... Marge, I'm not gonna lie to you.

![](https://cdn-images-1.medium.com/max/1600/0*JXUvvXUIkNJ2NYkx.jpg)

I'm just kidding!

We need a `List<String> `type, but `nouns.take(40)` returns a `Iterable<String>` object type. So, we must convert `Iterable<String>` which is a lazy list to `List<String>` using `.toList()` function.

Now, we can use `ListView` widget in order to show nouns:

![](https://cdn-images-1.medium.com/max/1600/1*LJcbvHUIFcmy7RieJzmjjw.png)

But ... it doesn't look very good, right?

![](https://cdn-images-1.medium.com/max/1600/1*3JWYhAlpD2UwWUSiM2jRFQ.png)

Maybe, we can use `ListView.separated()` widget:

![](https://cdn-images-1.medium.com/max/1600/1*hycq_K2uXMgygFLfIdHaQQ.png)

And it looks like:

![](https://cdn-images-1.medium.com/max/1600/1*gsl-GNuMNx7jPA8pktQoOA.png)

Well ... is similar but it has a `Divider()`. We can make it pretty simply by wrapping `Text()` the widget with a `ListTile()` widget, like:

![](https://cdn-images-1.medium.com/max/1600/1*dvK48IULYtF9zw1sL3f7GQ.png)

And it looks like:

![](https://cdn-images-1.medium.com/max/1600/1*NGyVdYeFT7ncVChRzwyleA.jpeg)

Good, it's getting better!

`ListTile` widget is a perfect widget to show information on a list. `ListTile` has many properties to customize it, for example:

![](https://cdn-images-1.medium.com/max/1600/1*m2gJYz45qZZoQ8BIZMQFbg.jpeg)

`ListTile` has 3 important properties: `Leading`, `Title` and `Trailing`. An icon aligned to left, a text title, and another icon aligned to right. We are going to use `Title` and `Trailing` for our favorite section.

![](https://cdn-images-1.medium.com/max/1600/1*K1KW3yFoAqXtHFnH43vDVw.png)

And it looks like:

![](https://cdn-images-1.medium.com/max/1600/1*MvupvuLHp9MQfKmrKOm4Gw.png)

It's beautiful ... but it is not functional ... it's do nothing.

`ListView` has a property called `onTap()` which you can use to add functionality. We are going to paint the red favorite icon when `ListTile` is tapped. For that, we need to save which words are tapped.

So, we create a variable that will save words:

![](/posts/create-a-favorite-selection-on-listview-using-flutter/code-2.png)

And just before Flutter draws our `ListTile()`, we need to know if the word is contained on our `savedWords`. If it is contained we are going to set a specific Icon, if not we are going to set another specific Icon.

_*NOTE*: in order to follow good development practices, I recommended creating a function to build this functionality._

It looks like this:

![](https://cdn-images-1.medium.com/max/1600/1*UaZmZ_CloZIyVCk1fKdEuw.png)

Well ... if you execute this code ... will do nothing. Why?. When the user taps `ListTile()` then `onTap()` the function is executed. This function adds a word to `savedWords` the variable and then when Flutter rebuilds UI it should look like a favorite icon.

We forget *`setState()`* function. This function tells Flutter to rebuild widgets with the different states in compare to the previous state. If we add it, we can show our favorite words.

![](https://cdn-images-1.medium.com/max/1600/1*ZKB9BOsMgRIhB4mkqXjXJQ.png)

Great, we can check words but ... we can't uncheck words. So, we have to remove words if it's contained.

![](https://cdn-images-1.medium.com/max/1600/1*SkqZlJdhOL_zw2YZ-PVWUg.png)

And it looks like:

![](https://cdn-images-1.medium.com/max/1600/1*9UlnjZd-uK0k0hzJGdNjtg.jpeg)

In a future post, we are going to see how to show our favorite words on another screen.

The full code is available on [GitHub](https://github.com/nanox77/flutter-examples/tree/master/words).

If you want, you can read my previous Flutter articles!

That's all folks!

Enjoy!



Hi guys!

In this post, I'm going to show you how to copy the WhatsApp UI chat view on Android.

_NOTE: this post will be fully UI, we won't use any code for business classes._

In the end, we will see the following image:

![](https://miro.medium.com/max/4800/1*muP1TPd1u5NAWl_mSLMZ-w.png)

There are too many ways to create a UI like WhatsApp, I just picked one.

---

Well … once announced disclaimers .. let's rock code!

We are going to work with some Widgets we had worked on before like [FloatingActionButton](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html), [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html), [ListTile](https://api.flutter.dev/flutter/material/ListTile-class.html), [CircleAvatar](https://api.flutter.dev/flutter/material/CircleAvatar-class.html), [Column](https://api.flutter.dev/flutter/widgets/Column-class.html), [Text](https://api.flutter.dev/flutter/widgets/Text-class.html), etc.

At first, we are going to start with the following image:

![](https://miro.medium.com/max/4800/1*KGoUWko2diuZUOGRRlHVsA.png)

In order to think of our UI with a view model behind it to keep best practices, we can create a [Class](https://dart.dev/guides/language/language-tour#classes) called [ChatSummaryViewModel](https://github.com/nanox77/whatsapp_ui_flutter/blob/master/lib/chat_summary_view_model.dart) to model our [ListTile](https://api.flutter.dev/flutter/material/ListTile-class.html).

![](/posts/how-to-clone-whatsapp-ui-in-flutter/code-1.png)

If you use a bracket `{}` on constructor means parameters will be [named](https://dart.dev/guides/language/language-tour#named-parameters), so when you will create this class we have explicit parameters:

![](/posts/how-to-clone-whatsapp-ui-in-flutter/code-2.png)

Once the model is done we can make our view called [ChatSummaryView](https://github.com/nanox77/whatsapp_ui_flutter/blob/master/lib/chat_summary_view.dart) and will be a [Widget](https://api.flutter.dev/flutter/widgets/Widget-class.html) that represents the UI of our model. In [Flutter everything is a widget](https://flutter.dev/docs/resources/technical-overview#everythings-a-widget).

In this case, this widget doesn't have a state, so we can create a [WidgetStateless](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html) and it will show `ChatSummaryViewModel` on the screen.

![](/posts/how-to-clone-whatsapp-ui-in-flutter/code-3.png)

Well ... we have a model and a UI that knows how to draw it in order to show our model.

Now we need to create a [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html) to generate a list of [ChatSummaryView](https://github.com/nanox77/whatsapp_ui_flutter/blob/master/lib/chat_summary_view.dart) . So, we can use `ListView.separated` to create them.

![](/posts/how-to-clone-whatsapp-ui-in-flutter/code-4.png)

`itemBuilder` will build our list of `ChatSummaryView` and it looks like this:

![](https://miro.medium.com/max/4800/1*vKhQhncdQtREAt8HpmxuZw.png)

`separatorBuilder` is a simple widget [Divider](https://api.flutter.dev/flutter/material/Divider-class.html) widget:

![](/posts/how-to-clone-whatsapp-ui-in-flutter/code-5.png)

The other UI elements like [FloatingActionButton](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html), [TabBar](https://flutter.dev/docs/cookbook/design/tabs) and [DefaultTabController](https://api.flutter.dev/flutter/material/DefaultTabController-class.html) will see in another post because in this case they aren't functioning.

Full code is available on [Github](https://github.com/nanox77/whatsapp_ui_flutter).

If you want, you can read my previous Flutter articles!.

That's all folks!

Enjoy!



Hello everyone!

In this post I'm going to show you how to make a business card.

This exercise is very useful for practice basic [Widgets](https://flutter.dev/docs/development/ui/widgets) for example: [Column](https://api.flutter.dev/flutter/widgets/Column-class.html), [Icon](https://api.flutter.dev/flutter/widgets/Icon-class.html), [Text](https://api.flutter.dev/flutter/widgets/Text-class.html), [Images](https://api.flutter.dev/flutter/widgets/Image-class.html), [Divider](https://api.flutter.dev/flutter/material/Divider-class.html) and other more complex like [CircleAvatar](https://api.flutter.dev/flutter/material/CircleAvatar-class.html), [SizedBox](https://api.flutter.dev/flutter/widgets/SizedBox-class.html), [ListTile](https://api.flutter.dev/flutter/material/ListTile-class.html) and [Card](https://api.flutter.dev/flutter/material/Card-class.html).

At the end, we will see a business card like the following image:

![](https://cdn-images-1.medium.com/max/2484/1*5D7_afLGOazpu_2k9ebuXQ.png)

Well ... let's work!

We must to prepare some resources:

We need create an images folder where we will put our image for our business card. Also we need to add image to assets in pubspec.yaml:

![](/posts/business-card-flutter/code-7.png)

We need create a fonts folder where we will put ours fonts for our business card. Don't forget, we also need to add two fonts to assets in pubspec.yaml. We will download fonts from Google Fonts:

* [Pacifico-Regular.ttf](https://fonts.google.com/specimen/Pacifico)

* [SourceSansPro-Regular.ttf](https://fonts.google.com/specimen/Source+Sans+Pro)

![](/posts/business-card-flutter/code-8.png)

pubspec.yaml file must be looks like:

![](/posts/business-card-flutter/code-9.png)

Once resources prepared, let's rock coding!

In our [StatelessWidget](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html) we are going to put a [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html) and [Column](https://api.flutter.dev/flutter/widgets/Column-class.html) as child. If you are developing on iPhone, you should wrap [Column](http://Column) in [SafeArea](https://api.flutter.dev/flutter/widgets/SafeArea-class.html) widget to fit elements on iPhone screen.

![Flutter business card](/posts/business-card-flutter/code-1.png)

For our circle image we are going to use [CircleAvatar](https://api.flutter.dev/flutter/material/CircleAvatar-class.html) widget:

![Flutter business card](/posts/business-card-flutter/code-2.png)

In this case, I'm using [AssetImage](https://api.flutter.dev/flutter/painting/AssetImage/AssetImage.html) provider for show image from images folder which we declared at the beginning.
For example, you can use [NetworkImage](https://api.flutter.dev/flutter/painting/NetworkImage/NetworkImage.html) provider to fetch image from internet.

The next widget is a simple Text:

![Flutter business card](/posts/business-card-flutter/code-3.png)

The fontFamily property have to match with font named on pubspec.yaml.

In the same way, we are going to add another Text for our role:

![Flutter business card](/posts/business-card-flutter/code-4.png)

NOTE: fontFamily property have to match with font named on pubspec.yaml.

[Card](https://api.flutter.dev/flutter/material/Card-class.html) is next widget which has a [ListTile](https://api.flutter.dev/flutter/material/ListTile-class.html) as child. This child is very useful when you need create rows in a [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html), for example.
This [ListTile](https://api.flutter.dev/flutter/material/ListTile-class.html) is going to have an [Icon](https://api.flutter.dev/flutter/widgets/Icon-class.html) on leading property and [Text](https://api.flutter.dev/flutter/widgets/Text-class.html) on title property.

![Flutter business card](/posts/business-card-flutter/code-5.png)

NOTE: The fontFamily property have to match with font named on pubspec.yaml. Don't forget this note =).

On the same hand, we are going to create another [Card](https://api.flutter.dev/flutter/material/Card-class.html) for e-mail contact information.

![Flutter business card](/posts/business-card-flutter/code-6.png)

Of course you can refactor this code and extract [Card](https://api.flutter.dev/flutter/material/Card-class.html) widget in a method in order to reuse widget, it's a good practice!.

Full gist is available on [Github](https://gist.github.com/nanox77/c02bf24e19edc8ed99ee3eb8eeb51233).

All credits is for **Angela Yu** which her [course](https://www.udemy.com/course/flutter-bootcamp-with-dart/) on Udemy is incredible useful!

If you want, you can read my previous Flutter articles!.

That's all folks!

Enjoy!



Hi everybody!

In this post we are going to see how test our widgets.

We suppose we have a **User** with images and we need show them in a collection. 
In this case, we have a **GridView** with **Images** like children. Something like this:

![](/posts/test-widget-in-flutter/code-1.png)

***NOTE***: userImages is a simple collection of URLs for simplify example.

As a good practice is very important test our code in whatever layer. So, we need add flutter test dependency if not present in **pubspec.yaml** file:

<Code
  code="dev_dependencies:
  flutter_test:
    sdk: flutter"
  language="yaml"
  withCopyButton="true"
  withLineNumbers="false"
/>

Our first use case will be if ***“there is no images then show empty container”***, then we need create a test like the following code:

![](/posts/test-widget-in-flutter/code-2.png)

Run code and green, good for us!. We have test in our code and if we make some change in view, the test will tell me if something went wrong.

In that first test, we test only return **Container();**. Now, we are going to test the following piece of code:

![](/posts/test-widget-in-flutter/code-7.png)

For that, we can write a new test:

![](/posts/test-widget-in-flutter/code-3.png)

Run test and ….. red!. Something went wrong!. But what could be wrong? … **Error message was: `package:flutter/src/painting/basic_types.dart`: Failed assertion: line 222 pos 10: `textDirection != null`: is not true.**

We didn't some text or something like that. What is happen here?

After some attempts and few hours, I find the solution. Flutter has a widget called **MaterialApp** which initialize some widget for you, so we need wrap our **UserImagesView** in a **MaterialApp** only for test.

![](/posts/test-widget-in-flutter/code-4.png)

Then, we test looks like:

![](/posts/test-widget-in-flutter/code-5.png)

Run test and ….. red again!. Oh god! What is happen here!? Why do you hate my test!?. Don't worry, in this time the error message is very clear: **Exception: HTTP request failed, statusCode: 400.**

We are using **Image.network** and in fact, we are wrong in this case. We **must not** depend on external services in our test, this is a **bad practice**.

In order to make green our test, we need mock all call to internet. For that, add the following dependency:

<Code
  code="image_test_utils: ^1.0.0"
  language="yaml"
  withCopyButton="true"
  withLineNumbers="false"
/>

Now, we can use **provideMockedNetworkImages** method which mock HttpClient for us and the code will be:

![](/posts/test-widget-in-flutter/code-6.png)

Finally, all green and our widget are tested!.

That's all folks!

Enjoy!





Hi everybody!

In this post, we'll see how to get user location in Flutter.

In **pubspec.yaml** file adds the following dependency:

<Code
  code="dependencies:
  geolocator: '^5.1.4'
  #https://pub.dartlang.org/packages/geolocator#-readme-tab-"
  language="yaml"
  withCopyButton="true"
  withLineNumbers="false"
/>

The main class is **Geolocator**, so we have to talk with that class.

We suppose we need to get the current user location. Well, we need to call ***getCurrentPosition*** method from **Geolocator** class.

![Flutter get user location](/posts/how-to-get-user-location-in-flutter/code-1.png)

By default, the **desiredAccuracy** param is **LocationAccuracy.best**, which is also fine. **getCurrentPosition** method returns a **Future** which is very important otherwise it freezes UI in Flutter. This is an excellent practice to keep a fluent flow.

In order to make an operation over the result, we can add **.then()** method from **Future** class and we can make whatever function. e.g. we can print and store location in a **LocationRepository** which is just a reference in memory.

Finally, we have the following code:

![Flutter get user location](/posts/how-to-get-user-location-in-flutter/code-2.png)

Having this method, we can make whatever we want. e.g:

- We can call it, add another **.then()** in View layer and call **setState()** to change a field.
- If we have a **FutureBuilder** we can use **locateUser()** in future property.
- We can call it and make a query in a database.

Etc, etc.

That's all folks!

Enjoy!



Hello everybody, in this post, we'll see what ***typedef*** is and how use it in ***Dart***.

We suppose we need to concat two string with a special characters. Notice the problem is very simple in order to explain what ***typedef*** is.

So, this is a typedef:

![](/posts/typedef-in-dart/code-1.png)

***Typedefs*** are alias for functions which are object. So, ***Typedefs*** are object with an ***alias*** =).

So far, so good. Now, we need to implement a function which has same signature, i mean: **(String, String) => (String)** in our case. I mean given two params **String** then output will be another **String** . i.e:

![](/posts/typedef-in-dart/code-2.png)

We need to use our ***typedef*** **Join** and ours functions in a **joinWith** new function:

![](/posts/typedef-in-dart/code-3.png)

Finally, we use our **typedef**:

![](/posts/typedef-in-dart/code-4.png)

You can test this code running on console:

<Code
  code="dart main.dart"
  language="bash"
  withCopyButton="true"
/>

Enjoy!


make ideas into reality.

Flutter for any device.

Be productive.

Hitch: meet people playing

Datazo: good contacts are shared

WikiTrivia: knowledge is power