ListView Click Animation In Flutter

ListView Click Animation In Flutter :

ListView Click Animation In Flutter

Main.dart

import 'package:flutter/material.dart';
import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Tutorial'),
    );
  }
}

card_item.dart

import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'item_page.dart';
import 'list_item.dart';

class CardItem extends StatefulWidget {
  final ListItem listItem;

  CardItem({Key key, this.listItem}) : super(key: key);

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

class CardItemState extends State<CardItem> with TickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 700))
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return ItemPage(
                  listItem: widget.listItem,
                );
              }));
            }
          });
    super.initState();
  }

  open() {
    animationController.reset();
    animationController.forward();
  }

  stop() {
    animationController.reset();
  }

  _buildCard() {
    return Card(
        elevation: 20.0,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
        child: Column(children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: CircleAvatar(
              backgroundColor: widget.listItem.color,
              radius: 40.0,
              child: Icon(
                widget.listItem.icon,
                size: 30,
                color: Colors.white,
              ),
            ),
          ),
          Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                widget.listItem.title,
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              )),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              widget.listItem.description,
              style: TextStyle(color: Colors.grey),
              softWrap: true,
            ),
          ),
          ButtonBar(children: <Widget>[
            RaisedButton(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0)),
              color: Colors.green,
              child: Row(children: <Widget>[
                Text("Add",
                    style: TextStyle(
                      color: Colors.white,
                    )),
                Icon(
                  Icons.add,
                  color: Colors.white,
                )
              ]),
              onPressed: () {},
            ),
            RaisedButton(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0)),
              color: Colors.red,
              child: Row(children: <Widget>[
                Text("Delete",
                    style: TextStyle(
                      color: Colors.white,
                    )),
                Icon(
                  Icons.delete,
                  color: Colors.white,
                )
              ]),
              onPressed: () {},
            )
          ])
        ]));
  }

  @override
  Widget build(BuildContext context) {
    return _buildAnimatedCardShake();
  }

  _buildAnimatedCardShake() {
    return AnimatedBuilder(
        animation: animationController,
        child: _buildCard(),
        builder: (context, child) {
          double v = math.sin(animationController.value * math.pi * 10.0) * 10;
          return Transform.translate(
            offset: Offset(v, 0),
            child: child,
          );
        });
  }
}

home-page

import 'package:flutter/material.dart';
import 'card_item.dart';
import 'items.dart';

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  List<GlobalKey<CardItemState>> _keys = [];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    for (int i = 0; i < items.length; i++) {
      _keys.add(GlobalKey<CardItemState>());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Stack(children: <Widget>[
          ListView.builder(
              padding: EdgeInsets.all(15.0),
              itemCount: items.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                    onTap: () {
                      _keys[index].currentState.open();
                    },
                    child: CardItem(
                      key: _keys[index],
                      listItem: items[index],
                    ));
              })
        ]));
  }
}

item_page.dart

import 'package:flutter/material.dart';
import 'list_item.dart';

class ItemPage extends StatelessWidget {
  final ListItem listItem;
  ItemPage({this.listItem});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text("${listItem.title}"),
        ),
        body: ListView(padding: EdgeInsets.all(10.0), children: <Widget>[
          ListTile(
            title: Text(
              listItem.title,
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
            leading: CircleAvatar(
                backgroundColor: listItem.color,
                radius: 30,
                child: Icon(
                  listItem.icon,
                  color: Colors.white,
                  size: 30.0,
                )),
          ),
          ListTile(title: Text(listItem.description))
        ]));
  }
}

items.dart

import 'package:flutter/material.dart';
import 'list_item.dart';

final List<ListItem> items = [
  ListItem(
      title: "Flutter",
      description:
          " Flutter Tutorial \n Flutter Weight Sum \n Flutter ButtonBar \n Flutter edittext \n Flutter TextView \n Flutter Login validation \n Flutter CheckBox \n Flutter CheckBoxList \n Flutter Animation \n Flutter HTTP \n Flutter DIO \n Flutter Radio \n Flutter RadioList \n Flutter AnimatedList \n Flutter in Ahmedabad \n Flutter in Mumbai \n Flutter Developer in Ahmedabad \n Flutter Validation \n Flutter BLoC Pattern \n Flutter Stream Builder \n Flutter ListView Click \n Flutter best developer",
      color: Colors.red,
      icon: Icons.mobile_screen_share),
];

list_item.dart

import 'package:flutter/material.dart';

class ListItem {
  final String title;
  final IconData icon;
  final String description;
  final Color color;
  ListItem({this.color, this.title, this.icon, this.description});
}

math_helper.dart

import 'package:flutter/material.dart';
import 'dart:math' as math;

class MathHelper {
  static Offset getCurrentPosition(GlobalKey key) {
    RenderBox targetRenderBox = key.currentContext.findRenderObject();
    Offset pos = targetRenderBox.localToGlobal(Offset(0, 0));
    return pos;
  }

  static Offset getVector(Offset from, Offset to) {
    double x = to.dx - from.dx;
    double y = to.dy - from.dy;
    return Offset(x < 0 ? -1 : 1, y < 0 ? -1 : 1);
  }

  static double getAngleBet2Points(Offset from, Offset to) {
    double y2_y1 = to.dy - from.dy;
    double x2_x1 = to.dx - from.dx;
    return math.atan2(y2_y1, x2_x1);
  }

  static double getDistanceBet2Points(Offset from, Offset to) {
    double x2_x1 = to.dx - from.dx;
    double y2_y1 = to.dy - from.dy;
    double sqr_x2_x1 = x2_x1 * x2_x1;
    double sqr_y2_y1 = y2_y1 * y2_y1;

    return math.sqrt(sqr_x2_x1 + sqr_y2_y1);
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in