Skip to content

Commit da6b827

Browse files
Kurogoma4DKurogoma4D
authored
Merge pull request #3 from cb-cloud/fix_indicator_position
Fix indicator position
2 parents f71f6e0 + 487115b commit da6b827

File tree

6 files changed

+94
-72
lines changed

6 files changed

+94
-72
lines changed

Diff for: ‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 1.0.0
2+
FEAT
3+
- Changed internal structure about indicator. It considers specified `separator`'s size now.
4+
- Added some doc comments and tests.
5+
- Tab sizes now re-calculate on changed text size by OS setting.
6+
17
## 0.1.0
28

39
First release.

Diff for: ‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# 📜 infinite_scroll_tab_view
2+
[![pub package](https://img.shields.io/pub/v/infinite_scroll_tab_view.svg)](https://pub.dev/packages/infinite_scroll_tab_view)
23

34
A Flutter package for tab view component that can scroll infinitely.
45

Diff for: ‎example/lib/main.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ class __ContentState extends State<_Content> {
6060
fontSize: 18,
6161
),
6262
),
63-
separator: BorderSide(color: Colors.black12, width: 1.0),
63+
separator: BorderSide(color: Colors.black12, width: 2.0),
6464
onPageChanged: (index) => print('page changed to $index.'),
6565
indicatorColor: Colors.pink,
6666
pageBuilder: (context, index, _) {

Diff for: ‎example/pubspec.lock

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ packages:
6666
path: ".."
6767
relative: true
6868
source: path
69-
version: "0.1.0"
69+
version: "1.0.0"
7070
matcher:
7171
dependency: transitive
7272
description:

Diff for: ‎lib/src/inner_infinite_scroll_tab_view.dart

+84-69
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@ class InnerInfiniteScrollTabViewState extends State<InnerInfiniteScrollTabView>
8585
final List<Tween<double>> _tabSizeTweens = [];
8686
List<Tween<double>> get tabSizeTweens => _tabSizeTweens;
8787

88+
double get indicatorWidth => widget.separator?.width ?? 2.0;
89+
8890
late final _indicatorAnimationController =
8991
AnimationController(vsync: this, duration: _tabAnimationDuration)
9092
..addListener(() {
@@ -259,53 +261,54 @@ class InnerInfiniteScrollTabViewState extends State<InnerInfiniteScrollTabView>
259261
Widget build(BuildContext context) {
260262
return Column(
261263
children: [
262-
SizedBox(
263-
height: widget.tabHeight,
264-
child: CycledListView.builder(
265-
scrollDirection: Axis.horizontal,
266-
controller: _tabController,
267-
contentCount: widget.contentLength,
268-
itemBuilder: (context, modIndex, rawIndex) {
269-
return Material(
270-
color: widget.backgroundColor,
271-
child: InkWell(
272-
onTap: () => _onTapTab(modIndex, rawIndex),
273-
child: ValueListenableBuilder<int>(
274-
valueListenable: _selectedIndex,
275-
builder: (context, index, _) =>
276-
ValueListenableBuilder<bool>(
277-
valueListenable: _isTabPositionAligned,
278-
builder: (context, tab, _) => _TabContent(
279-
isTabPositionAligned: tab,
280-
selectedIndex: index,
281-
indicatorColor: widget.indicatorColor,
282-
tabPadding: widget.tabPadding,
283-
modIndex: modIndex,
284-
tabBuilder: widget.tabBuilder,
285-
),
286-
),
287-
),
288-
),
289-
);
290-
},
291-
),
292-
),
293264
Stack(
294265
children: [
295-
if (widget.separator != null)
296-
Container(
297-
width: widget.size.width,
298-
decoration: BoxDecoration(
299-
border: Border(bottom: widget.separator!),
300-
),
266+
SizedBox(
267+
height: widget.tabHeight + (widget.separator?.width ?? 0),
268+
child: CycledListView.builder(
269+
scrollDirection: Axis.horizontal,
270+
controller: _tabController,
271+
contentCount: widget.contentLength,
272+
itemBuilder: (context, modIndex, rawIndex) {
273+
return Material(
274+
color: widget.backgroundColor,
275+
child: InkWell(
276+
onTap: () => _onTapTab(modIndex, rawIndex),
277+
child: ValueListenableBuilder<int>(
278+
valueListenable: _selectedIndex,
279+
builder: (context, index, _) =>
280+
ValueListenableBuilder<bool>(
281+
valueListenable: _isTabPositionAligned,
282+
builder: (context, tab, _) => _TabContent(
283+
isTabPositionAligned: tab,
284+
selectedIndex: index,
285+
indicatorColor: widget.indicatorColor,
286+
tabPadding: widget.tabPadding,
287+
modIndex: modIndex,
288+
tabBuilder: widget.tabBuilder,
289+
separator: widget.separator,
290+
indicatorWidth: indicatorWidth,
291+
),
292+
),
293+
),
294+
),
295+
);
296+
},
301297
),
302-
ValueListenableBuilder<bool>(
303-
valueListenable: _isTabPositionAligned,
304-
builder: (context, value, _) => Visibility(
305-
visible: value,
306-
child: _CenteredIndicator(
307-
indicatorColor: widget.indicatorColor,
308-
size: _indicatorSize,
298+
),
299+
Positioned(
300+
bottom: 0,
301+
left: 0,
302+
right: 0,
303+
child: ValueListenableBuilder<bool>(
304+
valueListenable: _isTabPositionAligned,
305+
builder: (context, value, _) => Visibility(
306+
visible: value,
307+
child: _CenteredIndicator(
308+
indicatorColor: widget.indicatorColor,
309+
size: _indicatorSize,
310+
indicatorWidth: indicatorWidth,
311+
),
309312
),
310313
),
311314
),
@@ -363,6 +366,8 @@ class _TabContent extends StatelessWidget {
363366
required this.tabPadding,
364367
required this.indicatorColor,
365368
required this.tabBuilder,
369+
this.separator,
370+
required this.indicatorWidth,
366371
}) : super(key: key);
367372

368373
final int modIndex;
@@ -371,26 +376,37 @@ class _TabContent extends StatelessWidget {
371376
final double tabPadding;
372377
final Color indicatorColor;
373378
final SelectIndexedTextBuilder tabBuilder;
379+
final BorderSide? separator;
380+
final double indicatorWidth;
374381

375382
@override
376383
Widget build(BuildContext context) {
377-
return Container(
378-
padding: EdgeInsets.symmetric(
379-
horizontal: tabPadding,
380-
),
381-
decoration: BoxDecoration(
382-
border: Border(
383-
bottom: selectedIndex == modIndex && !isTabPositionAligned
384-
? BorderSide(
385-
color: indicatorColor,
386-
width: 2.0,
387-
)
388-
: BorderSide.none,
384+
return Stack(
385+
clipBehavior: Clip.none,
386+
children: [
387+
Container(
388+
padding: EdgeInsets.symmetric(horizontal: tabPadding),
389+
decoration: BoxDecoration(
390+
border: Border(bottom: separator ?? BorderSide.none),
391+
),
392+
child: Center(
393+
child: tabBuilder(modIndex, selectedIndex == modIndex),
394+
),
389395
),
390-
),
391-
child: Center(
392-
child: tabBuilder(modIndex, selectedIndex == modIndex),
393-
),
396+
if (selectedIndex == modIndex && !isTabPositionAligned)
397+
Positioned(
398+
bottom: 0,
399+
left: 0,
400+
right: 0,
401+
child: Container(
402+
height: indicatorWidth,
403+
decoration: BoxDecoration(
404+
borderRadius: BorderRadius.circular(indicatorWidth),
405+
color: indicatorColor,
406+
),
407+
),
408+
)
409+
],
394410
);
395411
}
396412
}
@@ -400,26 +416,25 @@ class _CenteredIndicator extends StatelessWidget {
400416
Key? key,
401417
required this.indicatorColor,
402418
required this.size,
419+
required this.indicatorWidth,
403420
}) : super(key: key);
404421

405422
final Color indicatorColor;
406423
final ValueNotifier<double> size;
424+
final double indicatorWidth;
407425

408426
@override
409427
Widget build(BuildContext context) {
410428
return ValueListenableBuilder<double>(
411429
valueListenable: size,
412430
builder: (context, value, _) => Center(
413-
child: Transform.translate(
414-
offset: const Offset(0.0, -2.0),
415-
child: Container(
416-
height: 2.0,
417-
decoration: BoxDecoration(
418-
borderRadius: BorderRadius.circular(4),
419-
color: indicatorColor,
420-
),
421-
width: value,
431+
child: Container(
432+
height: indicatorWidth,
433+
decoration: BoxDecoration(
434+
borderRadius: BorderRadius.circular(indicatorWidth),
435+
color: indicatorColor,
422436
),
437+
width: value,
423438
),
424439
),
425440
);

Diff for: ‎pubspec.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: infinite_scroll_tab_view
22
description: A Flutter package for tab view component that can scroll infinitely.
3-
version: 0.1.0
3+
version: 1.0.0
44
repository: https://github.com/cb-cloud/flutter_infinite_scroll_tab_view
55

66
environment:

0 commit comments

Comments
 (0)