DEV Community: Alex Melnyk

Flutter: Interactive User Guidance or how to make a hole in the layout

Alex Melnyk — Mon, 03 May 2021 21:15:19 +0000

Hi folks! I wanna show you an interesting Flutter feature. We can build interactive user guidance using blending colors in Flutter.

This simple trick allows you to build interesting user guidance in the app more than just a picture. It could be really interactive with animation etc.

Layout

First of all, to build the overlay, you need to wrap the Scaffold widget of the target page in a Stack widget and left the Scaffold widget as a first item.

For the second place, create an overlay that covers the whole Scaffold with a bit transparent dark/light background. The root ColorFiltered has blend mode “source out” and the inner Container has “destination out” in the background, which allows us to clip widgets to clip them in the root ColorFiltered widget.

For example, in this case, we have a Container with size 150x150 and the color white, the color needed for blending and should not be transparent fully otherwise, you will not see it. So color is needed for blending to understand what area to clip out.

Keep in mind that the Stack widget out of Scaffold and doesn’t have any Material support, so wrap it with a Material widget that will be enough.

Animation & Steps

I’ve prepared a simple example of switching guidance from one to another with animating clip area from the rectangle to a circle and moving. Just check my repository and get this experience.
The full project source code available on GitHub.

Demo

There is a light demo that I’ve recorded on the Android Emulator to show you how it works.

YouTube:

Code Samples

See the original article with code samples by the canonical link.

Brand New Publication

Alex Melnyk — Wed, 21 Apr 2021 18:46:51 +0000

Not so far ago we have started a Brand New publication called LITSLINK.

There a lot of accomplishing work we did and a lot of interesting articles that we wrote to share information with you.

This time publication has articles and stories related to mobile, front-end, back-end, and general programming as well.

Also, it contains stories about Artificial Intelligence, Machine Learning, and Data Science.

Welcome to our storybook!

https://medium.com/litslink

Why should you try Expo

Alex Melnyk — Sat, 17 Apr 2021 20:56:00 +0000

I remember Expo when it was far from ideal, not so many features were implemented and some of them were not properly working, but…

A few months ago I’ve started a new project from scratch using the Expo.io platform, it was the decision of my client.

He said, “We can’t spend time to build ReactNative anymore, we need a power burst!”. Of course, he was ready to cut some functional which will require native dependency.

The Expo is a great platform and if you have never tried or you have experience with old versions you probably should try it.

Development process

Each time when you need to run the application on a real device you just need to scan QR-Code from the terminal or if you would like to run on iOS Simulator/Android Emulator just use hotkeys, this feature extremely speed up your development.

Built-in Expo Developer Tools which you can easily invoke by pressing the “D” key in the terminal window.

Also, you have other shortcuts like:

“I” — Runs the application on iOS Simulator.
“A” — Runs the application on the Android Device/Emulator.
“C” — Shows QR-Code to scan from real-device.
“P” — Switches to production mode.
“R” — When you need to restart bundler.

Of course, the same actions you can do in the Expo Developer Tools window.

How to init project?

First of all, forget about native development at all!
Then you will need to initialize the project, there are few options:

You can use a specific template: “blank”, “tabs”, “bare-minimum”, set package manager “yarn” or “npm”, also you can set up package name and bundle identifier.

But the cherry on the pie: initialize a project with TypeScript support.

Once you complete the initialization wizard, you can start development or run the application with the command yarn start it will start bundler and Expo server also you will see the Expo Developer Tools window.

Here we go! Just press “I” to run the application on iOS Simulator.

Now you see that starting project is pretty simple!

Expo SDK

Of course, if want to use an exotic library in the Expo project you be faced with a support problem, but I’m sure that Expo SDK cools down your desire to write on ReactNative.

Let’s start with simple then come to hard

Expo has a lot of already integrated libraries which is ordinarily used in most applications, just look into Expo API Documentation.

In common cases, you will need:
SplashScreen — to make a splash screen to indicate application launching
AppLoading — to load assets/fonts/etc.
Localization — to manage l10n/i18n of your application
ImagePicker/ImageManipulator — Open/edit images or videos from the device
MapView — to use maps in the app
Sharing — to share data between applications in the device
SecureStore — to persist data to the storage on the device

You would like to use, also:
AppAuth, AuthSession — to authenticate a user via OAuth
BlurView — to make a blur effect on the views
Camera — to capture a photo or video
Haptics — which provides vibration on Android and use Haptic Engine on the iOS Devices
KeepAwake — to keep the screen on while the user working with a part of the app
ScreenOrientation — to detect and handle changing the orientation of the screen

Expo supports extra features like:
Notifications — Push Notifications (works through the Expo Push service)
Branch — integration with branch.io
Admob — Google AdMob SDK
FacebookAds — Facebook Audience SDK
Amplitude — Amplitude mobile analytics

Also, you will have access to exotic:
ART — draw using SVG
Audio — Play/record sounds
AV — Play audio/video content
BackgroundFetch — Run background tasks
Brightness — Manage brightness
Payments — Payments through the Stripe with (ApplePay, AndroidPay)

In general, there are about 80 API which you can use once you installed it using the yarn/npm/expo without closing bundler, it’s one more thing to speed up your development.

Android X64

Developers who are faced with upgrading ReactNative knows that is a painful operation and you will haven’t guarantee that all modules will work correctly and your native project will build properly in favor of this Expo SDK supports Android X64 out of the box and upgrade scenario includes only updates a few JS libraries, this will simplify upgrade process to a minimum level of stress.

Just upgrade versions of your libraries in the package.json file and continue fantastic development and make this world better.

Publishing

When the time is coming to release the application, you will have a new experience in publishing the application to stores, coz you will have a few options.

Build

expo build:[ios|android]

This command will run building a bundle but not locally it will starts on the server that’s why no needs to have a high-performance Laptop/PC also it’s ok if you are a Windows user coz Xcode you will never need it. So you just make a cup of coffee, relax and wait until the build ends.

As you can see in the screenshot, the build is queued and you can close the terminal without hesitations. Visit the URL below the text “You can monitor the build at” if you need to check the status of the build. On URL you will find a download button that will be active after build success, you also can wait in the terminal and receive a direct link to download the bundle.

OTA

You don’t need to use frameworks like CodePush to implement update Over-The-Air, the Expo supports OTA out of the box. By default, it works automatically when you publish JS bundle via expo publish to Expo in a specific release channel, also you can configure it in the app.json. In case you want to manage the updating process, you will probably need to use Updates API.

Upload to Stores

Yeah, that is a good question, coz you will need to upload your product to the store, but do not hurry do it yourself! The best solution to configure expo to do that with the command:

expo upload:[ios|android]

Conclusion

Nowadays Expo grows up very fast, every month I see new major versions with bug fixing and new features. The development has become easiest and faster than it’s possible on flat ReactNative this fact helps you to be more productive and interested in the development of cross-platform applications.

Flutter: Build Circular Progress with CustomPaint and Animation

Alex Melnyk — Thu, 15 Apr 2021 11:41:31 +0000

Hey, you are on the right way if you come with a question about how to draw something in Flutter. For example when you need to draw something like a Progress indicator in a circle shape.

I’ll show you how to do that for the next platforms on the Flutter:

Android, iOS, Web, macOS

Flutter: Build your own Switch

Alex Melnyk — Wed, 14 Apr 2021 19:44:42 +0000

I investigated switch widgets published to “pub.dev” most of them just show thumb with a text like “on/off” but I wanted to change not only text but background color, size, background image, corner sharpness, add state icon, etc. That is my point to start.

Flutter: Glass Modal Bottom Sheet

Alex Melnyk — Wed, 14 Apr 2021 10:59:31 +0000

Sometimes I am looking for interesting design solutions on different internet resources to practice them on my current tech stack.

I’ve noticed that designers make more and more designs with elements that look like frosted glass. It is a trend in the design called “Glassmorphism.”

I hope glassmorphism becomes the standard coz nowadays, devices are powerful and can easily render such effects.

Flutter: How to create Desktop Application

Alex Melnyk — Wed, 14 Apr 2021 10:52:13 +0000

I’m very happy that Flutter coming to Desktop Application Development, of course, it is the very beginning, but you can try it already today.

I wanna introduce you to how to write your very first desktop application using the Flutter, tutorial based on the macOS.

Flutter: Custom Drawer Navigation Tutorial

Alex Melnyk — Wed, 14 Apr 2021 10:46:37 +0000

Hi folks! My project required a drawer with a custom animation. I’ve decided to develop my own solution to do this task. In this shorticle, I’ll show you how to do that in a quick way.

Flutter: Custom Bottom Sheet Modal

Alex Melnyk — Wed, 14 Apr 2021 10:05:48 +0000

Hi guys! Today I tell you how to build Modal Bottom Sheet (MBS) quickly; it’s a regular component usually used in applications.