DEV Community: Monikinderjit Singh

How to create a hover effect in Flutter in minutes?

Monikinderjit Singh — Fri, 10 Sep 2021 18:06:38 +0000

How to create a Hover Effect in Flutter in minutes?

Are you wondering how you can create a hovering effect in Flutter(Web) as Flutter does not provide a single widget to do that?
The hovering effect is one of the most important features in all e-commerce websites/apps. It is generally used to ask for extra user attention and action. So it's important to know how we can do that in Flutter.

So buckle up your seat belts and let's dive into it.

What's the content

We will be using Flutter's in-built features to implement a hovering effect. So no need to add expensively (cool down, I know they are free but I'm saying in context to efficiency and code) and non-efficient (most of the packages are badly written) to have this simple effect. We will be going through:

Setting up the Flutter project
Brief Intro to InkWell
Whats' this Animated Container?
Implement Hovering effect

Setting Up Flutter Project

Step 1: Go to cmd/terminal and type flutter create <project_name>
Step 2: Type cd <project_name> in terminal and run flutter pub get
Step 3: Now lets remove this boiler plate code and start working.

Tip: You can simply press Ctrl+F and enable regular expressions (Alt+r). Type //.* and all the commented lines will be selected. Now you can replace it with empty space and press Ctrl+F or any key binding you have set for formatting.

Ok cool, we are now ready to understand our widgets to be used.

Brief Intro to InkWell

InkWell is an amazing material widget in Flutter which comes with many in-built features such as splashColor, onLongPress and many more. Some of the important parameters for our purpose are listed in the table below:

Let's answer some of your questions:

Ques1: So why are we using InkWell?
The question lies in the above table. As we can see the InkWell has an onHover function which is called when the user brings in/out the mouse to the widget.

Ques2: So whats' our idea?
We will be using this amazing feature by InkWell to change the boundaries of the container which will look like a hovering effect.

Ques3: Hey but the container has fixed height and width and not a good animation too when increasing size. How we will cope up with this?
So that's our next section, Animated Containers. Let's quickly go there.

Whats' this AnimatedContainer?

AnimatedContainer is a special Container that helps us give more wizardly powers to a simple Container. As the name suggests, it is a container with the capabilities to add animations.

Animated version of Container that gradually changes its values over a period of time. ---From api.flutter.dev

Let's look into its arguments:

So we now are ready with our fundamentals strong. So lets' finally code.

Let's code & implement the hovering effect

Step 1: Create a stateful class HoveringWidget. Why Stateful? Because we are going to use AnimatedContainer and it's always better to use Stateful class.
Create an InkWell widget as shown below.



class HoveringWidget extends StatefulWidget {
  _HoveringWidgetState createState() => _HoveringWidgetState();
}

class _HoveringWidgetState extends State<HoveringWidget> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
        child:Text("Hover Button"),
        onTap:(){},
        onHover:(val){} 
         /*val--->true when user brings in mouse
         val---> false when brings out his mouse*/
    );
  }
}

onHover is this function that will be called when a user brings it to the mouse inside/outside.
Step 2: Create a boolean variable isHover and set it to false.



bool isHover=false;

Step 3: Inside onHover function, use setState to change the value of isHover to val.



  setState((){
        isHover=val;
      });

Step 4: Now we are done with InkWell. So let's wrap this widget inside AnimatedContainer and add duration, padding to it. Carefully look at how I have given padding over here:



 Widget build(BuildContext context) {
    return AnimatedContainer(
      height:100,//there should be outline/dimensions for the box. 
      //Otherway, You can use positioned widget
      duration: Duration(milliseconds: 200),
      padding: EdgeInsets.only(top: (isHover) ? 25 : 30.0, bottom:!(isHover)? 25:30),
      child: InkWell( 
        onTap:(){},
        child: Text("Hover Button"),
        onHover: (val) {
          setState(() {
            isHover = val;
          });
        },
      ),
      /*val--->true when user brings in mouse
     val---> false when brings out his mouse*/
    );
  }

When the isHover will be true, it will decrease top padding and element will move upwards. With animations, it will look like hovering and will hence create our hovering effect.

It should be working now!
Now let's do some decoration over InkWell to look better.



Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          height: 70,
          duration: Duration(milliseconds: 200),
          padding: EdgeInsets.only(
              top: (isHover) ? 25 : 30.0, bottom: !(isHover) ? 25 : 30),
          child: Container(
            height: 30,
            color: Colors.blue,
            child: InkWell(
              onTap: () {},
              child: Text("Hover Button"),
              onHover: (val) {
                print("Val--->{}$val");
                setState(() {
                  isHover = val;
                });
              },
            ),
            /*val--->true when user brings in mouse
           val---> false when brings out his mouse*/
          ),
        ),
      ),
    );

Tip: You can add vertical padding to give a slanting hover animation effect.

Kudos 🎉🎉

Hayyyy, you made it till the end. I hope you enjoyed working with animated Containers.

Little Bit About Me🧑‍💻🧑‍💻🧑‍💻

Hey developers, I'm Monikinderjit Singh, working on Flutter for more than a year now. My interest in cloud technology is fueled by my need to learn more about it. I am currently new to hashnode (this is my second blog post). I would appreciate you giving it a like if you find it interesting and leaving a comment if you have a better solution for this topic. It would be awesome if you could give me some feedback on improving my content.
You can connect with me on my Twitter, Github and LinkedIn .

How to create a Hover Effect in Flutter in minutes?

Monikinderjit Singh — Mon, 06 Sep 2021 11:38:33 +0000

So buckle up your seat belts and let's dive into it.

What's the content

Setting up the Flutter project
Brief Intro to InkWell
Whats' this Animated Container?
Implement Hovering effect

Setting Up Flutter Project

Tip: You can simply press Ctrl+F and enable regular expressions (Alt+r). Type //.* and all the commented lines will be selected. Now you can replace it with empty space and press Ctrl+F or any key binding you have set for formatting.

Ok cool, we are now ready to understand our widgets to be used.

Brief Intro to InkWell

Let's answer some of your questions:

Ques1: So why are we using InkWell?
The question lies in the above table. As we can see the InkWell has an onHover function which is called when the user brings in/out the mouse to the widget.

Ques2: So whats' our idea?
We will be using this amazing feature by InkWell to change the boundaries of the container which will look like a hovering effect.

Ques3: Hey but the container has fixed height and width and not a good animation too when increasing size. How we will cope up with this?
So that's our next section, Animated Containers. Let's quickly go there.

Whats' this AnimatedContainer?

AnimatedContainer is a special Container that helps us give more wizardly powers to a simple Container. As the name suggests, it is a container with the capabilities to add animations.

Animated version of Container that gradually changes its values over a period of time. ---From api.flutter.dev

Let's look into its arguments:

So we now are ready with our fundamentals strong. So lets' finally code.

Let's code & implement the hovering effect

Step 1: Create a stateful class HoveringWidget. Why Stateful? Because we are going to use AnimatedContainer and it's always better to use Stateful class.
Create an InkWell widget as shown below.

class HoveringWidget extends StatefulWidget {
  _HoveringWidgetState createState() => _HoveringWidgetState();
}

class _HoveringWidgetState extends State<HoveringWidget> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
        child:Text("Hover Button"),
        onTap:(){},
        onHover:(val){} 
         /*val--->true when user brings in mouse
         val---> false when brings out his mouse*/
    );
  }
}

onHover is this function that will be called when a user brings it to the mouse inside/outside.
Step 2: Create a boolean variable isHover and set it to false.

bool isHover=false;

Step 3: Inside onHover function, use setState to change the value of isHover to val.

  setState((){
        isHover=val;
      });

Step 4: Now we are done with InkWell. So let's wrap this widget inside AnimatedContainer and add duration, padding to it. Carefully look at how I have given padding over here:

 Widget build(BuildContext context) {
    return AnimatedContainer(
      height:100,//there should be outline/dimensions for the box. 
      //Otherway, You can use positioned widget
      duration: Duration(milliseconds: 200),
      padding: EdgeInsets.only(top: (isHover) ? 25 : 30.0, bottom:!(isHover)? 25:30),
      child: InkWell( 
        onTap:(){},
        child: Text("Hover Button"),
        onHover: (val) {
          setState(() {
            isHover = val;
          });
        },
      ),
      /*val--->true when user brings in mouse
     val---> false when brings out his mouse*/
    );
  }

When the isHover will be true, it will decrease top padding and element will move upwards. With animations, it will look like hovering and will hence create our hovering effect.

It should be working now!
Now let's do some decoration over InkWell to look better.

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          height: 70,
          duration: Duration(milliseconds: 200),
          padding: EdgeInsets.only(
              top: (isHover) ? 25 : 30.0, bottom: !(isHover) ? 25 : 30),
          child: Container(
            height: 30,
            color: Colors.blue,
            child: InkWell(
              onTap: () {},
              child: Text("Hover Button"),
              onHover: (val) {
                print("Val--->{}$val");
                setState(() {
                  isHover = val;
                });
              },
            ),
            /*val--->true when user brings in mouse
           val---> false when brings out his mouse*/
          ),
        ),
      ),
    );

Tip: You can add vertical padding to give a slanting hover animation effect.

Kudos 🎉🎉

Hayyyy, you made it till the end. I hope you enjoyed working with animated Containers.

Little Bit About Me🧑‍💻🧑‍💻🧑‍💻

Push Notification using Amazon Pinpoint in Flutter

Monikinderjit Singh — Wed, 01 Sep 2021 14:39:33 +0000

Amazon Web Services, in early 2021, extended its support for Flutter, which is quite amazing and many new startups have started to use AWS in their flutter applications due to its ease of scalability and support. Amazon Web Service offers a wide variety of options for Flutter, but we're going to focus on Amazon Pinpoint Service today.

Amazon Pinpoint allow users to send push notifications to multiple recipients. To increase sales, companies and organizations can use marketing campaigns to contact their clients.

Let's figure out how to integrate this into your Flutter application.

What we are going to use💻?

To start, we need to install the following packages:

Setup Amplify Pinpoint

To install pinpoint in your amplify project, you will need to add amplify analytics service to your flutter project.
Run amplify add analytics in your terminal (Make sure you are at root of the project)
Select Amazon Pinpoint service and then give a name to your pinpoint service resource.
Press Y and then click enter. Your amazon pinpoint service will be added locally.
Now, to publish it in the cloud, run amplify push.

Point to be noted: It takes time for amazon analytics to start recording the events. For me, I was able to record events the next morning.

To send notifications from pinpoint, we will need to set up a module that will interact with the app to show the notification. To fulfil this, we have to use Firebase Cloud Messaging Service which will send our notification triggered from Amazon Pinpoint to the user.

Set up Firebase Cloud Messaging

Firebase Console Setup:

Open Firebase Console
Click on Create Project
Give a name to your project and press continue.
Make sure analytics is enabled and then press continue.
Select your country and then create your project.
Register your app and follow the steps described there to successfully register the app. > Extra focus on initializing firebase SDK and google-services.json file
After your app has been registered, go to Engage->Cloud Messaging.

Let's write some code

via GIPHY

Make a file named notifications. dart and add the following file. In this file, we are handling our notifications from the amazon pinpoint service.

In main.dart file, call this function _configureAmplify() inside init state

and add these lines in main() function.

It's all. Ohh, wait. Let's check how to trigger our notification from Amazon Pinpoint Service.

Make a notification from Pinpoint Service Webpage

Go to your pinpoint service page from your amplify admins page and then click on the pinpoint service you created. Click on Settings->Push Notifications and enable Firebase Cloud Messaging (FCM). After enabling, there will be a green tick as shown below.
Go to Test Messaging and click on Push Notifications. To send a message we will be requiring a google device token which we are getting using the getToken() function in the requirements.dart file. Without this token, we will not be able to send our message.
Write this token inside the Device tokens field.
Write a message, add a picture URL and send this to the user.

Kudos 🎉🎉

Congratulations to everyone who was able to send their first pinpoint service to trigger the notification. Despite it being a long tutorial, you all made it to the end.

Little Bit About Me🧑‍💻🧑‍💻🧑‍💻

Integrate Amazon Lex With Flutter App

Monikinderjit Singh — Wed, 01 Sep 2021 14:21:33 +0000

For industries and companies to maintain an advantage over their competitors, better customer service offers in their mobile apps are crucial. So it is equally important to understand how to integrate a bot in a flutter app. As Amazon is increasing its share in the development of flutter apps with its Amplify service, now integration of Amazon lex with flutter has become easier than ever.

At this moment, Amplify supports Authentication, Storage, and Analytics for Flutter.

We will communicate with Lex by using a REST API.

What we are going to use💻?

We will be creating a chat with the bot and will be using some amazing packages from flutter pub to make our work efficient and easier.
To start, we need to install the following packages:

http 0.13.3 : To send request to Amazon Lex
sigv4 5.0.0 : To authenticate the service
uuid 3.0.4 : To create unique uuid
flutter_chat_ui 1.1.9 : To create basic chat UI

Now our vision is crystal clear and ready to start our project.

Lets' Start

Normally, I set up the backend first, then connect the frontend. Hopefully, you have successfully set up Amazon Lex in AWS.

1. Setup Backend File

I have created a file named bot_service.dart which will contain the code to interact with our lex bot.

import 'dart:convert';
import 'dart:developer';

import 'package:amazon_cognito_identity_dart_2/sig_v4.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:sigv4/sigv4.dart';

class BotService {
  Map<String,dynamic> result;
  String botName= "<NAME_OF_BOT>";
  String kAccessKeyId = '<ACCESS_KEY>';
  String kSecretAccessKey = '<SECRET_ACCESS_KEY>';
  String botAlias= "<BOT_ALIAS>";
  String botAWSRegion= "<AWS_LEX_REGION>";


  Future<Map<String,dynamic>> callBot(String message) async {
    var response;
    String requestUrl= "https://runtime.lex."+botAWSRegion+".amazonaws.com/bot/"+botName+"/alias/"+botAlias+"/user/1234/text";

    Sigv4Client client = Sigv4Client(
      region: botAWSRegion,
      serviceName: 'lex',
      defaultContentType: 'application/json; charset=utf-8',
      keyId: kAccessKeyId,
      accessKey: kSecretAccessKey,
    );

    final request = client.request(
     requestUrl,
      method: 'POST',
      body: jsonEncode({'inputText': message}),
    );

    response = await http.post(request.url,
        headers: request.headers, body: request.body);
    result = jsonDecode(response.body);
    return result;
  }
}

Take special care while inserting the required values and region of the Amazon Lex Bot.

In <ACCESS_KEY> and <SECRET_ACCESS_KEY> you have to insert the value of your Amazon role's secret or you can create a new role for the bot and permit it to call Amazon Lambda Functions(I would prefer to go with creating a new role for the bot).

2. Create Chat UI

To create the chat UI, I will use flutter_chat_ui package as it provides a lot of already built features like handling messages and a chat message model.

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:uuid/uuid.dart';

import './bot_service.dart';

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

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

class _BotScreenState extends State<BotScreen> {
  List<types.Message> messages=[];
  final _user = const types.User(id: '1234556');
  final _bot = const types.User(id: "123");
//id of bot and user doesn't matter here as we have only pair interaction

  BotService _botService = BotService();

  @override
  void initState() {
    super.initState();
    _loadMessages();
  }

  void _addMessage(types.Message message) async {
    setState(() {
      messages.insert(0, message);
    });
    log("${message.toJson()["text"]}");
    var data = await _botService.callBot(message.toJson()["text"]);
    log("#####${data['message']}");
    setState(() {
      messages.insert(0, botMessageReply(data['message']));
    });
  }

  types.Message botMessageReply(String message) {
    return types.TextMessage(
      author: _bot,
      createdAt: DateTime.now().millisecondsSinceEpoch,
      id: const Uuid().v4(),
      text: message,
    );
  }

  void _handleSendPressed(types.PartialText message) {
    final textMessage = types.TextMessage(
      author: _user,
      createdAt: DateTime.now().millisecondsSinceEpoch,
      id: const Uuid().v4(),
      text: message.text,
    );
    _addMessage(textMessage);
  }

  void _loadMessages() async {
    List<types.Message> messagesList = [];
    Future.delayed(Duration(milliseconds: 300), () {
      messagesList.add(types.TextMessage(
        author: _bot,
        createdAt: DateTime.now().millisecondsSinceEpoch,
        id: const Uuid().v4(),
        text: "Hello. My name is TUTU- your bot. How can I help you?",
      ));

      setState(() {
        messages = messagesList;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(automaticallyImplyLeading: false,title:Text("BOT"),backgroundColor:Colors.purpleAccent),
      body: Chat(
        messages: messages,
        showUserNames: true,
        onSendPressed: _handleSendPressed,
        user: _user,
      ),
    );
  }
}

`_loadMessages() Function`: This function load messages from the firebase/local file. Here I am pushing a starting message which will be instantiated by the bot when user opens this bot.
`_addMessage() Function`: This function interacts with bot_service.dart which further interacts with LEX API to get the result of the message sent by the user.

3. Here is Our Final Product🔥🔥

BOT Screen

Congratulations🎉

Great job, you've connected your Flutter app to the Lex bot... well done!

Please let me know if you have any questions or concerns regarding this article and I will do my best to help or learn more.