1568947124
Flutter Bloc Pattern Tutorial for developers
Flutteris a very interesting library/framework for building cross-platform mobile applications, Flutter can also be used to develop desktop and web applications. Since its release in 2017, it has grown in popularity and it has been adopted by companies like Alibaba in building cross-platform mobile applications. I am assuming that for you to be reading this article you are interested in Flutter and want to learn more about it so I will stop all the rave reviews and let’s try to get our hands and heads dirty.
Prerequisite Knowledge
For you get the most out of this tutorial you should have an understanding of the following:
- Flutter
- Dart
- Basic knowledge of Reactive Programming(Streams/Observables)
Introduction
What will be covered in this tutorial:
- Flutter
- Dart
- Basic knowledge of Reactive Programming(Streams/Observables)
You may also like:Flutter to build iOS & Android Apps
What is BLOC?
BLOC is an acronym for Business Logic Component and was introduced by Google in Google I/O 2018, It provides a more elegant and reusable way of managing state in Flutter applications which takes advantage of flutter’s UI reactive model. Reactive model meaning that Flutter user interface components are made up of widgets and we can build complex user interfaces by composing those widgets. Flutter is reactive because it helps us manage the state of those widgets so when the state of any widget changes, it automatic redraws/rerender that widget by itself. To use trigger a state change/ redraw flutter provides the setState function if you have ever written React this is similar to this.setState.
A problem arises when you are building complex applications where you might have multiple setState calls, your logic tightly coupled to the user interface(Widgets) and you might have to deal with unnecessary redraw of a widget can lead to performance issues. So this is where the BLOC comes into play.
BLOCs helps us separate our logic from the user interface while maintaining flutter reactive model of redrawing/rerendering when a state or in this case when there is a new stream.
To understand BLOCs we need a little bit of knowledge about Reactive programming.
According to Wikipedia, “Reactive Programming is a declarative programming paradigm concerned with data streams and the propagation of change”; In simple terms, it is programming with asynchronous data streams. Reactive programming in flutter helps you propagate changes to the user interface without having to describe how the propagation happens.
In flutter we have a lot of sources of data streams, user inputs, network requests, and almost everything can be a source of data streams in Flutter. So it makes sense to take advantage of these streams and reactivity in Flutter to build maintainable and testable applications.
We will cover more Reactive programming and streams later in this article.
In this article, I will be using a simple demo application which accepts user input in a TextField widget and queries the Unsplash API for images then displays them. I will briefly walk you through its implementation using the setState model of managing state.
Demo App
SetState Approach
Folder structure of the application
lib
├───src/
│ ├───screens/
│ │ └───imagelist_screen.dart
│ ├───api_key.dart
│ └───app.dart
└───main.dart
The main.dart contains the main method that initializes the application
// app.dart
import 'package:flutter/material.dart';
import 'screens/imagelist_screen.dart';
class App extends StatelessWidget {
Widget build(context) {
return MaterialApp(
title: 'View Images',
theme: new ThemeData(
primarySwatch: Colors.deepOrange,
),
home: Scaffold(
appBar: AppBar(
title: Text('View Images'),
),
body: ImageList(),
),
);
}
}
In the src folder we have the app.dart which is a stateless widget that renders the Scaffold containing the Appbar widget and our imagelist widget is what we will be focusing on.
//app.dart
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' show get;
import '../api_key.dart';
class ImageList extends StatefulWidget {
createState() {
return new ImageListState();
}
}
class ImageListState extends State<ImageList> {
List _images = [];
bool _isLoading = false;
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
_searchField(),
_displayImage(_images),
],
));
}
Future<List> _makeRequest(query) async {
final response = await get(
'https://api.unsplash.com/search/photos?query=$query&client_id=$ACCESS_KEY');
final img = json.decode(response.body);
setState(() {
_images = img['results'];
});
return _images;
}
Widget _searchField() {
return TextField(
onChanged: (query) {
_makeRequest(query);
},
decoration: InputDecoration(
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.search),
hintText: 'Search for anything... cats or doggos maybe'),
);
}
Widget _displayImage(List images) {
return images.isEmpty
? Center(child: new CircularProgressIndicator())
: Expanded(
child: ListView.builder(
itemCount: images == null ? 0 : images.length,
itemBuilder: (context, int index) {
return _buildImage(images[index]);
},
),
);
}
Widget _buildImage(dynamic image) {
return Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
),
child: Column(
children: <Widget>[
Padding(
child: Image.network(
image['urls']['small'],
fit: BoxFit.fitWidth,
height: 200.0,
),
padding: EdgeInsets.only(
bottom: 8.0,
),
),
Text(image['description'] == null
? 'No description'
: image['description']),
],
),
);
}
}
The imagelist widget is a stateful widget which has a state called images to store the images gotten from the http request and trigger a redraw when there is a new image.
In the build method of the ImageList widget we have two functions _searchfield and _displayImage both return a widget. The _searchfield function returns a TextField widget that has an onChange function that calls another function _makerequest with its current value as an argument to make the http request to the Unsplash API.
We have the _displayimage function which returns a widget that displays the list of images and a short description in a ListView widget.
This is a trivial example that just makes an API call on change of the TextField widget and generates a list of images. It will work for a simple application like this, but won’t look good when the applications start getting more complex.
What is the problem with this approach?
- No separation of concerns.
- Difficult to testing because the user interface is tightly coupled to the Logic.
- We can’t reuse the logic in this application elsewhere because it is tightly coupled to the user interface implementation.
Let’s see how the BLOC approach helps us solve these problems.
BLOC approach
We have seen the setState approach to managing state in flutter applications but as mentioned above there are some issues with that approach so let’s see how that the BLOC helps us solve that.
In this context, I will say Reactive Programming is the use of functions to manipulate/consume data streams asynchronously. You can read more about reactive programming in The introduction to Reactive Programming you’ve been missing
What is a Stream?
A Stream is a source of asynchronous data events, It provides a way to receive a sequence of events. These events can be a click event, user inputs, variables, hover events, or network request they could be anything.
We have to understand something, anything can be a source of streams like a variable, clicks, users input but how do we create and control the behavior of the stream. let’s take a look at this analogy, a stream is like a channel that anything(variable, mouse clicks, events, network request) can flow through it, you can add items from one end and it flows to the other end.
We can create and control a stream in Dart using a Streamcontroller. A Streamcontroller is a class provided by Dart in the dart-async package. Streamcontroller is used to create a stream and it provides a sink property to add data(events, variables, network requests) to the stream and also a stream property where you either transform data or listen to the data, errors and done events added to the stream.
This example below shows how to create a stream with a streamController
import 'dart:async';
void main(){
final subject = new StreamController();
subject.stream.listen((x)=>print(x));
subject.sink.add('G');
subject.sink.add('o');
subject.sink.add('o');
subject.sink.add('d');
subject.sink.add('d');
subject.sink.add('a');
subject.sink.add('y');
}
//output
G
o
o
d
d
a
y
Note streams created with StreamController are single-subscription streams by default, which means that it allows only one listener to listen to the stream and they can only be listened to once if you try to listen to it again or add multiple listeners it throws an exception.
But it is possible to create a Broadcast stream(you can listen to them more than once and have multiple listeners) with StreamControllers, all you have to do is call its StreamController.broadcast() constructor when creating it. One thing to note about Broadcast StreamController is that StreamController sends to a listener only the events are added to the Stream after the time of subscription.
Example:
final subject = new StreamController.broadcast();
subject.sink.add('first');
subject.stream.listen((x)=>print('first listener - ${x}'));
subject.sink.add('second');
subject.stream.listen((item) => print('second listener - ${item.toUpperCase()}'));// second listener see only the events added after it starts listener
subject.sink.add('third');
subject.sink.add('fourth');
//output
first listener - second
second listener - THIRD
first listener - third
second listener - FOURTH
first listener - fourth
If you need your StreamController to have a memory of the events that have to be added to the stream before subscription then I suggest you use StreamControllers provided by the RxDart Package.
RxDart is Dart’s implementation of the ReactiveX(Reactive Extension) Library, which builds on top of the native Dart Streams. In RxDart Stream are called Observable and StreamControllers are called Subjects.
Observable extends the native Stream class so all the methods defined on the Stream class are available in the Observables as well.
RxDart provides three types of StreamContollers for us:
- PublishSubject: This is similar to a broadcast StreamController with only one difference that is the stream property returns an Observable instead of a Stream. All rxdart Streamcontroller return Observable instead of a Stream.
Example:
final subject = new PublishSubject();
subject.sink.add('first');
subject.stream.listen((x)=>print('first listener - ${x}')); //first listener sees only the events added after it starts listener
subject.sink.add('second');
subject.stream.listen((item) => print('second listener - ${item.toUpperCase()}'));// second listener see only the events added after it starts listener
subject.sink.add('third');
subject.sink.add('fourth');
//output
first listener - second
second listener - THIRD
first listener - third
second listener - FOURTH
first listener - fourth
- BehaviorSubject: This is a special StreamController that captures the latest item that has been added to the controller and emits that as the first item to any new listener. You can also seed the BehaviorSubject with an initial value that will be emitted when no value has been added to the controller.
Example:
final subject = new BehaviorSubject();
subject.sink.add('first');
subject.stream.listen((x)=>print('first listener - ${x}'));
subject.sink.add('second');
subject.stream.listen((item) => print('second listener - ${item.toUpperCase()}'));// second listener see the latest event added to the stream and any other one added after it starts listener
subject.sink.add('third');
subject.sink.add('fourth');
//output
first listener - first
first listener - second
second listener - SECOND
second listener - THIRD
first listener - third
second listener - FOURTH
first listener - fourth
- ReplaySubject: This is a special StreamController that captures all the items that have been added to a controller and emits them as the first items to any new listener. It is possible to limit the number of stored items in the ReplaySubject by passing a maxSize property to its constructor.
Example:
final subject = new ReplaySubject();
subject.sink.add('first');
subject.stream.listen((x)=>print('first listener - ${x}'));
subject.sink.add('second');
subject.stream.listen((item) => print('second listener - ${item.toUpperCase()}'));// second listener see every event added to the stream
subject.sink.add('third');
subject.sink.add('fourth');
//output
first listener - first
first listener - second
second listener - FIRST
first listener - third
second listener - SECOND
first listener - fourth
second listener - THIRD
second listener - FOURTH
How do we fit Streams into Flutter’s Reactive UI Model
Flutter provides us with a Stateful widget called StreamBuilder which uses State.setState internally. The StreamBuilder widget takes stream property which it listens for any changes, anytime the stream emits new data the StreamBuilder calls its builder callback and it redraws/rerenders the widget. We will see how the StreamBuilder is used when we do the BLOC implementation of our demo application.
I think we know enough to jump right into the BLOC implementation of the Demo.
BLOC Implementation
Folder Structure
lib/
├───src/
│ ├───Api/
│ │ └───Image_Api.dart
│ ├───Bloc/
│ │ └───Image_bloc.dart
│ ├───models/
│ │ └───image_model.dart
│ ├───screens/
│ │ └───imagelist_screen.dart
│ ├───api_key.dart
│ └───app.dart
└───main.dart
Nothing really changed in the app.dart and the main.dart those remain the same but a few changes were made in the ImageList component.
//imagelist.dart
import 'package:flutter/material.dart';
import 'package:image_viewer_bloc_w0provider/src/Api/Image_Api.dart';
import 'package:image_viewer_bloc_w0provider/src/Bloc/Image_bloc.dart';
class ImageList extends StatelessWidget {
final imageBloc = ImageBloc(ImageAPI());
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
_searchField(imageBloc),
_displayImage(imageBloc),
],
));
}
Widget _searchField(ImageBloc _bloc) {
return TextField(
onChanged: _bloc.query.add,
decoration: InputDecoration(
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.search),
hintText: 'Search for anything... cats or doggos maybe'),
);
}
Widget _displayImage(ImageBloc _bloc) {
return Expanded(
child: StreamBuilder(
stream: _bloc.images,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return _buildImage(snapshot.data[index]);
},
);
}
},
),
);
}
Widget _buildImage(dynamic snapshot) {
return Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
),
child: Column(
children: <Widget>[
Padding(
child: Image.network(
snapshot.urls.small,
fit: BoxFit.fitWidth,
height: 200.0,
),
padding: EdgeInsets.only(
bottom: 8.0,
),
),
Text(snapshot.description == null
? 'No description'
: snapshot.description),
],
),
);
}
}
Looking at the BLOC implementation of the imageList we can see that it is now a Stateless Widget and most of the business logic like the method that makes the http request and the setState are no more in the component. All of the business logic has been moved to the BLOC, we then create an instance of the BLOC class ImageBloc which we pass down TextField widget which calls its add method on the onChanged handler. Also we pass that instance to the stream property of the StreamBuilder widget to create a list of images. It seems like all the magic is happening in the ImageBloc component, let’s take a look at how the BLOC is implemented then we will come back and see how everything works together.
//import 'dart:async';
//import '../models/image_model.dart';
//import '../Api/Image_Api.dart';
//import 'package:rxdart/rxdart.dart';
class ImageBloc {
final ImageAPI api;
Stream<List<Images>> _images = Stream.empty();
BehaviorSubject<String> _query = BehaviorSubject<String>();
Stream<List<Images>> get images => _images;
Sink<String> get query => _query;
ImageBloc(this.api) {
_images = _query.distinct().asyncMap(api.makeRequest).asBroadcastStream();
}
void dispose() {
_query.close();
}
}
In the ImageBloc class we create a class property _image a Stream of type List. _images is used to store the images that will be fetched from the Unsplash api, Since we are just need something to store the images that why we used Stream.empty() to initialize the _image property which creates an empty broadcast stream.
THe _query property is a BehaviorSubject(special Streamcontroller) of type String. we have covered what BehaviorSubject are earlier in this tutorial. The _query property is a Sink(the input of a stream) which contains the string typed in the TextField widget,to add an item to a Sink we call its add method.
We now create getters for the _images and _query properties to make them available for use, we have a images getter to get the _images stream and a query getter to have access to the _query Sink.
Then we have the ImageBloc constructor which accepts an instance of the ImageApi class.
//Image_Api.dart
//import 'package:http/http.dart' show get;
//import 'dart:convert';
//import '../models/image_model.dart';
//import '../api_key.dart';
class ImageAPI {
Future<List<Images>> makeRequest(String query) async {
List<Images> images = [];
final response = await get(
'https://api.unsplash.com/search/photos?query=$query&client_id=$ACCESS_KEY');
final parsedResponse = json.decode(response.body);
final List results = parsedResponse['results'];
results.forEach((result) => images.add(Images.fromJson(result)));
return images;
}
}
The ImageAPI class basically contains the logic that makes the http request to the Unsplash api. It has a single method called makeRequest which returns a Future.
Back to the ImageBloc constructor, here we see some of the strengths of functional/reactive programming which is that it helps us write concise and clean code
_images = _query.asyncMap(api.makeRequest)
what this line of code does simply is to take the query added to the _query Sink, fetch the images related to that query and assign that to the _images property.
we will break the line step by step.
1 _query.asyncMap(): asyncMap is a type of operator provided by dart, it is similar to the dart map method which takes a Stream and a function then applies that function to every element in the Stream. asyncMap is different it does this asynchronously.
Now we understand what is going on in the BLOC.
BLOC
Back to the ImageList component to understand how everything fit, we create an instance of the ImageBloc called imageBloc and passed it to the functions that need it. whenever there is a change in TextField widget we call the BLOCs query.add method on its onChanged callback, this adds the query string to the Sink of the StreamController.
Now we have a stream of images coming out of the BLOC stream, how do we convert this stream to widgets? we have talked about the StreamBuilder widget earlier, it takes the stream from the BLOC and a builder method then calls that builder method whenever there is a new event on the stream which triggers a redraw/rerender of the Widgets in its builder method.
Widget _displayImage(ImageBloc _bloc) {
return Expanded(
child: StreamBuilder(
stream: _bloc.images,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return _buildImage(snapshot.data[index]);
},
);
}
},
),
);
}
Widget _buildImage(dynamic snapshot) {
return Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
),
child: Column(
children: <Widget>[
Padding(
child: Image.network(
snapshot.urls.small,
fit: BoxFit.fitWidth,
height: 200.0,
),
padding: EdgeInsets.only(
bottom: 8.0,
),
),
Text(snapshot.description == null
? 'No description'
: snapshot.description),
],
),
);
}
From the above the StreamBuilder takes the BLOCs images property which is a stream and a builder method which takes a context and snapshot. If the snapshot is empty we return a CircularProgressIndicator else we return a ListView.builder widget that generates images with the description.
The BLOC implementation involves us writing a lot more code but we have all our business logic have been moved to the BLOC, we can easily modify the business logic without touching the UI. This also means it is easier to share logic between widgets and across platforms.
Consuming the BLOC
There are a couple of ways of consuming/accessing the BLOC:
- Single Global Instance : This involves creating an instance of the BLOC and sharing that instance with any component/widget that needs access to the BLOC.
Example:
class ImageBloc {
/////
/////
/////
/////
/////
}
// single instance of the BLOC that will be given to any widget that imports this file
final imageBloc = ImageBloc()
-
Local Instance: This is our current implementation, we import the BLOC into the component/widget that needs access to the BLOC then in the component we create an instance of the BLOC so that instance is available to that component only.
-
Provider pattern(InheritedWidget): I like this approach to accessing the BLOC and in my opinion, I think it is suitable when building a large application. This approach uses an InheritedWidget to wrap a parent widget so every child widget of that parent has access to an instance of the BLOC, if you have worked with React then it is similar to the React context but the implementation is completely different.
The diagram below explains it.
Provider
To implement the Provider pattern we create a provider class like this below
//import 'package:flutter/widgets.dart';
//import '../Bloc/Image_bloc.dart';
//import '../Api/Image_Api.dart';
class ImagesProvider extends InheritedWidget {
final ImageBloc imageBloc;
@override
bool updateShouldNotify(InheritedWidget oldWidget) {
return true;
}
The ImageProvider class extends the InheritWidget class. The InheritWidget is what does the magic here it helps child components reach up the widget tree and get access to its data without having to pass the data through multiple constructors.
In the ImageProvider we create an instance of ImageBloc that we want the child widget to access then we implement the InheritedWidget abstract method updateShouldNotify that returns a boolean we will return true.
Then we create a static method called of which takes a BuildContext as an argument and returns an ImageBloc instance, what the method does is to take the context passed by the child widget then it looks up the widget tree for a widget that matches that type of ImageProvider then we cast it as a type of ImageProvider and then returns its imageBloc property containing the instance of the BLOC.
Then we have the ImageProvider constructor which takes an ImageBloc instance, a child key and a key.
//import 'package:flutter/material.dart';
//import 'screens/imagelist_screen.dart';
//import './Provider/image_provider.dart';
//import './Bloc/Image_bloc.dart';
//import './Api/Image_Api.dart';
class App extends StatelessWidget {
Widget build(BuildContext context) {
// wrap our application with the Images Provider
return ImagesProvider(
imageBloc: ImageBloc(ImageAPI()),
child: MaterialApp(
title: 'View Images',
theme: new ThemeData(
primarySwatch: Colors.deepOrange,
),
home: Scaffold(
appBar: AppBar(
title: Text('View Images'),
),
body: ImageList(),
),
),
);
}
}
Now we have to wrap our App widget with provider like shown in the code snippet above we pass an instance of the ImageBloc and a child widget to the ImageProvider constructor. Now all the widget below the App widget have access to the ImageBloc instance using the provider.
To access the Bloc in any child widget we just call the ImageProvider static method of and pass a context as an argument like in the code below.
//imagelist_screen.dart
import 'package:flutter/material.dart';
import 'package:image_viewer_bloc/src/Bloc/Image_bloc.dart';
import 'package:image_viewer_bloc/src/Provider/image_provider.dart';
class ImageList extends StatelessWidget {
@override
Widget build(BuildContext context) {
final _imageBloc = ImagesProvider.of(context);
return Container(
margin: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
_searchField(_imageBloc),
_displayImage(_imageBloc),
],
));
}
////////
////////
////////
Now our widgets have access to the BLOC through the ImageProvider.
Note: There are several options for accessing the BLOC that might be better than the three I covered in this article but this is what I choose to cover in this article.
What is the benefit of using the BLOC pattern?
- No separation of concerns.
- Difficult to testing because the user interface is tightly coupled to the Logic.
- We can’t reuse the logic in this application elsewhere because it is tightly coupled to the user interface implementation.
Guidelines for writing a BLOC
In Paolo Soares talk at DartConf (January 2018) he listed some guidelines you need to follow when writing a BLOC.
- No separation of concerns.
- Difficult to testing because the user interface is tightly coupled to the Logic.
- We can’t reuse the logic in this application elsewhere because it is tightly coupled to the user interface implementation.
Alternatives to the BLOC
What other options do we have to manage state in flutter applications
- No separation of concerns.
- Difficult to testing because the user interface is tightly coupled to the Logic.
- We can’t reuse the logic in this application elsewhere because it is tightly coupled to the user interface implementation.
Conclusion
Flutter has a lot of approaches to managing the state of an application so it is up to you the application developer to pick the right tool, as you can see the BLOC is an overkill for the demo application used in this tutorial but in more complex application this approach might be the best because it encourages separation of concerns and cleaner code.
Originally published by Adaware Oghenero at** **blog.soshace.com
#flutter #mobile-apps
What is GEEK
Buddha Community
1597014000
Google's Flutter 1.20 stable announced with new features - Navoki
Flutter Google cross-platform UI framework has released a new version 1.20 stable.
Flutter is Google’s UI framework to make apps for Android, iOS, Web, Windows, Mac, Linux, and Fuchsia OS. Since the last 2 years, the flutter Framework has already achieved popularity among mobile developers to develop Android and iOS apps. In the last few releases, Flutter also added the support of making web applications and desktop applications.
Last month they introduced the support of the Linux desktop app that can be distributed through Canonical Snap Store(Snapcraft), this enables the developers to publish there Linux desktop app for their users and publish on Snap Store. If you want to learn how to Publish Flutter Desktop app in Snap Store that here is the tutorial.
Flutter 1.20 Framework is built on Google’s made Dart programming language that is a cross-platform language providing native performance, new UI widgets, and other more features for the developer usage.
Here are the few key points of this release:
Performance improvements for Flutter and Dart
In this release, they have got multiple performance improvements in the Dart language itself. A new improvement is to reduce the app size in the release versions of the app. Another performance improvement is to reduce junk in the display of app animation by using the warm-up phase.
If your app is junk information during the first run then the Skia Shading Language shader provides for pre-compilation as part of your app’s build. This can speed it up by more than 2x.
Added a better support of mouse cursors for web and desktop flutter app,. Now many widgets will show cursor on top of them or you can specify the type of supported cursor you want.
Autofill for mobile text fields
Autofill was already supported in native applications now its been added to the Flutter SDK. Now prefilled information stored by your OS can be used for autofill in the application. This feature will be available soon on the flutter web.
A new widget for interaction
InteractiveViewer is a new widget design for common interactions in your app like pan, zoom drag and drop for resizing the widget. Informations on this you can check more on this API documentation where you can try this widget on the DartPad. In this release, drag-drop has more features added like you can know precisely where the drop happened and get the position.
Updated Material Slider, RangeSlider, TimePicker, and DatePicker
In this new release, there are many pre-existing widgets that were updated to match the latest material guidelines, these updates include better interaction with Slider and RangeSlider, DatePicker with support for date range and time picker with the new style.
New pubspec.yaml format
Other than these widget updates there is some update within the project also like in pubspec.yaml file format. If you are a flutter plugin publisher then your old pubspec.yaml is no longer supported to publish a plugin as the older format does not specify for which platform plugin you are making. All existing plugin will continue to work with flutter apps but you should make a plugin update as soon as possible.
Preview of embedded Dart DevTools in Visual Studio Code
Visual Studio code flutter extension got an update in this release. You get a preview of new features where you can analyze that Dev tools in your coding workspace. Enable this feature in your vs code by _dart.previewEmbeddedDevTools_setting. Dart DevTools menu you can choose your favorite page embed on your code workspace.
Network tracking
The updated the Dev tools comes with the network page that enables network profiling. You can track the timings and other information like status and content type of your** network calls** within your app. You can also monitor gRPC traffic.
Generate type-safe platform channels for platform interop
Pigeon is a command-line tool that will generate types of safe platform channels without adding additional dependencies. With this instead of manually matching method strings on platform channel and serializing arguments, you can invoke native class and pass nonprimitive data objects by directly calling the Dartmethod.
There is still a long list of updates in the new version of Flutter 1.2 that we cannot cover in this blog. You can get more details you can visit the official site to know more. Also, you can subscribe to the Navoki newsletter to get updates on these features and upcoming new updates and lessons. In upcoming new versions, we might see more new features and improvements.
You can get more free Flutter tutorials you can follow these courses:
- Setup Flutter Desktop on Windows, Linux, MacOS using VSCode and Build – Flutter Tutorial
- Flutter Desktop Linux app | Build and Publish on Snapcraft Store
- Firebase Local Emulator Suite in Flutter
#dart #developers #flutter #app developed #dart devtools in visual studio code #firebase local emulator suite in flutter #flutter autofill #flutter date picker #flutter desktop linux app build and publish on snapcraft store #flutter pigeon #flutter range slider #flutter slider #flutter time picker #flutter tutorial #flutter widget #google flutter #linux #navoki #pubspec format #setup flutter desktop on windows
1598336804
Hire Flutter Developer
Are you looking for next-generation mobile applications to increase business benefits?
HourlyDeveloper.io is one of the most reputable mobile app development company, which provides Flutter app development services to various industries across the globe. Hire Flutter Developer who is adept at building native and fast development of Android, iOS mobile apps. we are offering both hourly and full time dedicated services.
Consult with experts: https://bit.ly/2CWJgHyFlutter app developer
#hire flutter developer #flutter developer #flutter app development services #flutter app development company #flutter app development #flutter app developer
1622532470
Hire Dedicated Flutter App Developer USA| Flutter App Developers
Hire Flutter App Developers: WebClues Infotech is a Flutter App Development company. Our Flutter mobile app development team can create cross-platform apps for different industry verticals. Our Flutter developers will help you extend your business’s scope by developing enhanced functionality and a feature-rich app. To provide a rich user experience to your users, hire dedicated Flutter app developers from WebClues Infotech today!
#hire flutter app developers #hire dedicated flutter app developer usa #hire flutter app developer usa #hire dedicated flutter app developer #hire flutter developer #flutter app development company
1616585397
Hire Dedicated Flutter Developer - WebClues Infotech
Cross-Platform app development is taking the mobile app development industry by a storm by reducing the development cost as well as complication. The forefront technology driving this growth is Flutter for mobile app development.
Are you looking to develop an interactive and uncomplicated app for your Startup or Business?
We at WebClues Infotech offer a Flutter developer hiring service with vast experience and expertise. You must be thinking why should I Hire a Flutter Developer from WebClues Infotech?
- Dedicated Approach
- Quick Response Approach
- Experienced in your business segment
- Quick Turnaround time
Want a flutter developer that has the above traits? Get in touch with us
Book Free Interview: https://bit.ly/3dDShFg
#hire dedicated flutter developer #hire flutter developers #hire flutter developer #hire flutter app developers #hire flutter app developers in india #flutter developer
1591643580
Adobe XD plugin for Flutter with CodePen Tutorial
Recently Adobe XD releases a new version of the plugin that you can use to export designs directly into flutter widgets or screens. Yes, you read it right, now you can make and export your favorite design in Adobe XD and export all the design in the widget form or as a full-screen design, this can save you a lot of time required in designing.
What we will do?
I will make a simple design of a dialogue box with a card design with text over it as shown below. After you complete this exercise you can experiment with the UI. You can make your own components or import UI kits available with the Adobe XD.
#developers #flutter #adobe xd design export to flutter #adobe xd flutter code #adobe xd flutter code generator - plugin #adobe xd flutter plugin #adobe xd flutter plugin tutorial #adobe xd plugins #adobe xd to flutter #adobe xd tutorial #codepen for flutter.