Sign in

Aseem Wangoo

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

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!

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/

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.

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”.


Link | RawAutoComplete | CupertinoFormSection, and others

What were the new widgets in Flutter2?

Article here: https://flatteredwithflutter.com/widgets-in-flutter2/

Flutter2 Widgets — Link | RawAutoComplete | CupertinoFormSection

Introduction

Level: Beginner

Website: https://web.flatteredwithflutter.com/#/

We will cover briefly about

  1. Link
  2. CupertinoSearchTextField
  3. CupertinoFormSection
  4. CupertinoFormRow
  5. CupertinoTextFormFieldRow
  6. ScaffoldMessenger
  7. RawAutoComplete
Flutter2 Widgets — Link | RawAutoComplete | CupertinoFormSection

As quoted by Flutter’s Product Manager Chris Sells

Flutter has built a foundation for building richly interactive web applications. We primarily focused on performance and improvements to our rendering fidelity.

One of such web-specific features is the Link widget

Link(
uri: Uri.parse('https://flatteredwithflutter.com'),
builder: (_, followLink) {
return ElevatedButton(
onPressed: followLink,
child: Text('Click me!!'),
);
},
);

Note: This widget…


All in one Flutter resource: https://flatteredwithflutter.com/testing-bloc-in-flutte/

Testing BLoC in Flutter

Intro

Level: Intermediate

This article assumes that the reader has knowledge about the BLoC pattern.

Testing BLoC in Flutter

View the demo here

Website: https://web.flatteredwithflutter.com/#/

We will cover briefly about

  1. Convention for Tests
  2. Mocking Github API
  3. Writing tests for BLoC

1. Convention for Tests

In general,

  • test files should reside inside a test folder located at the root of your Flutter application or package.


Flutter Engage — Flutter 2

All in one Flutter resource: https://flatteredwithflutter.com/flutter-2/

See New Widgets from Flutter2

Flutter2 Widgets

Begin

This event happened on 3rd March 2021. This article is divided into

  1. Keynote
  2. AskFlutter Leadership Roundtable
Flutter Engage — Flutter 2

Keynote

We’ve broadened Flutter from a mobile framework to a portable framework, unleashing your apps to run on a wide variety of different platforms with little or no change.

Every app gets a free upgrade with Flutter 2 and they can now grow to target desktop and web.


Implement Github search using the BLoC pattern

Github Search and BLoC

Introduction

Level: Intermediate

This article assumes that the reader has knowledge of the BLoC pattern.

We will cover:

  1. Integrate Github API
  2. Define UI states
  3. Create Search BLoC
  4. Update UI as per states

View the demo here

Website: https://web.flatteredwithflutter.com/#/

Integrate Github API

We define an abstract class (aka contract), which includes one method.


Overview of Kubernetes Components

What is Kubernetes and what are its components? Hmm…

This article will give a brief overview of Kubernetes and its different components.

Note: Main focus of this article would be the components of Kubernetes.

Overview of Kubernetes Components

As per the official website

Aseem Wangoo

Founder of Flatteredwithflutter.com | YouTuber | Writer | FlutterWeb: web.flatteredwithflutter.com | Flutter Desktop

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