Integrating Huawei Account, Banner and Splash Ads in Flutter StoryApp
Tags: huaweiaccountkit, huaweiadsk, huaweideveloper, hmscore
Published: 2022-02-25 11:02:25

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/salp5llk3zwynjjyp4vu.png)

Introduction

In this article, we will be integrating Huawei Account, Banner and Splash Ads kit in Flutter StoryApp. Flutter plugin provides simple and convenient way to experience authorization of users. Flutter Account Plugin allows users to connect to the Huawei ecosystem using their Huawei IDs from the different devices such as mobiles phones and tablets, added users can login quickly and conveniently sign in to apps with their Huawei IDs after granting initial access permission.

Huawei Ads kit provides access to range of development capabilities. You can promote your apps quickly and more efficiently to Huawei’s vast users. Ads kit helps your app to monetize quickly and start generating revenue.

Huawei supports following Ads

Banner
Interstitial
Native
Reward
Splash
Instream(Roll)
Development Overview

You need to install Flutter and Dart plugin in IDE and I assume that you have prior knowledge about the Flutter and Dart.

Hardware Requirements

A computer (desktop or laptop) running Windows 10.
A Huawei phone (with the USB cable), which is used for debugging.
Software Requirements

Java JDK 1.7 or later.
Android studio software or Visual Studio or Code installed.
HMS Core (APK) 4.X or later.
Integration process

Step 1: Create Flutter project.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztbf1eh0fw484c7v9d5m.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tirxh0aacbtkt0ztqh5r.png)

Step 2: Add the App level gradle dependencies.

Choose inside project Android > app > build.gradle.

`apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'`

Root level gradle dependencies
`maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.4.1.300'`

Step 3: Add the below permissions in Android Manifest file.

`<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="com.huawei.appmarket.service.commondata.permission.GET_COMMON_DATA"/>`
Step 4: Download flutter plugins

Step 5: Add downloaded file into parent directory of the project. Declare plugin path in pubspec.yaml file under dependencies.

Add path location for asset image.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y73a8k7sakdiivhs6xwp.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b86e52f95gl5e949ucx2.png)
Let's start coding

loginScreen.dart

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginDemo(),
    );
  }
}

class LoginDemo extends StatefulWidget {
  @override
  _LoginDemoState createState() => _LoginDemoState();
}

class _LoginDemoState extends State<LoginDemo> {
  final HMSAnalytics _hmsAnalytics = new HMSAnalytics();
  @override
  void initState() {
    HwAds.init();
    showSplashAd();
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Login Page"),
        backgroundColor: Colors.grey[850],
      ),
      body: RefreshIndicator(
        onRefresh: showToast,
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 60.0),
                child: Center(
                  child: Container(
                      width: 200,
                      height: 150,
                      decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(60.0)),
                      child: Image.asset('images/logo_huawei.png')),
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15),
                child: TextField(
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Email',
                      hintText: 'Enter valid email id '),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(
                    left: 15.0, right: 15.0, top: 15, bottom: 0),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Password',
                      hintText: 'Enter password'),
                ),
              ),
              FlatButton(
                onPressed: () {
                  //TODO FORGOT PASSWORD SCREEN GOES HERE
                },
                child: Text(
                  'Forgot Password',
                  style: TextStyle(color: Colors.blue, fontSize: 15),
                ),
              ),
              Container(
                height: 50,
                width: 270,
                decoration: BoxDecoration(
                    color: Colors.red, borderRadius: BorderRadius.circular(20)),
                child: FlatButton(
                  onPressed: () async {
                    try {
                      try {
                        final bool result = await AccountAuthService.signOut();
                        if (result) {
                          final bool response =
                              await AccountAuthService.cancelAuthorization();
                        }
                      } on Exception catch (e) {
                        print(e.toString());
                      }
                    } on Exception catch (e) {
                      print(e.toString());
                    }
                  },
                  child: GestureDetector(
                    onTap: () async {
                      try {
                        final bool response =
                            await AccountAuthService.cancelAuthorization();
                      } on Exception catch (e) {
                        print(e.toString());
                      }
                    },
                    child: Text(
                      'Login',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 5,
              ),
              Container(
                height: 50,
                width: 270,
                decoration: BoxDecoration(
                    color: Colors.red, borderRadius: BorderRadius.circular(20)),
                child: HuaweiIdAuthButton(
                    theme: AuthButtonTheme.FULL_TITLE,
                    buttonColor: AuthButtonBackground.RED,
                    borderRadius: AuthButtonRadius.MEDIUM,
                    onPressed: () {
                      signInWithHuaweiAccount();
                    }),
              ),
              SizedBox(
                height: 30,
              ),
              GestureDetector(
                onTap: () {
                  //showBannerAd();
                },
                child: Text('New User? Create Account'),
              ),
            ],
          ),
        ),
      ),
    );
  }
  
  void signInWithHuaweiAccount() async {
    AccountAuthParamsHelper helper = new AccountAuthParamsHelper();

    helper.setAuthorizationCode();
    try {
      // The sign-in is successful, and the user's ID information and authorization code are obtained.
      Future<AuthAccount> account = AccountAuthService.signIn(helper);
      account.then((value) => Fluttertoast.showToast(
          msg: "Welcome " + value.displayName.toString(),
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
          timeInSecForIosWeb: 1,
          backgroundColor: Colors.red,
          textColor: Colors.white,
          fontSize: 16.0));
      Navigator.push(
          context, MaterialPageRoute(builder: (_) => StoryListScreen()));
    } on Exception catch (e) {
      print(e.toString());
    }
  }

  Future<void> showToast() async {
    Fluttertoast.showToast(
        msg: "Refreshing.. ",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.lightBlue,
        textColor: Colors.white,
        fontSize: 16.0);
  }
  
//Show Splash Ad
  void showSplashAd() {
    SplashAd _splashAd = createSplashAd();
    _splashAd
      ..loadAd(
          adSlotId: "testq6zq98hecj",
          orientation: SplashAdOrientation.portrait,
          adParam: AdParam(),
          topMargin: 20);

    Future.delayed(Duration(seconds: 10), () {
      _splashAd.destroy();
    });
  }

  SplashAd createSplashAd() {
    SplashAd _splashAd = new SplashAd(
      adType: SplashAdType.above,
      ownerText: ' Huawei SplashAd',
      footerText: 'Test SplashAd',
    ); // Splash Ad
    return _splashAd;
  }
}

```
storyListScreen.dart

```
class StoryListScreen extends StatefulWidget {
  @override
  _StoryListScreenState createState() => _StoryListScreenState();
}

class _StoryListScreenState extends State<StoryListScreen> {
  final _itemExtent = 56.0;
  final generatedList = List.generate(22, (index) => 'Item $index');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stories'),
      ),
      backgroundColor: Colors.white,
      body: CustomScrollView(
        controller: ScrollController(initialScrollOffset: _itemExtent * 401),
        slivers: [
          SliverFixedExtentList(
            itemExtent: _itemExtent,
            delegate: SliverChildBuilderDelegate(
              (context, index) => Card(
                margin: EdgeInsets.only(left: 12, right: 12, top: 5, bottom: 5),
                child: Center(
                  child: GestureDetector(
                    onTap: () {
                      showStory(index);
                    },
                    child: ListTile(
                      title: Text(
                        storyTitles[index],
                        style: TextStyle(
                            fontSize: 22.0, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ),
              ),
              childCount: storyTitles.length,
            ),
          ),
        ],
      ),
    );
  }

  void showStory(int index) {
    print(storyTitles[index] + " Index :" + index.toString());
    Navigator.push(
        context, MaterialPageRoute(builder: (_) => StoryDetails(index)));
  }
}


```
storyDetails.dart

```
class StoryDetails extends StatefulWidget {
  int index;
  StoryDetails(this.index);
  @override
  _StoryDetailsState createState() => new _StoryDetailsState(index);
}
class _StoryDetailsState extends State<StoryDetails> {
  int index;
  BannerAd? _bannerAd = null;
  _StoryDetailsState(this.index);
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    showBannerAd();
  }
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _onBackPressed,
      child: Scaffold(
          appBar: AppBar(
            title: Text(storyTitles[index]),
          ),
          backgroundColor: Colors.white,
          body: SafeArea(
            child: SingleChildScrollView(
              child: Padding(
                padding: EdgeInsets.only(left: 5, right: 5, top: 3, bottom: 50),
                child: Column(children: <Widget>[
                  Card(
                    child: Image.asset(
                        "images/image_0" + index.toString() + ".png"),
                  ),
                  Card(
                      child: Text(
                    storyDetails[index],
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.normal,
                        fontSize: 20),
                  )),
                  Center(
                    child: Image.asset(
                      "images/greeting.gif",
                      height: 320.0,
                      width: 620.0,
                    ),
                  ),
                ]),
              ),
            ),
          )),
    );
  }
  void showBannerAd() {
    _bannerAd = createBannerAd();
    _bannerAd!
      ..loadAd()
      ..show(gravity: Gravity.bottom, offset: 1);
  }
  //Create BannerAd
  static BannerAd createBannerAd() {
    BannerAd banner = BannerAd(
        adSlotId: "testw6vs28auh3",
        size: BannerAdSize.sSmart,
        adParam: AdParam());
    banner.setAdListener = (AdEvent event, {int? errorCode}) {
      print("Banner Ad event : $event " + banner.id.toString());
    };

    return banner;
  }
  Future<bool> _onBackPressed() async {
    if (_bannerAd != null) {
      _bannerAd?.destroy();
    }
    return true;
  }
}

```
Result


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73v33sofyvnuaew0h9zl.gif)

Tricks and Tips

Make sure that downloaded plugin is unzipped in parent directory of project.
Makes sure that agconnect-services.json file added.
Make sure dependencies are added yaml file.
Run flutter pug get after adding dependencies.
Make sure that service is enabled in agc.
Makes sure images are defined in yaml file.
Conclusion

we have learnt how to integrate Huawei Account kit and Huawei Banner and Splash Ads in Flutter StoryApp. Once Account kit integrated, users can login quickly and conveniently sign in to apps with their Huawei IDs after granting initial access permission. Banner and Splash Ads helps you to monetize your StoryApp.

Thank you so much for reading, and also I would like to 'thanks author for write-ups'. I hope this article helps you to understand the integration of Huawei Account kit, Huawei Banner and Splash Ads in flutter StoryApp.

Reference

[Ads Kit](https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/publisher-service-0000001050196431)

[StoryAuthors](https://momlovesbest.com/short-moral-stories-kids)

Ads Kit – [Training Video](https://developer.huawei.com/consumer/en/training/course/video/101582989856737152)

Account Kit – [Training Video](https://developer.huawei.com/consumer/en/training/course/video/101584324766101108)