Forem: siddums

Integration of Huawei ML Kit Text To Speech [TTS] - Listen to your story in Flutter StoryApp

siddums — Fri, 04 Mar 2022 11:24:17 +0000

Introduction

In this article, we will be integrating Huawei ML kit in Flutter StoryApp to listen stories using ML kit Text To Speech (TTS). ML Kit provides diversified leading machine learning capabilities that are easy to use, helping you to develop various AI apps. ML Kit allows your apps to easily leverage Huawei's long-term proven expertise in machine learning to support diverse artificial intelligence (AI) applications throughout a wide range of industries.

In this flutter sample application, we are using Language/Voice-related services, services are as follows.

Real-time translation: Translates text from the source language into the target language through the server on the cloud.
On-device translation: **Translates text from the source language into the target language with the support of an on-device model, even when no Internet service is available.
**Real-time language detection: Detects the language of text online. Both single-language text and multi-language text are supported.
On-device language detection: Detects the language of text without Internet connection. Both single-language text and multi-language text are supported.
Automatic speech recognition: Converts speech (no longer than 60 seconds) into text in real time.
Automatic speech recognition: Converts speech (no longer than 60 seconds) into text in real time.
Text to speech: **Converts text information into audio output online in real time. Rich timbres, and volume and speed options are supported to produce more natural sounds.
**On-device text to speech: Converts text information into speech with the support of an on-device model, even when there is no Internet connection.
Audio file transcription: Converts an audio file (no longer than 5 hours) into text. The generated text contains punctuation and timestamps. Currently, the service supports Chinese and English.
Real-time transcription: Converts speech (no longer than 5 hours) into text in real time. The generated text contains punctuation and timestamps.
Sound detection: Detects sound events in online (real-time recording) mode. The detected sound events can help you perform subsequent actions.
Supported Devices

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.
Android 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.

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.CAMERA" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
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.

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 = 0;
  MLTtsEngine? engine = null;
  bool toggle = false;
  BannerAd? _bannerAd = null;

  bool isPaused = false;

  _StoryDetailsState(this.index);

  @override
  void initState() {
    // TODO: implement initState

    initML();
    showBannerAd();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _onBackPressed,
      child: Scaffold(
          appBar: AppBar(
            title: Text(storyTitles[index]),
            actions: <Widget>[
              IconButton(
                  icon: toggle
                      ? Icon(Icons.pause_circle_filled_outlined)
                      : Icon(
                          Icons.play_circle_fill_outlined,
                        ),
                  onPressed: () {
                    setState(() {
                      // Here we changing the icon.
                      toggle = !toggle;
                      if (toggle) {
                        if (!isPaused) {
                          // do something
                          print("......Play.....");
                          final stream = storyDetails[index].splitStream(
                            chunkSize: 499,
                            splitters: [','],
                            delimiters: [r'\'],
                          );
                          play(stream);
                        } else {
                          MLTtsEngine().resume();
                          isPaused = false;
                        }
                      } else {
                        isPaused = true;
                        MLTtsEngine().pause();
                      }
                    });
                  }),
            ],
          ),
          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();
    }
    if (engine != null) {
      engine!.stop();
    }
    return true;
  }
  Future<void> playStory(String parts) async {
    // Create MLTtsConfig to configure the speech.
    final config = MLTtsConfig(
      language: MLTtsConstants.TTS_EN_US,
      synthesizeMode: MLTtsConstants.TTS_ONLINE_MODE,
      text: parts,
    );
    // Create an MLTtsEngine object.
    engine = new MLTtsEngine();

    // Set a listener to track tts events.
    engine?.setTtsCallback(MLTtsCallback(
      onError: _onError,
      onEvent: _onEvent,
      onAudioAvailable: _onAudioAvailable,
      onRangeStart: _onRangeStart,
      onWarn: _onWarn,
    ));

// Start the speech.
    await engine?.speak(config);
  }

  void _onError(String taskId, MLTtsError err) {

    print(err.errorMsg);
  }

  void _onEvent(String taskId, int eventId) {

  }

  void _onAudioAvailable(
      String taskId, MLTtsAudioFragment audioFragment, int offset) {

  }

  void _onRangeStart(String taskId, int start, int end) {

  }

  void _onWarn(String taskId, MLTtsWarn warn) {

  }

  Future<void> initML() async {
    MLLanguageApp().setApiKey(
        "DAED8900[p0-tu7au4ZHZuWDrR7oKps/WybCAJ0IOi7UdLfIlsIu9C4pEw0OSNA==");
  }

  Future<void> play(Stream<List<String>> stream) async {
    int i = 0;
    await for (List<String> parts in stream) {

      // print(parts);
      if (i == 0) {
        playStory(parts.toString());
      }
      i++;
    }
  }
}

Result

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.
Make sure that permissions are added in Manifest file.
Conclusion

In this article, we have learnt how to integrate Huawei ML kit Text to Speech in Flutter StoryApp. It supports maximum of 500 character for one request to convert Text to Speech. 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 ML Kit, Banner and Splash Ads in flutter StoryApp.

Reference

ML Kit Text To Speech

StoryAuthors

Account Kit – Training Video

ML Kit – Training Video
Checkout in forum

Integrating Huawei Account, Banner and Splash Ads in Flutter StoryApp

siddums — Fri, 25 Feb 2022 11:02:25 +0000

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.

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.

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

Tricks and Tips

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

StoryAuthors

Ads Kit – Training Video

Account Kit – Training Video

Implementing Huawei Analytics and Ads kit in Flutter StoryApp

siddums — Fri, 18 Feb 2022 13:37:10 +0000

Introduction

In this article, we will be integrating Huawei Account, Analytics and Ads kit in 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 be monetize quickly and start generating revenue.

Huawei supports following Ads types

Banner
Interstitial
Native
Reward
Splash
Instream(Roll)
Flutter Analytics Plugin provides wider range of predefined analytics models to get more insight into your application users, products, and content. With this insight, you can prepare data-driven approach to market your apps and optimize your products based on the analytics.

With Analytics Kit's on-device data collection SDK, you can:

Collect and report custom events.
Set a maximum of 25 user attributes.
Automate event collection and session calculation.
Pre-set event IDs and parameters.
Restrictions

Devices:

a. Analytics Kit depends on HMS Core (APK) to automatically collect the following events: INSTALLAPP (app installation), UNINSTALLAPP (app uninstallation), CLEARNOTIFICATION (data deletion), INAPPPURCHASE (in-app purchase), RequestAd (ad request), DisplayAd (ad display), ClickAd (ad tapping), ObtainAdAward (ad award claiming), SIGNIN (sign-in), and SIGNOUT (sign-out). These events cannot be automatically collected on third-party devices where HMS Core (APK) is not installed (including but not limited to OPPO, vivo, Xiaomi, Samsung, and OnePlus).

b. Analytics Kit does not work on iOS devices.

Number of events:

A maximum of 500 events are supported.

Number of event parameters:

You can define a maximum of 25 parameters for each event, and a maximum of 100 event parameters for each project.

Supported countries/regions

The service is now available only in the countries/regions listed in Supported Countries/Regions.

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.

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.
`

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.

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 {

final HMSAnalytics _hmsAnalytics = new HMSAnalytics();

@override

void initState() {

// TODO: implement initState

HwAds.init();

_enableLog();

_predefinedEvent();

showBannerAd();

super.initState();

}

Future _enableLog() async {

_hmsAnalytics.setUserId("TestUserStoryApp");

await _hmsAnalytics.enableLog();

}

void _predefinedEvent() async {

String name = HAEventType.SIGNIN;

dynamic value = {HAParamType.ENTRY: 06534797};

await _hmsAnalytics.onEvent(name, value);

print("Event posted");

}

@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: [

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 {

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 showBannerAd() {

BannerAd _bannerAd;

_bannerAd = createBannerAd();

_bannerAd

..loadAd()

..show(gravity: Gravity.bottom, offset: 5);

}

//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");

};

return banner;

}

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 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: (_) => Main1()));

} on Exception catch (e) {

print(e.toString());

}

Future showToast() async {

Fluttertoast.showToast(

msg: "Refreshing.. ",

toastLength: Toast.LENGTH_SHORT,

gravity: ToastGravity.CENTER,

timeInSecForIosWeb: 1,

backgroundColor: Colors.lightBlue,

textColor: Colors.white,

fontSize: 16.0);

}

BannerAd createAd() {

return BannerAd(

adSlotId: "testw6vs28auh3",

size: BannerAdSize.s468x60,

adParam: AdParam(),

);

}

Main.dart

`class Main extends StatefulWidget {

@override

_Main1State createState() => _Main1State();

}

var cardAspectRation = 12.0 / 20.0;

var widgetAspectRatio = cardAspectRation * 1.2;

var verticalInset = 20.0;

class _Main1State extends State {

var currentPage = images.length - 1.0;

bool isMenuClosed = true;

late double screenWidth;

final HMSAnalytics _hmsAnalytics = new HMSAnalytics();

@override

void dispose() {

// SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

super.dispose();

}

@override

initState() {

// SystemChrome.setEnabledSystemUIOverlays([]);

super.initState();

_enableLog();

}

Future _enableLog() async {

_hmsAnalytics.setUserId("TestUserStoryApp");

await _hmsAnalytics.enableLog();

}

@override

Widget build(BuildContext context) {

// The initial todos

PageController controller = PageController(initialPage: images.length - 1);

controller.addListener(() {

setState(() {

currentPage = controller.page!;

});

Size size = MediaQuery.of(context).size;

screenWidth = size.width;

return Scaffold(

backgroundColor: Colors.grey[850],

body: Stack(

children: [

menu(context),

dashboard(context),

);

}

Widget menu(context) {

return Padding(

padding: EdgeInsets.fromLTRB(0, 0, screenWidth * 0.15, 0),

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Flexible(

flex: 4,

child: Container(

color: Colors.grey[850],

child: Align(

alignment: Alignment.center,

child: circularImage(),

Flexible(

flex: 6,

child: Container(

child: Row(

children: [

Flexible(

child: Column(

children: [

Flexible(

child: GestureDetector(

onTap: () {

print("Clicked on Ads");

Navigator.push(

context,

MaterialPageRoute(

builder: (_) => SecondScreen()));

child: Container(

decoration: new BoxDecoration(

color: Color.fromRGBO(218, 107, 107, 1),

borderRadius: new BorderRadius.only(

topLeft: const Radius.circular(80.0))),

child: Align(

alignment: Alignment.center,

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Icon(

Icons.headset,

color: Colors.white,

size: 50,

Text('Ads',

style: TextStyle(

color: Colors.white, fontSize: 22))

Flexible(

child: GestureDetector(

onTap: () {

print("Clicked on browse");

child: Container(

color: Color.fromRGBO(211, 96, 96, 1),

child: Align(

alignment: Alignment.center,

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Icon(

Icons.satellite,

color: Colors.white,

size: 50,

Text('Browse',

style: TextStyle(

color: Colors.white, fontSize: 22))

)

Flexible(

child: Column(

children: [

Flexible(

child: GestureDetector(

onTap: () {

print("Clicked on Analytics");

sendCustomEvent();

child: Container(

decoration: new BoxDecoration(

color: Color.fromRGBO(211, 96, 96, 1),

borderRadius: new BorderRadius.only(

topRight: const Radius.circular(80.0))),

child: Align(

alignment: Alignment.center,

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Icon(

Icons.assignment,

color: Colors.white,

size: 50,

Text('Analytics',

style: TextStyle(

color: Colors.white, fontSize: 22))

Flexible(

child: GestureDetector(

onTap: () {

print("Clicked on settings");

child: Container(

color: Color.fromRGBO(218, 107, 107, 1),

child: Align(

alignment: Alignment.center,

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Icon(

Icons.settings,

color: Colors.white,

size: 50,

Text('Settings',

style: TextStyle(

color: Colors.white, fontSize: 22))

)

);

}

Widget dashboard(context) {

return AnimatedPositioned(

//top: isMenuClosed? 0 : 100,

//bottom: isMenuClosed? 0 : 100,

top: 0,

bottom: 0,

left: isMenuClosed ? 0 : screenWidth - screenWidth * 0.15,

right: isMenuClosed ? 0 : -90,

duration: Duration(milliseconds: 300),

child: Material(

elevation: 8,

color: Colors.grey[850],

child: Padding(

padding: EdgeInsets.fromLTRB(10, 30, 10, 10),

child: Column(

children: [

Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: [

InkWell(

child: Icon(

Icons.segment,

color: Colors.white,

size: 40,

onTap: () {

setState(() {

isMenuClosed = !isMenuClosed;

});

Icon(

Icons.search_outlined,

color: Colors.white,

size: 40,

Text("Trending",

style: TextStyle(fontSize: 28, color: Colors.white)),

CardScrollWidget(currentPage),

);

}

Widget circularImage() {

return Container(

width: 200.0,

height: 200.0,

decoration: new BoxDecoration(

shape: BoxShape.circle,

border: Border.all(

color: Colors.teal, width: 10.0, style: BorderStyle.solid),

image: new DecorationImage(

fit: BoxFit.cover, image: AssetImage("images/logo_huawei.png"))),

);

}

void sendCustomEvent() async {

String value = "This is custom event from app";

dynamic eventData = {'Message': value};

await _hmsAnalytics.onEvent("CustomEvent", eventData);

print("Event posted");

}

class CardScrollWidget extends StatelessWidget {

var currentPage;

var padding = 20.0;

CardScrollWidget(this.currentPage);

@override

Widget build(BuildContext context) {

return AspectRatio(

aspectRatio: widgetAspectRatio,

child: LayoutBuilder(

builder: (context, constraints) {

var width = constraints.maxWidth;

var height = constraints.maxHeight;

var safeWidth = width - 2 * padding;

var safeHeight = height - 2 * padding;

var heightOfPrimaryCard = safeHeight;

var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRation;

var primaryCardLeft = safeWidth - widthOfPrimaryCard;

var horizontalInset = primaryCardLeft / 2;

List cardList = [];

for (var i = 0; i < images.length; i++) {

var delta = i - currentPage;

bool isOnRight = delta > 0;

var start = padding +

max(

primaryCardLeft -

horizontalInset * -delta * (isOnRight ? 15 : 1),

0.0);

var cardItem = Positioned.directional(

top: padding + verticalInset * max(-delta, 0.0),

bottom: padding + verticalInset * max(-delta, 0.0),

start: start,

textDirection: TextDirection.rtl,

child: ClipRRect(

borderRadius: BorderRadius.circular(16.0),

child: Container(

decoration: BoxDecoration(color: Colors.white, boxShadow: [

BoxShadow(

color: Colors.black12,

offset: Offset(3.0, 6.0),

blurRadius: 10.0)

]),

child: AspectRatio(

aspectRatio: cardAspectRation,

child: Stack(

fit: StackFit.expand,

children: [

Image.asset(images[i], fit: BoxFit.cover),

Align(

alignment: Alignment.bottomLeft,

child: Column(

mainAxisSize: MainAxisSize.min,

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Container(

decoration: BoxDecoration(

color: Colors.black45,

borderRadius: BorderRadius.circular(20.0)),

child: Padding(

padding: EdgeInsets.symmetric(

horizontal: 16.0, vertical: 8.0),

child: Text(title[i],

style: TextStyle(

color: Colors.white,

fontSize: 25.0,

fontFamily: "SF-Pro-Text-Regular")),

SizedBox(

height: 10.0,

Padding(

padding: const EdgeInsets.only(

left: 12.0, bottom: 12.0),

child: Container(

padding: EdgeInsets.symmetric(

horizontal: 22.0, vertical: 6.0),

decoration: BoxDecoration(

color: Colors.blueAccent,

borderRadius:

BorderRadius.circular(20.0)),

child: GestureDetector(

onTap: () {

print("FFFFFF");

child: Text(

"Read more..",

style: TextStyle(color: Colors.white),

)

);

cardList.add(cardItem);

}

return Stack(

children: cardList,

);

}

Result

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
In this article, we have learnt how to integrate Account kit, Analytics and Ads kit into Huawei StoryApp for flutter. Once Account kit integrated, users can login quickly and conveniently sign in to apps with their Huawei IDs after granting initial access permission. Analytics helps you to analyze the user behavior and Ads kit helps you to monetize the app.
Thank you so much for reading, I hope this article helps you to understand the integration of Huawei Account kit, Ads kit and Analytics kit in flutter.
Reference
Ads Kit
Analytics Kit
Ads Kit — Training Video
Analytics Kit — Training Video
Checkout in forum

Login with Huawei Account Kit Huawei StoryApp [Flutter]

siddums — Fri, 11 Feb 2022 10:50:38 +0000

Introduction

In this article, we will be integrating Account Kit in Huawei 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.

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.

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.5.2.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

Flutter plugin for Account kit

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.

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> {

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.white,

appBar: AppBar(

title: Text("Login Page"),

backgroundColor: Colors.grey[850],

),

body: 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: 250,

decoration: BoxDecoration(

color: Colors.red, borderRadius: BorderRadius.circular(20)),

child: FlatButton(

onPressed: () {

Navigator.push(

context, MaterialPageRoute(builder: (_) => Main1()));

},

child: Text(

'Login',

style: TextStyle(color: Colors.white, fontSize: 25),

),

),

),

SizedBox(

height: 5,

),

Container(

height: 50,

width: 250,

decoration: BoxDecoration(

color: Colors.red, borderRadius: BorderRadius.circular(20)),

child: FlatButton(

onPressed: () {

signInWithHuaweiAccount();

},

child: Text(

'Login Huawei ID',

style: TextStyle(color: Colors.white, fontSize: 25),

),

),

),

SizedBox(

height: 30,

),

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: (_) => Main1()));

} on Exception catch (e) {

print(e.toString());

}

}

}

Main.dart

class Main1 extends StatefulWidget {

@override

_Main1State createState() => _Main1State();

}

var cardAspectRation = 12.0 / 20.0;

var widgetAspectRatio = cardAspectRation * 1.2;

var verticalInset = 20.0;

class _Main1State extends State<Main1> {

var currentPage = images.length - 1.0;

@override

void dispose() {

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

super.dispose();

}

@override

initState() {

SystemChrome.setEnabledSystemUIOverlays([]);

super.initState();

}

@override

Widget build(BuildContext context) {

PageController controller = PageController(initialPage: images.length - 1);

controller.addListener(() {

setState(() {

currentPage = controller.page!;

});

});

return Scaffold(

backgroundColor: Colors.grey[850],

body: SingleChildScrollView(

child: Column(

children: <Widget>[

Padding(

padding: const EdgeInsets.only(

left: 12.0, right: 12.2, top: 10.0, bottom: 8.0),

child: Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: <Widget>[

IconButton(

onPressed: () {},

icon: Icon(CustomIcons.menu,

color: Colors.white, size: 30.0),

),

IconButton(

onPressed: () {},

icon: Icon(Icons.search, color: Colors.white, size: 30.0),

)

],

),

),

Padding(

padding: EdgeInsets.symmetric(horizontal: 20.0),

child: Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: <Widget>[

Text(

"Trending",

style: TextStyle(

color: Colors.white,

fontSize: 40.0,

fontFamily: "Calibre-Semibold",

letterSpacing: 1.0),

),

IconButton(

onPressed: () {},

icon: Icon(

CustomIcons.option,

size: 12.0,

color: Colors.white,

))

],

),

),

Padding(

padding: const EdgeInsets.only(left: 20.0),

child: Row(

children: <Widget>[

Container(

decoration: BoxDecoration(

color: Colors.deepOrangeAccent,

borderRadius: BorderRadius.circular(20.0),

),

child: Center(

child: Padding(

padding: EdgeInsets.symmetric(

horizontal: 22.0, vertical: 6.0),

child: Text(

"Programs",

style: TextStyle(color: Colors.white),

),

),

),

),

SizedBox(

width: 15.0,

),

Text(

"25+ Stories",

style: TextStyle(color: Colors.blueAccent),

)

],

),

),

GestureDetector(

onTap: () {

print("Clicked " + currentPage.toInt().toString());

_launchURL(url[currentPage.toInt()]);

},

child: Stack(

children: <Widget>[

CardScrollWidget(currentPage),

Positioned.fill(

child: PageView.builder(

itemCount: images.length,

controller: controller,

reverse: true,

itemBuilder: (BuildContext context, int index) {

return Container();

},

))

],

),

),

Padding(

padding: EdgeInsets.symmetric(horizontal: 20.0),

child: Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: <Widget>[

Text(

"Favourite",

style: TextStyle(

color: Colors.white,

fontSize: 40.0,

fontFamily: "Calibre-Semibold",

letterSpacing: 1.0),

),

IconButton(

onPressed: () {},

icon: Icon(

CustomIcons.option,

size: 12.0,

color: Colors.white,

))

],

),

),

Padding(

padding: const EdgeInsets.only(left: 20.0),

child: Row(

children: <Widget>[

Container(

decoration: BoxDecoration(

color: Colors.deepOrangeAccent,

borderRadius: BorderRadius.circular(20.0),

),

child: Center(

child: Padding(

padding: EdgeInsets.symmetric(

horizontal: 22.0, vertical: 6.0),

child: Text(

"Programs",

style: TextStyle(color: Colors.white),

),

),

),

),

SizedBox(

width: 15.0,

),

Text(

"32+ Stories",

style: TextStyle(color: Colors.blueAccent),

)

],

),

)

],

),

));

}

void _launchURL(String url) async {

debugPrint('..... Clicked.....');

if (!await launch(url)) throw 'Could not launch url';

}

}

class CardScrollWidget extends StatelessWidget {

var currentPage;

var padding = 20.0;

CardScrollWidget(this.currentPage);

@override

Widget build(BuildContext context) {

return AspectRatio(

aspectRatio: widgetAspectRatio,

child: LayoutBuilder(

builder: (context, constraints) {

var width = constraints.maxWidth;

var height = constraints.maxHeight;

var safeWidth = width - 2 * padding;

var safeHeight = height - 2 * padding;

var heightOfPrimaryCard = safeHeight;

var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRation;

var primaryCardLeft = safeWidth - widthOfPrimaryCard;

var horizontalInset = primaryCardLeft / 2;

List<Widget> cardList = [];

for (var i = 0; i < images.length; i++) {

var delta = i - currentPage;

bool isOnRight = delta > 0;

var start = padding +

max(

primaryCardLeft -

horizontalInset * -delta * (isOnRight ? 15 : 1),

0.0);

var cardItem = Positioned.directional(

top: padding + verticalInset * max(-delta, 0.0),

bottom: padding + verticalInset * max(-delta, 0.0),

start: start,

textDirection: TextDirection.rtl,

child: ClipRRect(

borderRadius: BorderRadius.circular(16.0),

child: Container(

decoration: BoxDecoration(color: Colors.white, boxShadow: [

BoxShadow(

color: Colors.black12,

offset: Offset(3.0, 6.0),

blurRadius: 10.0)

]),

child: AspectRatio(

aspectRatio: cardAspectRation,

child: Stack(

fit: StackFit.expand,

children: <Widget>[

Image.asset(images[i], fit: BoxFit.cover),

Align(

alignment: Alignment.bottomLeft,

child: Column(

mainAxisSize: MainAxisSize.min,

crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

Container(

decoration: BoxDecoration(

color: Colors.black45,

borderRadius: BorderRadius.circular(20.0)),

child: Padding(

padding: EdgeInsets.symmetric(

horizontal: 16.0, vertical: 8.0),

child: Text(title[i],

style: TextStyle(

color: Colors.white,

fontSize: 25.0,

fontFamily: "SF-Pro-Text-Regular")),

),

),

SizedBox(

height: 10.0,

),

Padding(

padding: const EdgeInsets.only(

left: 12.0, bottom: 12.0),

child: Container(

padding: EdgeInsets.symmetric(

horizontal: 22.0, vertical: 6.0),

decoration: BoxDecoration(

color: Colors.blueAccent,

borderRadius:

BorderRadius.circular(20.0)),

child: GestureDetector(

onTap: () {

print("FFFFFF");

},

child: Text(

"Read more..",

style: TextStyle(color: Colors.white),

),

),

),

)

],

),

)

],

),

),

),

),

);

cardList.add(cardItem);

}

return Stack(

children: cardList,

);

},

),

);

}

}

CustomIcons.dart

class CustomIcons {

static const IconData menu = IconData(0xe900, fontFamily: "CustomIcons");

static const IconData option = IconData(0xe902, fontFamily: "CustomIcons");

}

data.dart

List<String> images = [

"images/image_04.png",

"images/image_03.png",

"images/image_02.png",

"images/image_01.png",

];

List<String> title = [

"HUAWEI Women Developers",

"Huawei Developer Experts",

"Huawei Student Developers",

"Huawei Developer Group",

];

List<String> url = [

"https://developer.huawei.com/consumer/en/programs/hwd",

"https://developer.huawei.com/consumer/en/programs/hsd/",

"https://developer.huawei.com/consumer/en/programs/hde",

"https://developer.huawei.com/consumer/en/programs/hdg/",

];

Result

Tricks and Tips

In this article, we have learnt how to integrate Account Kit into Huawei StoryApp for flutter. Once Account kit integrated, users can login quickly and conveniently sign in to apps with their Huawei IDs after granting initial access permission.

Thank you so much for reading, I hope this article helps you to understand the Huawei Account kit in flutter.

Reference

Account Kit
Checkout in forum

Integrating Huawei Map kit in HarmonyOs Wearable Device Application

siddums — Fri, 04 Feb 2022 09:28:17 +0000

Introduction

In this article, we will learn about Huawei Map Kit in HarmonyOs. Map Kit is an SDK for map development. It covers map data of more than 200 countries and regions, and supports over 70 languages. With this SDK, you can easily integrate map-based functions into your HarmonyOs application.

Development Overview

You need to install DevEcho Studio IDE and I assume that you have prior knowledge about the Harmony Os and java.

Hardware Requirements

A computer (desktop or laptop) running windows 10.
A HarmonyOs Smart Watch (with the USB cable), which is used for debugging.
Software Requirements

Java JDK installation package.
DevEcho Studio installed.
Steps:

Step 1: Create a HarmonyOs Application.

Step 1: Create a project in AppGallery

Step 2: Configure App in AppGallery

Step 3: Follow the SDK integration steps

Let's start coding

MapAbilitySlice.java

public class MapAbilitySlice extends AbilitySlice {

private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD001100, "TAG");

private MapView mMapView;

@Override

public void onStart(Intent intent) {

super.onStart(intent);

CommonContext.setContext(this);

// Declaring and Initializing the HuaweiMapOptions Object

HuaweiMapOptions huaweiMapOptions = new HuaweiMapOptions();

// Initialize Camera Properties

CameraPosition cameraPosition =

new CameraPosition(new LatLng(12.972442, 77.580643), 10, 0, 0);

huaweiMapOptions

// Set Camera Properties

.camera(cameraPosition)

// Enables or disables the zoom function. By default, the zoom function is enabled.

.zoomControlsEnabled(false)

// Sets whether the compass is available. The compass is available by default.

.compassEnabled(true)

// Specifies whether the zoom gesture is available. By default, the zoom gesture is available.

.zoomGesturesEnabled(true)

// Specifies whether to enable the scrolling gesture. By default, the scrolling gesture is enabled.

.scrollGesturesEnabled(true)

// Specifies whether the rotation gesture is available. By default, the rotation gesture is available.

.rotateGesturesEnabled(false)

// Specifies whether the tilt gesture is available. By default, the tilt gesture is available.

.tiltGesturesEnabled(true)

// Sets whether the map is in lite mode. The default value is No.

.liteMode(false)

// Set Preference Minimum Zoom Level

.minZoomPreference(3)

// Set Preference Maximum Zoom Level

.maxZoomPreference(13);

// Initialize the MapView object.

mMapView = new MapView(this,huaweiMapOptions);

// Create the MapView object.

mMapView.onCreate();

// Obtains the HuaweiMap object.

mMapView.getMapAsync(new OnMapReadyCallback() {

@Override

public void onMapReady(HuaweiMap huaweiMap) {

HuaweiMap mHuaweiMap = huaweiMap;

mHuaweiMap.setOnMapClickListener(new OnMapClickListener() {

@Override

public void onMapClick(LatLng latLng) {

new ToastDialog(CommonContext.getContext()).setText("onMapClick ").show();

}

});

// Initialize the Circle object.

Circle mCircle = new Circle(this);

if (null == mHuaweiMap) {

return;

}

if (null != mCircle) {

mCircle.remove();

mCircle = null;

}

mCircle = mHuaweiMap.addCircle(new CircleOptions()

.center(new LatLng(12.972442, 77.580643))

.radius(500)

.fillColor(Color.GREEN.getValue()));

new ToastDialog(CommonContext.getContext()).setText("color green: " + Color.GREEN.getValue()).show();

int strokeColor = Color.RED.getValue();

float strokeWidth = 15.0f;

// Set the edge color of a circle

mCircle.setStrokeColor(strokeColor);

// Sets the edge width of a circle

mCircle.setStrokeWidth(strokeWidth);

}

});

// Create a layout.

ComponentContainer.LayoutConfig config = new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT);

PositionLayout myLayout = new PositionLayout(this);

myLayout.setLayoutConfig(config);

ShapeElement element = new ShapeElement();

element.setShape(ShapeElement.RECTANGLE);

element.setRgbColor(new RgbColor(255, 255, 255));

myLayout.addComponent(mMapView);

super.setUIContent(myLayout);

}

}

Result

Tips and Tricks

Add required dependencies without fail.
Add required images in resources > base > media.
Add custom strings in resources > base > element > string.json.
Define supporting devices in config.json file.
Do not log the sensitive data.
Enable required service in AppGallery Connect.
Use respective Log methods to print logs.
Conclusion

In this article, we have learnt, integration of Huawei Map in HarmonyOs wearable device using Huawei Map Kit. Sample application shows how to implement Map kit in HarmonyOs Wearables device. Hope this articles helps you to understand and integration of map kit, you can use this feature in your HarmonyOs application to display map in wearable devices.

Thank you so much for reading this article and I hope this article helps you to understand Huawei Map Kit in HarmonyOS. Please provide your comments in the comment section and like.

References

Map Kit
Checkout in forum