Sign in

Aseem Wangoo

Article here : https://flatteredwithflutter.com/testing-in-compose/

Testing in Compose

We will cover briefly:

  1. Testing in Jetpack Compose
  2. (Optional) Screenshot testing in Compose

Note: This article assumes the reader knows about Jetpack Compose

Testing in Compose

Testing in Jetpack Compose

Compose provides a set of testing APIs to find elements, verify their attributes and perform user actions.

In our previous articles, we managed to create our TodoApp. Now, let's write some tests.

Setup

  • Install the dependencies inside build.gradle of your app
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$version"

debugImplementation "androidx.compose.ui:ui-test-manifest:$rootProject.composeVersion"
@get:Rule
val composeTestRule = createComposeRule()

Compose comes with a ComposeTestRule which can be obtained by calling…


And yes you did too!

Photo by Edward Howell on Unsplash

Here I am, writing this piece with the right state of mind which I would not be able to accomplish if I didn’t die in the Year 2020.

The Year 2020 was the time for reflection, a breath of fresh air, and a long seeking solitude for me. It forced me to slow down in ways I hadn’t done since I was a kid. It seemed like I was riding a train, after a while, the engine came to a halt. I have left no choice, but to come out. …


Using WorkManager in Android

Article here: https://flatteredwithflutter.com/using-workmanager-in-android/

Using WorkManager in Android

We will cover briefly:

  1. Create Custom WorkManager
  2. Create OneTimeWorkRequest
  3. Create PeriodicWorkRequest
  4. Write Tests for Workers (step2 and step3)

Note: This article does not explain the working of WorkManager, but focuses on its use.

Using WorkManager in Android

Create Custom WorkManager

In case you are new to WorkManager, there is a detailed description here

As per the docs

By default, WorkManager configures itself automatically when your app starts. If you require more control of how WorkManager manages and schedules work, you can customise the WorkManager configuration.

  • Install the dependencies inside build.gradle of your app
def work_version =…


Show push notifications in React

Article here: https://flatteredwithflutter.com/show-push-notifications-in-react/

Pre-requisite: This post assumes the reader knows about Firebase

Show push notifications in React

We will go through the following steps

  1. Register the web app in Firebase
  2. Setup Firebase Configurations in React
  3. Integrate in UI
  4. Test the Notification
  5. (Optional) If notifications not appearing
Show push notifications in React

Register the web app in Firebase

Login into the Firebase console and click on Add project. Follow the steps to add the project.


Call C library from Flutter on Linux

Begin…

Level: Intermediate

Article here: https://flatteredwithflutter.com/dart-ffi-and-linux/

Pre-Requisite: Install package FFI

This article assumes that the reader has knowledge about FFI and has already installed Flutter on Linux. In case not, check this.

Dart FFI and Linux

We will cover briefly about

  1. Creating C Library
  2. Call from Flutter on Linux
  3. Passing parameter from Dart to C
  4. Passing structs from Dart to C

Note: We won’t be explaining in-depth about Dart FFI as there are good articles dedicated to it.

Dart FFI and Linux

Creating C Library on Linux

We are going to create the following use cases

  1. Generate a random number from C

Let’s…


Dart and Cloud Run

Article here: https://flatteredwithflutter.com/dart-and-cloud-run/

Dart and Cloud Run

Introduction

Level: Beginner

We will cover briefly:

  1. Writing dart server API
  2. Deploying on Cloud Run

Note: This article assumes the reader knows about Cloud Run, and GCP.

Dart and Cloud Run

Writing dart server API

Upgrade to the latest version of Dart 2.13


Using Room in Jetpack Compose

Article here: https://flatteredwithflutter.com/using-room-in-jetpack-compose/

Using Room in Jetpack Compose

Introduction

Level: Beginner

We will cover briefly:

  1. Using Room in Jetpack Compose
  2. Writing CRUD operations
  3. Write Test for Database

Note: This article assumes the reader knows about Jetpack Compose

Using Room in Jetpack Compose

Using Room in Jetpack Compose

What is Room?

As per the documentation,

The Room persistence library provides an abstraction layer over SQLite to allow for more robust database access while harnessing the full power of SQLite.


Intro to Jetpack Compose and using state in it

Article here: https://flatteredwithflutter.com/using-state-in-jetpack-compose/

Using State in Jetpack Compose

Introduction

Level: Beginner

We will cover briefly about

  1. Jetpack Compose
  2. Create a Custom Card field
  3. Using state in the custom card

Note: Jetpack Compose or Compose are the same.

Using State in Jetpack Compose

Jetpack Compose

What is Jetpack Compose?

As per the documentation,

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android.


Article here: https://flatteredwithflutter.com/fade-in-out-text-in-react/

Fade in-out text in react

View the demo here

Website: https://funwithreact.web.app/

We will go through the following steps

  1. Add CSS
  2. Create Fader Component
  3. Fade in-out logic
  4. Cleanup side effect
Fade in-out text in react

Add CSS

Let’s start by adding CSS which will help us in achieving the fade-in-out effect.

.fade-in {
transition: opacity 1s ease;
}
.fade-out {
opacity: 0;
transition: opacity 1s ease;
}

The class names are self-explanatory!

Create Fader Component

We create a reusable component and name it Fader. This component will include the UI + business logic to achieve the fade-in-out.

Define props

  • This component will take in a text prop, which…


Here are my 5 main takeaways from React.

Article here: https://flatteredwithflutter.com/i-tried-react-in-2021-here-are-my-thoughts/

YouTube Channel: https://youtube.com/aseemwangoo

Tried React in 2021

Disclaimer:

  1. This article is based on my experience with React, and I don’t aim to hurt anyone’s intentions.
  2. I tried React for 2 days, hence I’m no expert and don’t wish to mislead the readers.

Relax and Enjoy….:)

Here are 5 things that are worth sharing.

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store