DEV Community

Cover image for 10 Flutter tips - season 2 - part 2/10
Tomic Riedel 💙
Tomic Riedel 💙

Posted on • Originally published at Medium

10 Flutter tips - season 2 - part 2/10

10 Flutter tips cover image

Now we are already at the 2nd part of the 2nd season of this wonderful format.

Today we are dealing with packages again. We mainly deal with packages over databases, so... Let's go and Happy reading!

Hive

Hive is one of the best database packages out there. It offers so many possibilities that help you a lot as a developer. One of the most important points to know is that Hive is a NoSQL database. Another very important point is that you have very strong encryption built in. Not many database packages have this and it makes Hive even more special. Oh, and forgot to mention: It has great documentation. Bottom line: for your next app where you need a NoSQL database, Hive should definitely be included! You can learn Hive with the help of a tutorial from Reso Coder or Johannes Milke:

Reso Coder - Hive (Flutter Tutorial) - Lightweight & Fast NoSQL Database in Pure Dart: https://www.youtube.com/watch?v=R1GSrrItqUs

Johannes Milke - Flutter Tutorial - Hive NoSQL Database In 16 Minutes & Hive CRUD | Android, iOS & Web: https://www.youtube.com/watch?v=w8cZKm9s228

sqflite

sqflite is a database system for Android, iOS and macOS that is built on the principle of SQLite. So simply put, this is the right package if you want to store data in SQL tables.

You can learn how to use this package with a tutorial by Johannes Milke or with a tutorial by Flutter in the Package of the Week series:

Johannes Milke - Flutter Tutorial - SQL Database Storage Using Sqlite & Sqflite CRUD | Android & iOS: https://www.youtube.com/watch?v=UpKrhZ0Hppk

Flutter - sqflite (Flutter Package of the Week): https://www.youtube.com/watch?v=HefHf5B1YM0

Moor

Moor is a database system based on SQLite and written natively in Dart, making it work on any platform. It has many advantages over the better known sqflite package. However, since it is relatively unknown, it is harder to find solutions to problems. You can learn Moor using Reso Coder's tutorial series:

Reso Coder - Moor - Fluent SQLite for Flutter: https://www.youtube.com/playlist?list=PLB6lc7nQ1n4glsY1J0R6jWirqtURKClz7

Flutter Slidable

Flutter Slidable is a package that allows you to create slidable list items. This is also possible with Flutter without a package, but this package offers a nice animation selection. Let's have a look at the animations:

Behind Motion
https://raw.githubusercontent.com/letsar/flutter_slidable/assets/behind_motion.gif

Drawer Motion
https://raw.githubusercontent.com/letsar/flutter_slidable/assets/drawer_motion.gif

Scoll Motion

https://raw.githubusercontent.com/letsar/flutter_slidable/assets/scroll_motion.gif

Stretch Motion !

https://raw.githubusercontent.com/letsar/flutter_slidable/assets/stretch_motion.gif

Let's be honest: this looks really good already. The nice thing is that you don't even have to learn much to implement this package into your app. You can easily learn how to include these widgets in the README.

Just Audio

You've always wanted to build a music app. Then just_audio is just the thing for you. I think this picture says it all about what this package can do:

https://user-images.githubusercontent.com/19899190/125459608-e89cd6d4-9f09-426c-abcc-ed7513d9acfc.png

In the following code example we only look at how you can load an audio file.

final player = AudioPlayer();
var duration = await player.setUrl('https://foo.com/bar.mp3');
var duration = await player.setFilePath('/path/to/file.mp3');
var duration = await player.setAsset('path/to/asset.mp3');
Enter fullscreen mode Exit fullscreen mode

Here is a Medium article that will surely help you implement Just Audio properly:

https://suragch.medium.com/steaming-audio-in-flutter-with-just-audio-7435fcf672bf

Agora RTC Engine

Maybe some of you have heard of Agora before, but I will still explain what you can use Agora for in your app. Maybe you want to make a messenger app with video functionality or a pure video call app. You will quickly run into a problem. It's very hard to make video calls yourself, without other help. That's where Agora comes in. You can use Agora to easily create video calls without knowing much about the backend. The whole thing is made easy by the agora_rtc_enginge package.

Now you surely want to know how to actually implement this into your app. Tadas Petra has created a very good video about this.

Tadas Petra - Video Call with Flutter and Agora: https://www.youtube.com/watch?v=l5Kt03x_lD0

Flutter Typeahead

This package gives you a simple autocomplete widget for Flutter, which again is not hard to implement:

TypeAheadField(
  textFieldConfiguration: TextFieldConfiguration(
    autofocus:true,
    style: DefaultTextStyle.of(context).style.copyWith(
      fontStyle: FontStyle.italic
    ),
    decoration: InputDecoration(
      border: OutlineInputBorder()
    )
  ),
  suggestionsCallback: (pattern)async {
returnawait BackendService.getSuggestions(pattern);
  },
  itemBuilder: (context, suggestion) {
return ListTile(
      leading: Icon(Icons.shopping_cart),
      title: Text(suggestion['name']),
      subtitle: Text('\${suggestion['price']}'),
    );
  },
  onSuggestionSelected: (suggestion) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => ProductPage(product: suggestion)
    ));
  },
)
Enter fullscreen mode Exit fullscreen mode

Here is an example of what it might look like:

https://raw.githubusercontent.com/AbdulRahmanAlHamali/flutter_typeahead/master/flutter_typeahead.gif

Sliding up panel

The package sliding_up_panel makes it easy to implement a SlidingUpPanel. Here is a good example of what this looks like:

https://raw.githubusercontent.com/akshathjain/sliding_up_panel/master/screenshots/example.gif

Here is an example of how you can implement the panel. You will surely notice that it is very easy:

return Scaffold(
    appBar: AppBar(
      title: Text("SlidingUpPanelExample"),
    ),
    body: SlidingUpPanel(
      panel: Center(
        child: Text("This is the sliding Widget"),
      ),
      body: Center(
        child: Text("This is the Widget behind the sliding panel"),
      ),
    ),
  );
Enter fullscreen mode Exit fullscreen mode

Pull to Refresh

in your app data that can change at any time? Or you are building a social media app and simply want to refresh the user's feed? Then the package pull_to_refresh should help you.

https://github.com/peng8350/flutter_pulltorefresh/raw/master/arts/example1.gif

As you can see there are many uses for this package.

The README is very detailed, so you will easily understand how to implement this package.

Convex Bottom Bar

Once again it's time to introduce a bottom bar. This time it's convex_bottom_bar. With this package you can create impressive bottom bars that will surely catch users' eyes!

Just take a look at how many ways there are to implement this bottom bar:

https://github.com/hacktons/convex_bottom_bar/raw/master/doc/preview.png

Conclusion

Now we have come to the end of another episode of 10 Flutter tips.

I really hope you enjoyed it! If so, I would be very happy if you could give this post some claps and follow me if you don't want to miss any more posts!

Want to check out some more quality content from me? Then I recommend you check out my Twitter account and follow me there too! You'll get daily motivation there and find great threads about programming and productivity!

Bye and have a great day!

Latest comments (0)