flutter_carousel/example/lib/main.dart

102 lines
3.3 KiB
Dart
Raw Normal View History

2022-08-24 16:38:36 +02:00
import 'package:carousel/carousel.dart';
import 'package:carousel/models/card_transform.dart';
import 'package:carousel_example/pokemon.dart';
import 'package:carousel_example/pokemon_card.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(const CarouselExampleApp());
}
class CarouselExampleApp extends StatefulWidget {
const CarouselExampleApp({Key? key}) : super(key: key);
@override
State<CarouselExampleApp> createState() => _CarouselExampleAppState();
}
class _CarouselExampleAppState extends State<CarouselExampleApp> {
Pokemon? selected;
final List<Pokemon> pokemons = [
Pokemon(name: 'Bulbasaur', nr: 1, types: ['grass', 'poison']),
Pokemon(name: 'Charmander', nr: 4, types: ['fire']),
Pokemon(name: 'Squirtle', nr: 7, types: ['water']),
Pokemon(name: 'Caterpie', nr: 10, types: ['bug']),
Pokemon(name: 'Pidgey', nr: 16, types: ['normal', 'flying']),
Pokemon(name: 'Pikachu', nr: 25, types: ['electric']),
Pokemon(name: 'Machop', nr: 66, types: ['fighting']),
Pokemon(name: 'Geodude', nr: 74, types: ['rock', 'ground']),
];
Widget _buildCard(BuildContext context, int index) {
return PokemonCard(
pokemon: pokemons[index % pokemons.length],
);
}
void _onClick(int index) {
setState(() {
selected = pokemons[index % pokemons.length];
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
alignment: Alignment.bottomCenter,
children: [
SafeArea(
child: ListView(
children: [
const SizedBox(height: 50),
Carousel(
pageViewHeight: 220,
selectableCardId: 4,
onCardClick: _onClick,
transforms: [
CardTransform(
x: 220, y: -85, angle: -math.pi / 12, scale: 0.3),
CardTransform(
x: 230, y: -80, angle: math.pi / 12, scale: 0.5),
CardTransform(
x: 200, y: -75, angle: -math.pi / 12, scale: 0.6),
CardTransform(
x: 110, y: -60, angle: math.pi / 12, scale: 0.7),
CardTransform(x: 0, y: 0, angle: 0, scale: 1),
CardTransform(
x: -270, y: 70, angle: -math.pi / 50, scale: 1),
],
builder: _buildCard,
),
Carousel(
selectableCardId: 1,
onCardClick: _onClick,
alignment: Alignment.center,
transforms: [
CardTransform(x: 0, y: 0, angle: 0, scale: 0.5),
CardTransform(x: 0, y: 0, angle: 0, scale: 1),
CardTransform(
x: 300, y: 0, angle: math.pi / 20, scale: 1),
],
builder: _buildCard,
),
],
),
),
if (selected != null)
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Text('Clicked: ${selected!.name}'),
),
],
),
),
);
}
}