Forem: TheOtherDev/s

Getting to know Flutter: Local notifications

TheOtherDev/s — Wed, 12 Jan 2022 16:40:50 +0000

While your app can be fine without advanced ways to build your users' loyalty, notifications are a really important feature that you should consider implementing. It can be a reminder on how much you love your users or a way to remind them of important events. Well, in Flutter using this great tool is pretty easy but you need to know a few concepts to master it! In this tutorial we'll see how to create a simple notification and a scheduled one.

flutter_local_notifications

This is the plugin we'll use and it's the most popular one on pub.dev. You can find it here and add it easily to your project:

dependencies:
  flutter_local_notifications: ^9.1.5

This plugin supports iOS and Android and can show pretty much whatever you want as you were developing on native platform. Before starting with Dart code we'll need to check specific configuration for iOS and Android. Also let's add this package too:

flutter_native_timezone: ^2.0.0

With this we can schedule timed notifications without caring for the timezones of the device.

A simple notification

Let's do an easy "hello world"! First we need to initialize the plugin with iOS and Android specifications. For Android we'll need to specify the channel and the icon. The channel can be initialized directly but the icon need to be added to the initialization.

  static const AndroidNotificationDetails _androidNotificationDetails =
  AndroidNotificationDetails(
    'MYID',
    'NOTIFICATION',
    channelDescription: 'Description',
    playSound: true,
    priority: Priority.high,
    importance: Importance.high,
  );

Future<void> init() async {
    final AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');
  }

iOS initialization is pretty straightforward too:

final IOSInitializationSettings initializationSettingsIOS =
        const IOSInitializationSettings(
      requestSoundPermission: false,
      requestBadgePermission: false,
      requestAlertPermission: false,
    );

Also we want to init "Timezones" plugin. The final code for initialization will result:

import 'package:timezone/data/latest.dart' as tz;
import 'package:timezone/timezone.dart' as tz;

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

Future<void> init() async {
    final AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');

    final IOSInitializationSettings initializationSettingsIOS =
        const IOSInitializationSettings(
      requestSoundPermission: false,
      requestBadgePermission: false,
      requestAlertPermission: false,
    );

    final InitializationSettings initializationSettings =
        InitializationSettings(
      android: initializationSettingsAndroid,
      iOS: initializationSettingsIOS,
      macOS: null,
    );

    tz.initializeTimeZones();

    await flutterLocalNotificationsPlugin.initialize(
      initializationSettings,
    );
  }

We can do that in a initState() without much issues. Also we'll need to ask for notifications permission on iOS this way:

final bool result = await flutterLocalNotificationsPlugin
    .resolvePlatformSpecificImplementation<
        IOSFlutterLocalNotificationsPlugin>()
    ?.requestPermissions(
    alert: true,
    badge: true,
    sound: true,
    );

After that we are ready to trigger a notification!

Then we can finally create our notification:

const NotificationDetails platformChannelSpecifics =
                NotificationDetails(android: _androidNotificationDetails);
            await flutterLocalNotificationsPlugin.show(
              Random().nextInt(9000),
//NOTIFICATION ID - SHOULD BE UNIQUE/RANDOM
              'Hello',
              'World!',
              platformChannelSpecifics,
            );

The result will be this:

Scheduled notification

Scheduling a notification requires the same things as above but also a date time. It's best here to use directly Timezone plugin as it will take care of pretty much everything. We are now scheduling a notification to 5 seconds in the future:

var tzDateTime = tz.TZDateTime.now(tz.local).add(const Duration(seconds: 5));

            await flutterLocalNotificationsPlugin.zonedSchedule(
              0,
              'Scheduled Hello',
              'Scheduled World!',
              tzDateTime,
              platformChannelSpecifics,
              androidAllowWhileIdle: true,
              uiLocalNotificationDateInterpretation:
                  UILocalNotificationDateInterpretation.absoluteTime,
            );

In conclusion

Local notifications ca be a bit hard to initialize but they are a breeze to use once we understand them. This plugin offers a lot of options to customize notifications like media embedding and selection behavior but I'll leave them to you to discover!

For more awesome Flutter tutorials check out our website!

Mastering Flutter: Bluetooth use

TheOtherDev/s — Wed, 22 Dec 2021 16:05:32 +0000

Let's face it, we are living in a connected world in which also physical objects can be used with software. Today we are going to dive into this world by looking at one of the most common ways to connect to devices: bluetooth.

flutter_blue

To enable bluetooth connectivity with your Flutter app you should consider using this package as it is the most used one. You can obviously create a custom plugin if you have specific needs but this one will be ok for most cases.

To start add it to your pubspec.yaml file:

flutter_blue: ^0.8.0

then add these permissions for Android:

  <uses-permission android:name="android.permission.BLUETOOTH" />
  <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

Also in the ios/Runner/Info.plist add:

 <dict>
     <key>NSBluetoothAlwaysUsageDescription</key>
     <string>Need BLE permission</string>
     <key>NSBluetoothPeripheralUsageDescription</key>
     <string>Need BLE permission</string>
     <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
     <string>Need Location permission</string>
     <key>NSLocationAlwaysUsageDescription</key>
     <string>Need Location permission</string>
     <key>NSLocationWhenInUseUsageDescription</key>
     <string>Need Location permission</string>

For location permissions on iOS see more at: https://developer.apple.com/documentation/corelocation/requesting_authorization_for_location_services

Usage

The main goal of a bluetooth connection is to connect to a device, discover its services and write/read data from it. First thing first we need to find our device so let's do a good old scan!

FlutterBlue flutterBlue = FlutterBlue.instance;
flutterBlue.startScan(timeout: Duration(seconds: 4));

// Listen to scan results
var subscription = flutterBlue.scanResults.listen((results) {
    for (ScanResult r in results) {
           if(r.uuid == [YOUR DEVICE ID]){
               // Connect to the device
               await r.device.connect();

               // Disconnect from device
               r.device.disconnect();
           }
    }
});

To stop just

flutterBlue.stopScan();

While you should not connect-disconnect so quickly you can see that doing it is a piece of cake.

When you are connected then you should discover device services this way:

List<BluetoothService> services = await device.discoverServices();

Then, as each service has n characteristics, you can check all of them this way;

var characteristics = service.characteristics;

With characteristics then you can pretty much do whatever you want like read or write:

List<int> value = await characteristic.read();
await characteristic.write([0x12, 0x34])

We can do the same with the characteristic descriptors:

var descriptors = characteristic.descriptors;

List<int> value = await descriptor.read();
await descriptor.write([0x12, 0x34])

Last, but not least, we can also listen to characteristics changes this way:

await characteristic.setNotifyValue(true);
characteristic.value.listen((value) {
    // do something with new value
});

Conclusions

There you are, you can now work with bluetooth on Flutter. Be aware that Android and iOS behaviors can be a bit different, for example Android tends to cache manufacturer data so you should add "allowDuplicates" to obtain them always. Feel free to explore and experiment!

Want to check more awesome Flutter tutorials? Click here!

Starting with Flutter: Asset usage on app

TheOtherDev/s — Thu, 09 Dec 2021 16:05:57 +0000

If your app needs some kind of graphics or file to work, your best option is to add assets to your application. With assets you can have images, audio, fonts and videos inside your flutter app. The great thing is that adding them is pretty easy and retrieving them is still a breeze!

Pubspec.yaml

Every asset must be nominated into the project pubspec.yaml file. Fortunately you don't need to add every file singularly but you can write down only the folder in which there is. To add them you should write down this under the "flutter" section of the pubspec.yaml file.

flutter:
  assets:
    - myfolder/
    - myfolder/myGraphics
    - myfolder2/myGraphics2

The path always starts from the main folder of the project so you only need to add the relative one.

Retrieving assets

Widgets should expose methods to use assets, like Image does (Image.asset("PATH")). The path to add is the absolute one starting from the project directory with the file name at the end with the extension. Considering the example above:

Image.asset('assets/myfolder/image.png')

Some tricks

Create a function which will get a file name and will return the full asset path with the file at the end.
Use the iOS typical folder structure, Flutter will retrieve automatically the correct asset.
- Use the default folder for 1.0x then add 2.0x and 3.0x assets
You can add custom fonts to assets folder, files... It's not only for audio and images. Remember always to add additional folders/files to the pubspec.yaml file.

Mastering Flutter: Custom Scrollview

TheOtherDev/s — Wed, 24 Nov 2021 16:09:29 +0000

In this tutorial you will learn how to achieve custom scrolling effects with the CustomScrollView widget and its sliver. Custom scroll views are particularly useful if you want to develop particular scrolling effects or if you want to have more control on the scrolling content of your ScrollView.

So, what is a Sliver? From the documentation:

A sliver is a portion of a scrollable area. You can use slivers to achieve custom scrolling effects.

Slivers are particular widgets that must produce RenderSliver objects and are the children of the CustomScrollView.

Both ListViews and GridViews uses a CustomScrollView and slivers widgets under the hood.

Here's some useful Sliver provided by Flutter:

SliverAppBar: this sliver renders an app bar, it is typically used as the first child of the custom scroll. It can be configured to change its height according to the scrolling of the user.
SliverGrid: a sliver that renders a grid of widgets
SliverList and SliverFixedExtentList: slivers that render a list inside the scrollview. The fixed extent version of the list is more efficient because it doesn't need to calculate the height/width of its children
SliverToBoxAdapter: a sliver that contains a box widget, it's useful if you want to embed a widget inside a custom scroll view
SliverPadding: a sliver that applies padding to another sliver.

Let's build our first custom scroll view:

CustomScrollView(
        slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Custom Scroll View'),
            ),
          ),
          SliverGrid(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.amber,
                  child: Text('$index'),
                );
              },
              childCount: 20,
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  child: Text(' $index'),
                );
              },
            ),
          )

This is a simple scrollview with:

An app bar at the top
A grid
A List

And the result is the following:

Check it out here

NotificationListener and ScrollNotification

Other widgets particularly useful when using custom scroll views are NotificationListener ScrollNotification, you can use this widget to receive events when the user scrolls without using a ScrollController.

Let's wrap our CustomScrollView inside a NotificationListener:

NotificationListener<ScrollNotification>(
        onNotification: (notification) {
          print(notification);
          return true;
        },
        child: CustomScrollView(
...
)

Now whenever the user interacts with the scroll view the onNotification callback will be invoked with a ScrollNotification, you can use the information of the notification to change the layout of the widgets, or to manage your data.
You could load more data when the user reaches the end of the content of the scroll view).
Let's implement it.

          onNotification: (notification) {
            if (notification is ScrollEndNotification) {
              // We use 20 as our threshold to load more data
              if (notification.metrics.extentAfter < 20) {
                print('Load more data');
              }
            }
            return true;
          },

If you wish to check out more awesome tutorials click here!

Starting with Flutter: JSON & Serialization

TheOtherDev/s — Wed, 10 Nov 2021 16:05:38 +0000

JSON is a great format to pass data through web and more. Every developer will be facing this dreaded issue: how the **** do I translate a JSON into an object? We are now here to check what Flutter gives us to serialize JSON objects. For the sake of this article we'll consider serializing an "Event" object composed like this:

class Event {
  final String title;
  final String date;
  final String imageUrl;

  Event(this.title, this.date, this.imageUrl);
}

Manual serialization

Manual serialization is natively supported by Dart with the dart:convert library. On our data class we'll need to create 2 functions called fromJson and toJson which, respectevely, will translate a json into our Event and vice versa. fromJson takes a Map<String, dynamic> and will give you an instance of the data class, toJson is a class function which gives a Map starting from data parameters.

class Event {
  final String title;
  final String date;
  final String imageUrl;

  Event (this.title, this.date, this.imageUrl);

  Event .fromJson(Map<String, dynamic> json): 
        title= json['title'],
        date = json['date'],
        imageUrl= json['imageUrl'];

  Map<String, dynamic> toJson() =>
    {
      'title': title,
      'date': date,
      'imageUrl': imageUrl
    };
}

Then serialize and deserialize is an easy line of code:

//JSON String to a map
Map eventMap = jsonDecode(jsonString);

//Serialize to object
var event = Event.fromJson(eventMap);

//Encode to JSON String
String json = jsonEncode(event);

This is easy but be aware that you would probably have also to face more complex objects (like nested JSONs) or you could wish for a more "automatic" way to to this operation.

Code generation libraries

We'll see a very useful package called json_serializable, published by Google, which automatically generates code to serialize and deserialize our data class.

First we need to add our dependencies, we'll need to add also dev_dependencies because there will be code generation from json_serializable that we don't want on our build:

dependencies:
  json_annotation: <latest_version>

dev_dependencies:
  build_runner: <latest_version>
  json_serializable: <latest_version>

Then on our Event class we'll need to say that's a json_serializable class using annotations and allow the class to access private members in generated files:

import 'package:json_annotation/json_annotation.dart';

/// This allows the class to access private members in
/// the generated file called *.g.dart, where the star denotes the source file name.
part 'event.g.dart';

/// An annotation for the code generator to know that this class needs
/// JSON serialization.
@JsonSerializable()

class Event{
  Event(this.title, this.date, this.imageUrl);

  String title;
  String date;
  String imageUrl;

  /// A necessary factory constructor for creating a new Event instance
  /// from a map. Pass the map to the generated `_$EventFromJson()` constructor.
  /// The constructor is named after the source class Event.
  factory Event.fromJson(Map<String, dynamic> json) => _$EventFromJson(json);

  /// `toJson` is the convention for a class to declare support for serialization
  /// to JSON. The implementation simply calls the private, generated
  /// helper method `_$EventToJson`.
  Map<String, dynamic> toJson() => _$EventToJson(this);
}

This will generate code for encoding and decoding all parameters in this class. You can change the name the decoding will find by adding an annotation to the parameter this way:

//On the json it's 'event_image_url'

@JsonKey(name: 'event_image_url')
String imageUrl;

You can also set some defaults, required elements or to ignore some fields:

@JsonKey(defaultValue: 'NoTitle')
String title;

@JsonKey(required: true)
String date;

@JsonKey(ignore: true)
String imageUrl;

Last passage is to run a command to generate JSON serialization code with a watcher that, is some data classes change, also the serialization code will be recreated:

//Run on project root
flutter pub run build_runner watch

in the end we'll just have to call our dear old jsonDecode and fromJson:

Map eventMap = jsonDecode(jsonString);
var event = Event.fromJson(eventMap);
String json = jsonEncode(event);

That's it.

If your class have a nested class you'll need to JsonSerialize also the nested class and on your "father class" you'll need to change this annotation:

@JsonSerializable(explicitToJson: true)
class Event{
  String title;

  //Our class (already json_serialized)
  Address address;
}

That's it. It may seem not the easiest thing in the world but it's better than doing it manually, also if you change something on your object you don't need to change the way the serialization works, you'll just need to redo the command or let the watcher do it. Pretty handy!

Discover more awesome Flutter tutorials here!

Starting with Flutter: How to embed a webview

TheOtherDev/s — Wed, 27 Oct 2021 15:31:55 +0000

In this tutorial you will learn how to use WebViews in your Flutter application. With WebViews you can embed web contents inside your app. We will use the webview_flutter package that uses native WebViews (WKWebView on iOS and WebView on Android).

The first thing that you have to do is to add the package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  webview_flutter: ^2.1.2

After this run flutter pub get, or use the Pub get button.

Now create a new file webview_scaffold.dart, and create a new StatefulWidget called WebViewScaffold.
Adding a WebView is very simple, we will need to use the WebView Widget as the body of the Scaffold. In the following example the WebView will open https://google.com.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewScaffold extends StatefulWidget {
  const WebViewScaffold({Key? key}) : super(key: key);

  @override
  State<WebViewScaffold> createState() => _WebViewScaffoldState();
}

class _WebViewScaffoldState extends State<WebViewScaffold> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
      ),
      body: WebView(
        initialUrl: 'https://google.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

Navigation

We can manage the navigation in our WebView, to do so we will use the WebViewController object. This is created by the WebView widget and passed in a callback that's called once the WebView is created.
Let's add the WebViewController to our state and save it for later, when the callback is invoked.

class _WebViewScaffoldState extends State<WebViewScaffold> {
  WebViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
      ),
      body: WebView(
        initialUrl: 'https://google.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          setState(() {
            _controller = controller;
          });
        },
      ),
    );
  }
}

Now we just need to use the controller to make thee WebView go back, go forward or reload. The WebViewController has functions to go back, forward, reload and to check if the WebView can go back or go forward.
We will put those buttons in a BottomAppBar as the bottomNavigationBar of our Scaffold.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewScaffold extends StatefulWidget {
  const WebViewScaffold({Key? key}) : super(key: key);

  @override
  State<WebViewScaffold> createState() => _WebViewScaffoldState();
}

class _WebViewScaffoldState extends State<WebViewScaffold> {
  WebViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
      ),
      body: WebView(
        initialUrl: 'https://google.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          setState(() {
            _controller = controller;
          });
        },
        onPageFinished: (_) {
          setState(() {});
        },
      ),
      bottomNavigationBar: _controller != null
          ? _WebViewNavigationBar(controller: _controller!)
          : null,
    );
  }
}

class _WebViewNavigationBar extends StatelessWidget {
  final WebViewController controller;

  const _WebViewNavigationBar({
    Key? key,
    required this.controller,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      child: SizedBox(
        height: 60,
        child: IconTheme(
          data: IconThemeData(color: Colors.blue),
          child: Row(
            children: [
              FutureBuilder<bool>(
                future: controller.canGoBack(),
                builder: (context, snapshot) => IconButton(
                  icon: Icon(Icons.arrow_back),
                  onPressed:
                      snapshot.data == true ? () => controller.goBack() : null,
                ),
              ),
              FutureBuilder<bool>(
                future: controller.canGoForward(),
                builder: (context, snapshot) => IconButton(
                  icon: Icon(Icons.arrow_forward),
                  onPressed: snapshot.data == true
                      ? () => controller.goForward()
                      : null,
                ),
              ),
              Expanded(child: Container()),
              IconButton(
                icon: Icon(Icons.refresh),
                onPressed: () => controller.reload(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Starting with Flutter: Sound nullsafety

TheOtherDev/s — Wed, 13 Oct 2021 15:19:05 +0000

Flutter 2 has landed few months ago and one of the key feature of the release were Null Safety.

Null safety it's an huge upgrade, to start migrating, inside the pubspec.yaml file, change the sdk minimum to 2.12.0:

environment:
  sdk: ">=2.12.0<3.0.0"

then in the terminal run the following commands to regenerate the package configuration file:

flutter clean
flutter pub get

Now you'll have pretty much all the code broken, don't worry (or maybe yes :)), it's normal. Let's see now how your world will change:

Dependencies

You can still use non-null safety dependencies in your project but you should absolutely consider to update them as soon as possible. If a dependency needs dart SDK < 2.12 it will be not usable anymore. To check on updates and which package needs to do implement null safety you can use this command:

dart pub outdated --mode=null-safety

You will see if your packages are null safety ready or if they need some updates.

"required"

You are already accustomed to the @required keyword which will create a warning if a parameter is missing from a constructor, right? The new required keyword workd pretty similarly but it will show an error on compiler so you'll never miss a "required" anymore.

"?" & "!"

Meet new "friends", the question mark and exclamation mark! The first one will label your class parameters as nullable and will warning you any time you try to use them without checking in if they are null. You can force-use a nullable parameter by adding a ! after the name of it. Also the ? will change how you will create classes. Let's see an example:

class MyButton extends StatelessWidget {
  const MyButton ({
    Key? key,
    required this.content,
    required this.onTap,
    this.color = azure,
    this.manualPadding,
  }) : super(key: key);

  final String content;
  final Function() onTap;
  final Color color;
  final EdgeInsets? manualPadding;

  @override
  Widget build(BuildContext context) {
    //MY build...
  }
}

In this MyButton class we can see that "content" and "onTap" are required, "color" is not and "manualPadding" is nullable. This means:

content and onTap should always be valorized or the compiler will show an error.
color is a parameter which, if not valorized while creating MyButton, will have "azure" as a color.
manualPadding is a nullable parameter, so while creating our class we can absolutely set it as null.

When you implement null safety also many main widgets' parameters can be set as null and you will receive warnings and errors by the compiler.

"late"

The late keyword can be used if you are SURE it will be valorized before using it because the compiler will not stop you to use it, even if it is null (and in this case it will throw an error while running). Also it will show you a warning if you try to check if it is null as... It SHOULD NOT BE NULL!

late List<String> allStrings;

Wrapping all up

Null safety is not very easy to digest but will improve your app performance and awareness to possible issues with your code. It can be very scary at the beginning but you will go through it. And if you're not ready... No hassle! You can still stick to non-null safey!

Want to check more awesome Flutter tutorials? Click here!

Starting With Flutter: Bottom Bar

TheOtherDev/s — Wed, 06 Oct 2021 15:14:03 +0000

While buttons and menus are nice ways to let users navigate your app, you can also use Bottom Bars to make it easier and more visually pleasing. iOS users are already well into the Bottom Bar world and the new Android design guidelines embrace it in full force so... Let's go!

First steps

The easiest way to create a BottomBar is from Scaffold as it has a bottomNavigationBar property:

int _currentIndex = 0;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text('My Demo'),
      ),
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.call),
            label: 'Chiamate',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera),
            label: 'Camera',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: 'Chats',
          ),
        ],
      ),
      body: Center(
        child: Text('My Position: $_currentIndex'),
      ),
    );
  }

Here we can see that BottomNavigationBar has 3 important properties:

currentIndex: it is the current index of the bar. You can see it as the current focused element which should be shown.
onTap: called when you tap one of the BottomNavigationBar elements. Here most of the time goes the setState function which will change the currentIndex.
items: a list of BottomNavigationBarItem which are convenient Widgets to show bar elements. They already manage "selected" and "unselected" states and show on appropriate colors.

This is a really easy BottomBar that can be used to show different screens based on the _currentIndex. BottomNavigationBarItem explains by itself. Now let's see how to customize our BottomBar.

Let's Customize!

BottomNavigationBar can be easily customized by using its properties:

type: you can select between BottomNavigationBarType.shifting and BottomNavigationBarType.fixed. The first will highlight and center the selected tab, the second will fix the tab size and not enlarge them if selected.
backgroundColor: you can set a custom color to the background of the BottomNavigationBar
elevation: setting an elevation will cast a shadow on the BottomNavigationBar top part.
showSelectedLabels, showUnselectedLabels : choose to show labels or not for different situations.

Stylize the single buttons it's a bit more tricky, you can use these BottomNavigationBar properties to change colors, size and label, also it can be useful to change the Theme of the items.

selected/unselectedFontSize: takes a double to set text size.
selected/unselectedItemColor: sets color of the icons
selected/unselectedIconTheme: takes a IconThemeData object in which you can set how icons should appear
selected/unselectedLabelStyle: takes a TextStyle object i which you can set how labels should appear.

To change more deeply the appaerance of the BottomNavigationBar you can wrap it around a Theme object.

An example of a customized BottomNavigationBar can be something like this:

Here's the code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text('My Demo'),
      ),
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.red,
        unselectedItemColor: Colors.red,
        selectedFontSize: 18,
        unselectedFontSize: 12,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        selectedLabelStyle: TextStyle(color: Colors.white),
        unselectedLabelStyle: TextStyle(color: Colors.white24),
        selectedIconTheme: IconThemeData(color: Colors.white, size: 40),
        unselectedIconTheme: IconThemeData(color: Colors.white24, size: 20),
        currentIndex: _currentIndex,
        selectedItemColor: Colors.white,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.call),
            label: 'Chiamate',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera),
            label: 'Camera',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: 'Chats',
          ),
        ],
      ),
      body: Center(
        child: Text('My Position: $_currentIndex'),
      ),
    );
  }

There you are, this is a good BottomBar for your app!

You can change a lot of things if you wish with a bit of effort, like adding animations or make a gradient background, but now it's up to you to create an awesome Bottom Bar!

Wish to check more awesome tutorials? Click here!

Getting to know Flutter: Advanced use of ModalBottomSheet

TheOtherDev/s — Wed, 29 Sep 2021 15:03:28 +0000

Do you want to present a simple modal picker to the user or just show a nice feedback to a user action? In this tutorial you will learn how to use the showModalBottomSheet function.

Let's start by creating a simple bottom sheet, with a text and a button. As you can see to close a modal bottom sheet you will use the .pop() function of the Navigator, as you do when closing Scaffold Widgets.

class ModalBottomSheetsPage extends StatelessWidget {
  ModalBottomSheetsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Modal bottom sheets'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Show modal bottom sheet'),
          onPressed: () => _showBottomSheet(context),
        ),
      ),
    );
  }

  void _showBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) => SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 20.0),
          child: Container(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  'This is a Modal bottom sheet!',
                  style: Theme.of(context).textTheme.headline4,
                  textAlign: TextAlign.center,
                ),
                ElevatedButton(
                  child: const Text('Close BottomSheet'),
                  onPressed: () => Navigator.pop(context),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Let's add some fanciness and sound the top corners of our bottom sheet, this is incredibly easy, you just need to add the shape parameter to the showModalBottomSheet function, specifying the shape that we want to use.

    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
      ),
      builder: (context) => SafeArea(

Now we will do a more complex example, we will display in the bottom sheet a list of 100 elements, and the sheet will expand/collapse while the user scrolls through the list. To do so we will use the DraggableScrollableSheet widget.

This widget has been created to do this types of sheet, it has a builder function that exposes a ScrollController that we will need to use in our ListView to keep the scrolling of the list in sync with the state of the bottom sheet.

In this case we're also passing the index of the list tile pressed in the pop function, so we could use it later. It will be the result of the Future of the showModalBottomSheet function, and we're retrieving it awaiting onshowModalBottomSheet.

  Future<void> _showBottomSheet(BuildContext context) async {
    int? result = await showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      isDismissible: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
      ),
      builder: (context) => DraggableScrollableSheet(
        initialChildSize: 0.4,
        minChildSize: 0.2,
        maxChildSize: 0.9,
        expand: false,
        builder: (context, scrollController) => SafeArea(
          child: ListView.builder(
            controller: scrollController,
            itemCount: 100,
            itemBuilder: (context, index) => ListTile(
              title: Text(index.toString()),
              onTap: () => Navigator.of(context).pop(index),
            ),
          ),
        ),
      ),
    );

    print(result);
  }

Getting to know Flutter: Easy notifications with MBMessages

TheOtherDev/s — Wed, 22 Sep 2021 15:05:00 +0000

One of the most requested features when you develop an app are Push Notifications. Those messages are an awesome way to engage users with personalized content but may be a bit hard to implement "the good way". Here we want to show you how easy it is to implement on your Flutter application Push Notifications using the power of MBurger and the MBMessages library.

Initialize MBurger and add MBMessages

If you haven't done it already check out our article about Pull to Refresh to know how to create a new MBurger project. In a few words you'll need to:

Register for free on MBurger
Create a new project
Create an API Key

If you are unsure on how to do these steps refer this guide. Once you've done all of this you have to add MBMessages dependency to your project. Head over to this page and add it as your dependency:

dependencies:
  mbmessages: ^2.0.1

First step completed, well done!

Configure push notifications on MBurger

Next we'll configure push notifications on our app. Let's return on MBurger website and let's enable Push Notifications on settings. Here you can also enable integrations with other systems real easily.

By enabling it a new menu called "Engagement" on the left will appear. Here you'll have to configure MBurger to use the MPush subsystem in order to send Push Notifications.

Click on it and then on "Settings".

In this screen you'll see a generated token and two boxes, one for Android and one for iOS. You'll need to compile those boxes by linking your Firebase and AppStore Connect apps.

For iOS you'll need to create an APNS API Key (click here if you are not sure on how to achieve it), you'll also need to add your Apple Team ID and App Bundle. Once you have added all click on "Update". Be aware for the "Production" checkbox, if you're trying push notification on a development device keep this checkbox to off and enable it only one you'll go live.

Then you have to modify the AppDelegateclass of your application, open AppDelegate.swift file and add this line in the didFinishLaunchingWithOptions function.

UNUserNotificationCenter.current().delegate = self

The app delegate should look like this.

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    UNUserNotificationCenter.current().delegate = self
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

On Android side you'll need to create a Firebase project and configure it (refer to this guide). Lastly copy the FCM server key onto MBurger and give it a good "Update".

Remember for Android to add this to your project build.gradle file:

classpath 'com.google.gms:google-services:4.3.5'

and this to your app build.gradle

apply plugin: 'com.google.gms.google-services'

You are almost done, it's time to code!

Initialize MBMessages

This is a really easy part. You'll need to initialize MBurger and add MBMessages as a plugin, so it can be initialized and you can instantaneously start receiving messages.

Let's head over to your main widget and initialize MBurger with your personal API Key:

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    MBManager.shared.apiToken = "MY_API_KEY";
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MBMessages',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter MBMessages'),
    );
  }
}

This way you'll have initialized MBurger, now we need to add MBMessages and initialize it with the key provided on MBurger.

MBMessages.pushToken = "MY_ENGAGEMENT_TOKEN";
MBManager.shared.plugins = [MBMessages()];

Next you'll need to use MBMessages.configurePush and implement these methods:

onNotificationArrival -> called when a Push Notification arrives on your device
onNotificationTap -> called when a Push Notification is tapped

Lastly you'll need to set the Android notification channel for push notifications. You should provide a name, description and id for your channel as well as an icon stored in drawable or mipmap folders on Android part.

MBMessages.configurePush(
      onNotificationArrival: (notification) {
        print("Notification arrived: $notification");
      },
      onNotificationTap: (notification) {
        print("Notification tapped: $notification");
      },
      androidNotificationsSettings: MPAndroidNotificationsSettings(
        channelId: 'messages_example',
        channelName: 'mbmessages',
        channelDescription: 'mbmessages',
        icon: '@mipmap/ic_launcher',
      ),
    );

Next you'll need to implement the onToken method found on MBMessages. This is called when you register your device for receiving push notifications. You can easily then register to the topics you want after it. MBMessages provides already 2 "standard" topics, one for all users and one dedicated to single devices:

await MBMessages.projectPushTopic(),
await MBMessages.devicePushTopic(),

The code for this step will result like this:

MBMessages.onToken = (token) async {
      print("Token received $token");
      await MBMessages.registerDevice(token).catchError(
        (error) => print(error),
      );
      await MBMessages.registerToTopics(
        [
          await MBMessages.projectPushTopic(),
          await MBMessages.devicePushTopic(),
        ],
      );
      print('Registered');
    };

Lastly you'll need to request a token from Firebase and APNS, then if you followed this tutorial your device will be registered for push notifications.

    await MBMessages.requestToken().catchError(
      (error) => print(error),
    );

That's it! You have set up push notifications!

Try it!

Now it's time to check if everything is working properly! On MBurger click on Engagement -> Messages. Create a new push message and see the magic unfolds!

Where to go now?

With MBMessage you can also create awesome in-app messages and handle Push Notifications in a more detailed way, check out the pub.dev page to know more!

Wish to check on more awesome Flutter tutorials? Click here!

Mastering Flutter: Animations Part 2

TheOtherDev/s — Wed, 15 Sep 2021 14:58:42 +0000

This is the second part of a series of tutorials to build animations with Flutter. In this pat we will learn how to use the Animations and AnimationControllers, to build more precise animations.

The final result will be like this video, you can find the asset of the image that we've used here:

The first thing that we need to do is to create our Ghost Widget that we will use to build the animation.

import 'package:flutter/material.dart';

class Ghost extends StatelessWidget {
  const Ghost({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: Image.asset(
        'images/ghost.png',
        fit: BoxFit.contain,
      ),
    );
  }
}

Then, let's create a Stateful Widget that will represent our Scaffold, with the Ghost in the center of the screen.

import 'package:flutter/material.dart';

import 'ghost.dart';

class AnimationsScaffold extends StatefulWidget {
  AnimationsScaffold({Key? key}) : super(key: key);

  @override
  _AnimationsScaffoldState createState() => _AnimationsScaffoldState();
}

class _AnimationsScaffoldState extends State<AnimationsScaffold> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animations'),
      ),
      body: Center(
        child: Ghost(),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('Start'),
        onPressed: () {},
      ),
    );
  }
}

If you analyze the final result that we want to obtain you can see that we have 2 animations.
We need to change the position and the scale of our ghost, together.
So we will need 2 animations and one animation controller to control them.
Let's define and initialize them in our state.

class _AnimationsScaffoldState extends State<AnimationsScaffold>
    with TickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _positionAnimation;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    const int totalAnimationDuration = 3;
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: totalAnimationDuration),
    );

    _positionAnimation = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Interval(
          0.0,
          0.35,
          curve: Curves.linear,
        ),
      ),
    );

    _scaleAnimation = TweenSequence<double>(
      [
        TweenSequenceItem(tween: Tween(begin: 0.0, end: 1.25), weight: 35.0),
        TweenSequenceItem(tween: Tween(begin: 1.25, end: 1), weight: 65.0),
      ],
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.linear,
      ),
    );

    _animationController.forward();

    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();

    super.dispose();
  }

As you can see the AnimationController object needs a async property with is an object that conforms to TickerProvider, we can use our state object declaring the TickerProviderStateMixin mixin.
We've defined the position animation that goes from 0 to 1 in the first 35% part of the duration of the whole animation.
Then we've defined the scale animation that goes from 0 to 1.25 in the first 35% part of the animation (using the weight parameter) and then it scales back from 1.25 to 1.0 in the rest 65%.
Note that we need to dispose the animation controller in the dispose method of our widget.

Now let's use those animations in our build method, using an AnimatedBuilder. The AnimatedBuilder takes the animation object as a parameter (we're using the animation controller) and a builder that will be called when the values of the animations are updated.
It has also a child parameter, that will be passed in the builder function, to prevent unnecessary builds, we're using the Ghost widget here.

...
      body: Stack(
        children: [
          AnimatedBuilder(
            animation: _animationController,
            builder: (context, child) {
              double initialPositionY = -cardSize;
              double finalPositionY =
                  MediaQuery.of(context).size.height / 2 - cardSize / 2;
              return Positioned(
                bottom: initialPositionY +
                    (finalPositionY - initialPositionY) *
                        _positionAnimation.value,
                left: MediaQuery.of(context).size.width / 2 - cardSize / 2,
                child: Transform.scale(
                  scale: _scaleAnimation.value,
                  child: child,
                ),
              );
            },
            child: Ghost(),
          ),
        ],
      ),
...

We're done! 🎉
We have our animation that starts when the Widget is created.
The only little piece that's missing is to connect the floating action button to restart the animation. There's nothing as easy as this: you just need to call the reset function of the animation controller and then the forward function to start the animation.

      floatingActionButton: FloatingActionButton(
        child: Text('Start'),
        onPressed: () {
          _animationController.reset();
          _animationController.forward();
        },
      ),

Want to check new Flutter tutorials every week? Look at our site!

Getting to know Flutter: Pull to refresh with online data

TheOtherDev/s — Thu, 09 Sep 2021 15:13:49 +0000

Hi there! How you're doing? Everything's all right? Good. Today we 'll be doing a pretty easy task, a pull to refresh, while using a CMS in order to have online data and having more control on our example. Let's start!

What we'll need

Our ingredients will be:

A CMS account (we'll be using MBurger as it is free to start)
Android Studio
Flutter basic knowledge

I think it's a pretty easy recepie but it will also be very juicy!

MBurger configuration

First we'll need to create a free account on MBurger, go to this page to start. Then we can create a new project or use one provided template. We'll start from scratch.

Second we'll create a new block for our app. A block contains a list of sections which will be composed by:

Title -> Text
Content -> Text

We'll call it "Articles"

Next we'll create how our articles are composed. As we stated before we want to just add a title and a simple content, so we'll create 2 text elements.

As last thing we just need to create a section, so an article. We'll click on "Add Articles section" and create a simple Lorem Ipsum.

MBurger SDK

Before venturing into the depths of the MBurger SDK we'll need to create a API Key, which will be used to connect to our MBurger project in the app. Let's head to the settings and create an API Key. For our project we don't need anything more than read permissions, but we can also add write and delete permissions for our API Key.

We have done for now on MBurger website. Let's head to MBurger pub.dev!

Let's add MBurger dependency to a new Flutter project:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0
  mburger: ^2.0.7

Then on initState method let's add our API Key:

@override
  void initState() {
    MBManager.shared.apiToken = 'MYAPIKEY';
    super.initState();
  }

Then let's create an easy list and a Future for getting and parsing our data. We should need the block id of our articles block, which can be found directly in the MBurger dashboard.

@override
  void initState() {
    MBManager.shared.apiToken = 'MYAPIKEY';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
      ),
      backgroundColor: Colors.white,
      body: FutureBuilder<List<Article>>(
        future: getArticles(context),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                Article article = snapshot.data[index];
                return Column(
                  children: [
                    Text(article.title),
                    Text(article.content),
                  ],
                );
              },
            );
          }

          return Container();
        },
      ),
    );
  }

  Future<List<Article>> getArticles(BuildContext context) async {
    MBPaginatedResponse<MBSection> response =
        await MBManager.shared.getSections(
      blockId: MYBLOCK_ID,
      includeElements: true,
    );
    if (response.items != null) {
      List<Article> sections = response.items
          .map((section) => Article.fromSection(section))
          .toList();

      return sections;
    }
    return [];
  }
class Article {
  String title;
  String content;

  Article.fromSection(MBSection section) {
    var elements = section.elements;
    elements.forEach((key, element) {
      if (key == 'title' && element is MBTextElement) {
        title = element.value;
      } else if (key == 'content' && element is MBTextElement) {
        content = element.value;
      }
    });
  }
}

Pull to refresh implementation

We have all set, let's add our pull to refresh. Let's go to pub.dev and let's implement pull_to_refresh!

First we'll need to create a RefreshController, which will be attached to our Refresher:

  final RefreshController refreshControllerList =
      RefreshController(initialRefresh: false);

Now wrap the ListView around a SmartRefresher, which is the main widget controlling the pull-to-refresh behavior. SmartRefresher has a lot of customization options, you can check more on the official page on pub.dev.

return SmartRefresher(
              controller: refreshControllerList,
              enablePullDown: true,
              onRefresh: () => _onRefresh(context),
              child: ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) {
                  Article article = snapshot.data[index];
                  return Column(
                    children: [
                      Text(article.title),
                      Text(article.content),
                    ],
                  );
                },
              ),
            );

The onRefresh parameter should point to an async function which should call again our future:

void _onRefresh(BuildContext context) async {
    try {
      await getArticles(context);
      refreshControllerList.refreshCompleted();
      setState(() {});
    } catch (error) {
      refreshControllerList.refreshFailed();
      print(error);
    }
  }

While the app is open then we'll need to add a new section to our MBurger project. Then with a swipe the list will be refreshed and we'll see the new item on our list. All done!!

Want to check more awesome tutorials? Click here!