Flutter Like Button Animation With Example Using Android

admin_img Posted By Bajarangi soft , Posted On 23-09-2020

Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

Flutter Like Button Example

Following is an Android UI screenshot when you run this application on an Android device.

Step-1:
You can install like_button
Add this to your package's pubspec.yaml file:
dependencies:
  flutter:
    sdk: flutter
  like_button: ^1.0.1

Step-2:
You can install packages from the command line: with Flutter:

flutter pub get


step-3:
Now in your Dart code, you can use:

import 'package:like_button/like_button.dart';


You can add this like_button code :
LikeButton(
  circleColor:
  CircleColor(start: Color(0xFFF44336), end: Color(0xFFF44336)),
  likeBuilder: (bool isLiked) {
    return Icon(
      Icons.favorite,
      size: 30,
      color: isLiked ? Colors.red : Colors.grey,
    );
  },
),

Complete Code  Like_button  in flutter
Main.dart
import 'package:flutter/material.dart';
import 'package:like_button/like_button.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('ListTile Widget'),
        backgroundColor: Colors.black,
      ),
      body: Column(
        children: <Widget>[
          Container(
            child: Image.asset(
                'assets/images/img.jpg',
                width: 350,
                height: 250,
                fit:BoxFit.fill
            ),
          ),
          SizedBox(height: 10.0,),
          LikeButton(
            circleColor:
            CircleColor(start: Color(0xFFF44336), end: Color(0xFFF44336)),
            likeBuilder: (bool isLiked) {
              return Icon(
                Icons.favorite,
                size: 30,
                color: isLiked ? Colors.red : Colors.grey,
              );
            },
          ),
        ],
      )
    );
  }
}

Related Post