Added preliminary code for the carousel widget
This commit is contained in:
parent
40e91caf47
commit
cce2b668c0
1 changed files with 123 additions and 0 deletions
123
lib/src/widgets/carousel.dart
Normal file
123
lib/src/widgets/carousel.dart
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class Carousel extends StatefulWidget {
|
||||||
|
_CarouselState createState() => _CarouselState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _CarouselState extends State<Carousel> {
|
||||||
|
double _offset;
|
||||||
|
static const kDefaultItemSize = 100.0;
|
||||||
|
static const kDefaultSeparatorSize = 10.0;
|
||||||
|
ScrollController _controller = ScrollController();
|
||||||
|
int _currentWidgetIndex = 0;
|
||||||
|
initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller.addListener(displayCurrentWidget);
|
||||||
|
}
|
||||||
|
|
||||||
|
void scrollToItem(int itemIndex) {
|
||||||
|
final position = (kDefaultSeparatorSize + kDefaultItemSize) * itemIndex;
|
||||||
|
_controller.animateTo(
|
||||||
|
position,
|
||||||
|
curve: Curves.easeInOut,
|
||||||
|
duration: Duration(milliseconds: 300),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
void displayCurrentWidget() {
|
||||||
|
final currentPosition = _controller.offset;
|
||||||
|
int newWidgetIndex;
|
||||||
|
if (currentPosition < 0) {
|
||||||
|
newWidgetIndex = 0;
|
||||||
|
} else {
|
||||||
|
final distanceFromLower =
|
||||||
|
currentPosition % (kDefaultSeparatorSize + kDefaultItemSize);
|
||||||
|
if (distanceFromLower <= (kDefaultSeparatorSize + kDefaultItemSize) / 2) {
|
||||||
|
newWidgetIndex =
|
||||||
|
currentPosition ~/ (kDefaultSeparatorSize + kDefaultItemSize);
|
||||||
|
} else {
|
||||||
|
newWidgetIndex =
|
||||||
|
currentPosition ~/ (kDefaultSeparatorSize + kDefaultItemSize) + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (newWidgetIndex != _currentWidgetIndex) {
|
||||||
|
_currentWidgetIndex = newWidgetIndex;
|
||||||
|
print(_currentWidgetIndex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final width = MediaQuery.of(context).size.width;
|
||||||
|
_offset = width / 2 - 50;
|
||||||
|
return Container(
|
||||||
|
height: 100.0,
|
||||||
|
child: ListView(
|
||||||
|
controller: _controller,
|
||||||
|
scrollDirection: Axis.horizontal,
|
||||||
|
children: <Widget>[
|
||||||
|
SizedBox(width: _offset),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => scrollToItem(0),
|
||||||
|
behavior: HitTestBehavior.opaque,
|
||||||
|
child: Container(
|
||||||
|
color: Colors.white,
|
||||||
|
width: kDefaultItemSize,
|
||||||
|
child: Center(
|
||||||
|
child: Text('0'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(width: kDefaultSeparatorSize),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => scrollToItem(1),
|
||||||
|
behavior: HitTestBehavior.opaque,
|
||||||
|
child: Container(
|
||||||
|
color: Colors.white,
|
||||||
|
width: kDefaultItemSize,
|
||||||
|
child: Center(
|
||||||
|
child: Text('1'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(width: kDefaultSeparatorSize),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => scrollToItem(2),
|
||||||
|
behavior: HitTestBehavior.opaque,
|
||||||
|
child: Container(
|
||||||
|
color: Colors.white,
|
||||||
|
width: kDefaultItemSize,
|
||||||
|
child: Center(
|
||||||
|
child: Text('2'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(width: kDefaultSeparatorSize),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => scrollToItem(3),
|
||||||
|
behavior: HitTestBehavior.opaque,
|
||||||
|
child: Container(
|
||||||
|
color: Colors.white,
|
||||||
|
width: kDefaultItemSize,
|
||||||
|
child: Center(
|
||||||
|
child: Text('3'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(width: kDefaultSeparatorSize),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => scrollToItem(4),
|
||||||
|
behavior: HitTestBehavior.opaque,
|
||||||
|
child: Container(
|
||||||
|
color: Colors.white,
|
||||||
|
width: kDefaultItemSize,
|
||||||
|
child: Center(
|
||||||
|
child: Text('4'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(width: _offset),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue