DEV Community

HMS Community
HMS Community

Posted on

Integration of Huawei Account kit, Push kit and Analytics kit in Flutter DietApp – Part 2

Image description

Introduction

In this article, we will be integrating Huawei Account, Push kit and Analytics kit in Flutter DietApp. 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 Push kit is a messaging service provided for you. It establishes a messaging channel from the cloud to devices. By integrating Push Kit, you can send messages to your apps on user’s devices in real time. This helps you to maintain closer ties with users and increases user awareness and engagement with your apps.

Huawei Analytics is a one-stop solution to get user behaviour analysis in different platforms for all yours products such as mobile apps, web apps and quick apps. It helps developers to get detailed analysis report and also provides crash reports by default. It offers scenario-specific data collection, management, analysis, and usage, helping enterprises to achieve effective user acquisition, product optimization, precise operations, and business growth.

Image description

Image description

Previous article

Please check my previous article if you have not gone through, click on link.

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.
Image description

Image description

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'
Enter fullscreen mode Exit fullscreen mode

Root level gradle dependencies

maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.5.2.300'
Enter fullscreen mode Exit fullscreen mode

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

<uses-permission android:name="android.permission.INTERNET" />
Enter fullscreen mode Exit fullscreen mode

Step 4: Download flutter push kit 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

Image description

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() {
    _enableLog();
    super.initState();
  }

  Future<void> _enableLog() async {
    _hmsAnalytics.setUserId("TestUserDietApp");
    await _hmsAnalytics.enableLog();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Login"),
        backgroundColor: Colors.grey[850],
      ),
      body: RefreshIndicator(
        onRefresh: showToast,
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 90.0),
                child: Center(
                  child: Container(
                      width: 220,
                      height: 165,
                      decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(60.0)),
                      child: Image.asset('images/logo_huawei.png')),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(
                    left: 40.0, right: 40.0, top: 15, bottom: 0),
                child: TextField(
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Email',
                      hintText: 'Enter valid email id '),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(
                    left: 40.0, right: 40.0, top: 10, 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.black,
                    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: 22),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                height: 50,
                width: 270,
                decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.circular(5)),
                child: HuaweiIdAuthButton(
                    theme: AuthButtonTheme.FULL_TITLE,
                    buttonColor: AuthButtonBackground.RED,
                    borderRadius: AuthButtonRadius.MEDIUM,
                    onPressed: () {
                      signInWithHuaweiID();
                    }),
              ),
              SizedBox(
                height: 30,
              ),
              GestureDetector(
                onTap: () {
                  //showBannerAd();
                },
                child: Text('New User? Create Account'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void signInWithHuaweiID() async {
    AccountAuthParamsHelper helper = new AccountAuthParamsHelper();
    String name = '';
    helper.setAuthorizationCode();
    try {
      // The sign-in is successful, and the user's ID information and authorization code are obtained.
      Future<AuthAccount> account = AccountAuthService.signIn();
      account.then(
        (value) => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => MyHomePage(
              title: '' + value.displayName.toString(),
            ),
          ),
        ),
      );
    } 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);
  }
}

Enter fullscreen mode Exit fullscreen mode

main.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: 'Exercise&DietApp',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late String gender = '', dietPlan, activeLevel;
  late double? age, height, weight, tagetWeight;
  TextEditingController ageController = TextEditingController();
  TextEditingController heightController = TextEditingController();
  TextEditingController weightController = TextEditingController();
  TextEditingController targetWeightController = TextEditingController();
  late SharedPreferences prefs;

  String _genderLabel = "Male";
  String _dietLabel = "Veg";
  String _activeLable = "Low Active";
  final _genderList = ["Male", "Women"];
  final _dietPlanList = ["Veg", "Veg-Non Veg", "Egg"];
  final _activeLevelList = ["Low Active", "Mid-Active", "Very Active"];
  String _token = '';
  void initState() {
    super.initState();
    initPreferences();
    initTokenStream();
  }

  Future<void> initTokenStream() async {
    if (!mounted) return;
    Push.getTokenStream.listen(_onTokenEvent, onError: _onTokenError);

    getToken();
  }

  void getToken() async {
    // Call this method to request for a token
    Push.getToken("");
  }

  void _onTokenEvent(String event) {
    // Requested tokens can be obtained here
    setState(() {
      _token = event;
      print("TokenEvent: " + _token);
    });
  }

  void _onTokenError(Object error) {
    print("TokenErrorEvent: " + error.toString());
    PlatformException? e = error as PlatformException?;
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        appBar: AppBar(
          title: Text(widget.title.toString()),
          automaticallyImplyLeading: false,
        ),
        body: Center(
          child: SingleChildScrollView(
            reverse: true,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 0.0),
                  child: Center(
                    child: Container(
                        width: 120,
                        height: 120,
                        decoration: BoxDecoration(
                            color: Colors.black,
                            borderRadius: BorderRadius.circular(60.0)),
                        child: Image.asset('images/nu_icon.png')),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                      left: 22.0, right: 22.0, top: 15, bottom: 0),
                  child: TextField(
                    controller: ageController,
                    decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Age',
                        hintText: 'Enter valid age '),
                  ),
                ),

                Padding(
                  padding: const EdgeInsets.only(
                      left: 22.0, right: 22.0, top: 15, bottom: 0),
                  child: TextField(
                    controller: heightController,
                    decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Height',
                        hintText: 'Enter height '),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                      left: 22.0, right: 22.0, top: 15, bottom: 0),
                  child: TextField(
                    controller: weightController,
                    decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Weight',
                        hintText: 'Enter Weight '),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                      left: 22.0, right: 22.0, top: 15, bottom: 0),
                  child: TextField(
                    controller: targetWeightController,
                    decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Target Weight',
                        hintText: 'Enter target Weight '),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    const Text('Gender :'),
                    DropdownButton(
                      items: _genderList
                          .map((String item) => DropdownMenuItem<String>(
                              child: SizedBox(
                                  height: 22,
                                  width: 100,
                                  child: Text(item,
                                      style: TextStyle(fontSize: 20))),
                              value: item))
                          .toList(),
                      onChanged: (value) {
                        setState(() {
                          _genderLabel = value.toString();
                          gender = value.toString();
                        });
                      },
                      value: _genderLabel,
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('Diet Plan :'),
                    DropdownButton(
                      items: _dietPlanList
                          .map((String item) => DropdownMenuItem<String>(
                              child: SizedBox(
                                  height: 22,
                                  width: 100,
                                  child: Text(item,
                                      style: TextStyle(fontSize: 20))),
                              value: item))
                          .toList(),
                      onChanged: (value) {
                        setState(() {
                          _dietLabel = value.toString();
                          dietPlan = value.toString();
                          print('Diet plan changed to   $value');
                        });
                      },
                      value: _dietLabel,
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('Active Level :'),
                    DropdownButton(
                      items: _activeLevelList
                          .map((String item) => DropdownMenuItem<String>(
                              child: SizedBox(
                                  height: 22,
                                  width: 100,
                                  child: Text(item,
                                      style: TextStyle(fontSize: 20))),
                              value: item))
                          .toList(),
                      onChanged: (value) {
                        setState(() {
                          activeLevel = value.toString();
                          _activeLable = value.toString();
                          print('Active level changed to   $value');
                        });
                      },
                      value: _activeLable,
                    )
                  ],
                )
                ,
                Padding(
                  padding: const EdgeInsets.only(
                      left: 22.0, right: 22.0, top: 20, bottom: 0),
                  child: MaterialButton(
                    child: const Text(
                      'Submit',
                      style: TextStyle(
                          fontSize: 22,
                          color: Colors.white,
                          fontWeight: FontWeight.w300),
                    ),
                    height: 45,
                    minWidth: 140,
                    color: Colors.lightBlue,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    onPressed: () {
                      print('Button clicked.....');
                      age = double.parse(ageController.text);
                      height = double.parse(heightController.text);            
                      weight = double.parse(weightController.text);                    
                      tagetWeight = double.parse(targetWeightController.text);                   

                      storeDataLocally();
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Future<void> storeDataLocally() async {
    prefs.setString("name", widget.title.toString());
    prefs.setDouble("age", age!);
    prefs.setDouble("height", height!);
    prefs.setString("gender", gender.toString());
    prefs.setDouble("weight", weight!);
    prefs.setString("dietPlan", dietPlan);
    prefs.setDouble("targetWeight", tagetWeight!);
    prefs.setString("activeLevel", activeLevel);

  }

  Future<void> initPreferences() async {
    prefs = await SharedPreferences.getInstance();
    showData();
  }

  void showData() {
    if (prefs.getDouble('age').toString() != null) {
      ageController.text = prefs.getDouble('age').toString();
      heightController.text = prefs.getDouble('height').toString();
      targetWeightController.text = prefs.getDouble('targetWeight').toString();
      genderController.text = prefs.getString('gender').toString();
      dietPlanController.text = prefs.getString('dietPlan').toString();
      activeLevelPlanController.text =
          prefs.getString('activeLevel').toString();
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

Result

Image description

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 Huawei Account kit, Push kit and Analytics kit in Flutter DietApp. Once Account kit integrated, users can login quickly and conveniently sign in to apps with their Huawei IDs after granting initial access permission. Push kit enables you to send push notification to user device in real time, you can see the push notification in the result part.

Thank you so much for reading. I hope this article helps you to understand the integration of Huawei Account kit, Push kit and Analytics kit in flutter DietApp.

Reference

Push Kit - Training Video

Account Kit – Training Video

Checkout in forum

Top comments (0)