Categories
Flutter Flutter Tutorial

Flutter Tutorial: Animated Curved Navigation Bar Package

Welcome to Flutter tutorial, today we are going to discuss on how to implement Animated Curved Navigation Bar in to your android or iOS application.

by using the Flutter curved navigation bar plugin you can create flutter custom bottom navigation bar in your project.

Package name: curved_navigation_bar

How to add dependency for animated curved navigation bar flutter package

Flutter Bottom Navigation Bar Animation

Curved Navigation Bar

add this line into your project pubspec.yaml file under dependency section.

Be sure indentation is correct.

If your indentation goes wrong it will generate error.

dependencies:
  curved_navigation_bar: ^0.3.1 #latest version

Run commend in commend line

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import this line at the beginning in you main.dart file

import 'package:curved_navigation_bar/curved_navigation_bar.dart';

In .yaml file # sign is used for comments any line or text.

Now assign this widget as Scaffold attribute value for bottom Navigation Bar:

Flutter Bottom Navigation Bar Animation Sample Code:

Scaffold(
  bottomNavigationBar: CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: <Widget>[
      Icon(Icons.add, size: 30),
      Icon(Icons.list, size: 30),
      Icon(Icons.compare_arrows, size: 30),
    ],
    onTap: (index) {
      //Handle button tap
    },
  ),
  body: Container(color: Colors.blueAccent),
)

This widgets has nine configurable attributes, by using the attributes you can easily customize the widgets as you like.

Attributes:

items: List of Widgets
index: index of NavigationBar, can be used to change current index or to set initial index
color: Color of NavigationBar, default Colors.white
buttonBackgroundColor: background color of floating button, default same as color attribute
backgroundColor: Color of NavigationBar’s background, default Colors.blueAccent
onTap: Function handling taps on items
animationCurve: Curves interpolating button change animation, default Curves.easeOutCubic
animationDuration: Duration of button change animation, default Duration(milliseconds: 600)
height: Height of NavigationBar, min 0.0, max 75.0

Flutter Bottom Navigation Bar Animation Example App

Curved Navigation Bar

Create new project:

flutter create flutter_curved_navigation_bar 

Open the pubspec.yaml file and add this under dependencies section.

name: flutter_curved_navigation_bar
description: A new Flutter project.

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  curved_navigation_bar: ^0.3.0 #latest version

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _page = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        items: <Widget>[
          Icon(Icons.add, size: 30),
          Icon(Icons.list, size: 30),
          Icon(Icons.compare_arrows, size: 30),
        ],
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
      body: Container(
        color: Colors.blueAccent,
        child: Center(
          child: Column(
            children: <Widget>[
              Text(_page.toString(), textScaleFactor: 10.0),
              RaisedButton(
                child: Text('Go To Page of index 1'),
                onPressed: () {
                  //Page change using state does the same as clicking index 1 navigation button
                  final CurvedNavigationBarState navBarState =
                      _bottomNavigationKey.currentState;
                  navBarState.setPage(1);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

flutter bottom navigation bar animation make you app interface more attractive and custom bottom navigation bar make flutter app more flexible.

Github Link: https://github.com/siddik12/flutter_curved_navigation_bar

Flutter admob example

Categories
Flutter Flutter Tutorial

Flutter AdMob Banner Ads Integration Tutorial

In this article we are going to show you how to integrate flutter admob banner ads in to your flutter app very easy.

Flutter admob tutorial

Flutter Firebase Admob Example

Firebase admob flutter plugin is developed and maintain by Flutter team. so you can get all the latest update with support if you use this plugin in your project.

Package: firebase_admob

This flutter plugin support banner ads, interstitial ads and rewarded video ads using the Firebase AdMob API.

How to install flutter plugins in your project?

to add this plugin to your package’s pubspec.yaml file:

dependencies:
  firebase_admob: ^0.9.0+7

Now run this command in command line

$ flutter pub get

Import the package where you want to use this

import 'package:firebase_admob/firebase_admob.dart';

In android update your AndroidManifest.xml file by adding this line of code

<manifest>
    <application>
        <!-- TODO: Replace with your real AdMob app ID -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-################~##########"/>
    </application>
</manifest>

where [ADMOB_APP_ID] is your App ID. You must pass the same value when you initialize the plugin in your Dart code.

In order to setup the plugin for iOS you should update your Info.plist by adding these two keys:

<dict>
	<key>GADApplicationIdentifier</key>
	<string>ca-app-pub-################~##########</string>
</dict>

where [ADMOB_APP_ID] is your App ID.

Initializing the flutter plugin

First of all the AdMob plugin must be initialized with an AdMob App ID.

FirebaseAdMob.instance.initialize(appId: appId);

In main.dart file

import 'package:firebase_admob/firebase_admob.dart';

You can also test with your own ad unit IDs by registering your device as a test device. Check the logs for your device’s ID value. for this add this code in main.dart file

const String testDevice = 'YOUR_DEVICE_ID';

You can send Mobile Ad Targeting Info by adding this code into your main.dart file

MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
  keywords: <String>['flutterio', 'beautiful apps'],
  contentUrl: 'https://flutter.io',
  birthday: DateTime.now(),
  childDirected: false,
  designedForFamilies: false,
  gender: MobileAdGender.male, // or MobileAdGender.female, MobileAdGender.unknown
  testDevices: <String>[], // Android emulators are considered test devices
);

Add a variable for banner ads

 BannerAd _bannerAd;

Create banner Ads method

BannerAd createBannerAd() {
    return BannerAd(
      adUnitId: BannerAd.testAdUnitId,
      size: AdSize.banner,
      targetingInfo: targetingInfo,
      listener: (MobileAdEvent event) {
        print("BannerAd event $event");
      },
    );
  }

Limitations of This Plugin

This is just an initial version of the plugin. There are still some limitations:

  • Banner ads cannot be animated into view.
  • It’s not possible to specify a banner ad’s size.
  • There’s no support for native ads.
  • The existing tests are fairly rudimentary.
  • There is no API doc.
  • The example should demonstrate how to show gate a route push with an interstitial ad