FlutterVN weekly newsletter by FlutterVN — Flutter Vietnam developer — http://fluttervn.com/ — #FlutterVnNewsletter #Flutter

All news from Flutter Interactive event: Dart 2.7; Flutter 1.12; Flutter for web goes beta; support for MacOS; XD to Flutter plugin for designer; Supernova. And more…

Articles


FlutterVN weekly newsletter by FlutterVN — Flutter Vietnam developer — http://fluttervn.com/ — #FlutterVnNewsletter #Flutter

Flutter Interact event next week; automate CI/CD in Github, Gitlab, CodeMagic; 10 helpful tools for Flutter; and more…

Articles


FlutterVN weekly newsletter by FlutterVN — Flutter Vietnam developer — http://fluttervn.com/ — #FlutterVnNewsletter #Flutter

FlutterVN newsletter is a series to show you new information in Flutter development world. It is aggregated by FlutterVN — Flutter Vietnam Development team and released every Wednesday.

In addition to Medium, we also share these newsletters on Facebook, Twitter, Reddit, Youtube, Github and Dev.to. Let’s follow our social pages to have the latest news. Or you can contact us directly via fluttervndev@gmail.com.

Here is list of the FlutterVN newsletters so far:

  • FlutterVN newsletter #7 (Dec 12, 2019): All news from Flutter Interactive event: Dart 2.7; Flutter 1.12; Flutter for web goes beta; support for MacOS; XD to Flutter plugin…


FlutterVN weekly newsletter by FlutterVN — Flutter Vietnam developer — http://fluttervn.com/ — #FlutterVnNewsletter #Flutter

Flutter Q4 survey, Flutter vs. React Native comparison, Google Maps, Firebase Firestore and Storage, build app using Fastlane. And more…

Articles

  • After having Q3 survey result, now it’s time for Flutter Q4 survey. Let Flutter team know how do you think about their product.

Recap: Google’s BIG challenge, Make your Flutter app look gooooood 😍

Hey, everyone! Here’s a recap of what’s been happening over the past couple of weeks in the…


FlutterVN weekly newsletter by FlutterVN — Flutter Vietnam developer — http://fluttervn.com/ — #FlutterVnNewsletter #Flutter

Note: for non-paywall link of this article, let use: https://medium.com/fluttervn/fluttervn-newsletter-1-440a5337f391?source=friends_link&sk=19aed229c3e232dea35f73d12feee68d

Articles

  • Finally Bloc lib v1.0.0 is released. Thanks Felix Angelov and his team for the hard work.
  • It’s a good news to know JSON schema for pubspec.yaml is available. Just choose Invalidate Caches / Restart menu in your Android Studio to make it takes effect.
  • An Lam shares with experience to implement Platform Channel when write the md5_plugin.
  • Darshan Kawar has a great post about useful methods of List such as sublist, reversed, asMap, fold, reduce, take
  • You should also read the final post in the Ultimate responsive architecture in…


Apply blur effect in a dynamic region over multiple widgets below (Android logo & Flutter logo)

Flutter makes it much easier to create blur effect with the help of BackdropFilter and ImageFilter.blur. If you haven’t known about it the yet, let’s take a look on BackdropFilter (Flutter Widget of the Week) video.

Here is the final code repo:

And demo video:

I’ll show you some samples of blur effect using BackdropFilter.

1. Blur the Container with image as decoration.

https://github.com/fluttervn/flutter_blur_demo/blob/master/lib/blur_single_image.dart

It looks simple: just create a Container with decoration from an image resource (from assets or network), then add a BackdropFilter as its However BackdropFilter must come with a ImageFilter.blur. …


We might have heard “Everything’s a Widget” in Flutter. But, do you understand how build() method of widget work? Let’s dig deep into that method to prove “Everything’s a Widget”.

Note: for non-paywall link of this article, let use: https://medium.com/fluttervn/how-build-method-of-flutter-widget-proves-everythings-a-widget-a49b5efc5cbb?source=friends_link&sk=f1c33cb455bf98104ff44585ef61553f

First, a typical widget such as Container would have constructor like this:

Container({
Key key,
this.alignment, // AlignmentGeometry
this.padding, // EdgeInsetsGeometry
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
})

At the beginning I thought Container is a complex widget with these properties: alignment, padding, decoration, …

However in Flutter, we also have similar…


super_widgets package can make Flutter code shorter by combining 2 or multiple widgets into single widget.

For example, to create a Stack with padding, background color or alignment:

Container(
color: Colors.blueAccent,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(20),
alignment: Alignment.bottomCenter,
child: Stack(
fit: StackFit.loose,
alignment: Alignment.centerRight,
children: <Widget>[
Container(color: Colors.red, width: 200, height: 200),
Container(color: Colors.green, width: 100, height: 100),
Text(‘SuperStack demo’),
],
),
)

Instead, with SuperStack, code will be like this:

SuperStack(
color: Colors.blueAccent,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(20),
alignment: Alignment.bottomCenter,
childAlignment: Alignment.centerRight,
fit: StackFit.loose,
children: <Widget>[
Container(color: Colors.red, width: 200, height: 200),
Container(color: Colors.green, width: 100, height: 100),
Text('SuperStack demo'),
],
)

At the time of writing, this package only have SuperStack, SuperIndexedStack, SuperColumn and SuperRow. But more supported widgets will come later.

For more information, here is the link to Github repo:

https://github.com/anticafe/super_widgets

Bui Minh Triet

Technology addict

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