animated_leaderboard 0.1.4 copy "animated_leaderboard: ^0.1.4" to clipboard
animated_leaderboard: ^0.1.4 copied to clipboard

An interactive animated leaderboard widget for Flutter apps.

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Screen(),
    );
  }
}

class Screen extends StatefulWidget {
  const Screen({super.key});

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

class _ScreenState extends State<Screen> {
  final ScrollController _scrollController = ScrollController();
  double _topContainer = 0;

  final List<User> _users = List.generate(
    10,
        (index) => User(
      index,
      'user$index',
      '',
      'https://shorturl.at/Jl6mL',
      (10 - index) * 10,
      (10 - index) * 50,
    ),
  );

  final int _myId = 2;
  bool _isWeeklyFiltered = true;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  @override
  void dispose() {
    _scrollController.removeListener(_onScroll);
    _scrollController.dispose();
    super.dispose();
  }

  void _onScroll() {
    final double value = _scrollController.offset / 119;
    setState(() {
      _topContainer = value;
    });
  }

  void _filter(bool isFirstFilterSelected) {
    setState(() {
      _isWeeklyFiltered = isFirstFilterSelected;
    });
    // TODO: Sort the users based on the selected filter
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Leaderboard', style: TextStyle(color: Theme.of(context).colorScheme.secondary)),
        scrolledUnderElevation: 0,
      ),
      body: AnimatedLeaderboard(
        scrollController: _scrollController,
        topContainer: _topContainer,
        filterLabel1: 'Weekly',
        filterLabel2: 'All-time',
        users: _users,
        myId: _myId,
        isFirstFilterSelected: _isWeeklyFiltered,
        onFilterTap: _filter,
      ),
    );
  }
}

class User {
  final int id;
  final String photo;
  final String firstName;
  final String lastName;
  final int weeklyPoints;
  final int allTimePoints;

  User(this.id, this.firstName, this.lastName, this.photo, this.weeklyPoints, this.allTimePoints);

  int get firstFilterPoints => weeklyPoints;
  int get secondFilterPoints => allTimePoints;
}
5
likes
160
points
90
downloads

Publisher

unverified uploader

Weekly Downloads

An interactive animated leaderboard widget for Flutter apps.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

cached_network_image, flutter, flutter_animate, flutter_svg

More

Packages that depend on animated_leaderboard