10 Flutter tips - season 2 - part 2/10
Tags: flutter
Published: 2021-11-13 12:39:02

![10 Flutter tips cover image](https://img.bloggu.io/ipfs/bafkreicpusdeyfvebxv5cequx2s5jkngqn4qzsj2njrycpgdfwg5pqi3n4)

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](http://pub.dev/packages/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](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](https://www.youtube.com/watch?v=w8cZKm9s228)

## sqflite

[sqflite](http://pub.dev/packages/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](https://www.youtube.com/watch?v=UpKrhZ0Hppk)

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

## Moor

[Moor](http://pub.dev/packages/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](https://www.youtube.com/playlist?list=PLB6lc7nQ1n4glsY1J0R6jWirqtURKClz7)

## Flutter Slidable

[Flutter Slidable](http://pub.dev/packages/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](https://raw.githubusercontent.com/letsar/flutter_slidable/assets/behind_motion.gif)

**Drawer Motion**
![https://raw.githubusercontent.com/letsar/flutter_slidable/assets/drawer_motion.gif](https://raw.githubusercontent.com/letsar/flutter_slidable/assets/drawer_motion.gif)

**Scoll Motion**

![https://raw.githubusercontent.com/letsar/flutter_slidable/assets/scroll_motion.gif](https://raw.githubusercontent.com/letsar/flutter_slidable/assets/scroll_motion.gif)

**Stretch Motion** !

![https://raw.githubusercontent.com/letsar/flutter_slidable/assets/stretch_motion.gif](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](http://pub.dev/packages/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](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.

```dart
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');
```

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](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](https://pub.dev/packages/agora_rtc_engine) 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](https://www.youtube.com/watch?v=l5Kt03x_lD0)

### Flutter Typeahead

This [package](https://pub.dev/packages/flutter_typeahead) gives you a simple autocomplete widget for Flutter, which again is not hard to implement:

```dart
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)
    ));
  },
)
```

Here is an example of what it might look like:

![https://raw.githubusercontent.com/AbdulRahmanAlHamali/flutter_typeahead/master/flutter_typeahead.gif](https://raw.githubusercontent.com/AbdulRahmanAlHamali/flutter_typeahead/master/flutter_typeahead.gif)

### Sliding up panel

The package [sliding_up_panel](https://pub.dev/packages/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](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:

```dart
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"),
      ),
    ),
  );
```

### 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](https://pub.dev/packages/pull_to_refresh) should help you.

![https://github.com/peng8350/flutter_pulltorefresh/raw/master/arts/example1.gif](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](http://pub.dev/packages/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](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](http://twitter.com/tomicriedel)** 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!**