Skip to content

L
llswidget
Commit d4eea63e by Rizal Hermawan
Options

feat (ui component): add and implemet carousel, toggle and toast components. Story #1

parent 6cd0f405
Showing with 1531 additions and 37 deletions
.packages
......@@ -3,7 +3,7 @@
#
# For more info see: https://dart.dev/go/dot-packages-deprecation
#
# Generated by pub on 2021-06-06 22:23:03.881705.
# Generated by pub on 2021-06-06 23:23:01.508898.
async:file:///D:/flutter/2.0.4-stable/.pub-cache/hosted/pub.dartlang.org/async-2.5.0/lib/
boolean_selector:file:///D:/flutter/2.0.4-stable/.pub-cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib/
characters:file:///D:/flutter/2.0.4-stable/.pub-cache/hosted/pub.dartlang.org/characters-1.1.0/lib/
......
CHANGELOG.md
## 0.0.5 - 2021-06-06
### feat (ui component): add and implemet carousel, toggle and toast components.
## 0.0.4 - 2021-06-06
### feat (ui component): implemet tab components on example project.
## 0.0.3 - 2021-06-06
### feat (ui component): implemet alert, appbar, avatar, badge button badge and icon badge components on example project.
......
example/.packages
......@@ -3,7 +3,7 @@
#
# For more info see: https://dart.dev/go/dot-packages-deprecation
#
# Generated by pub on 2021-06-06 22:23:06.760747.
# Generated by pub on 2021-06-06 23:23:05.084775.
async:file:///D:/flutter/2.0.4-stable/.pub-cache/hosted/pub.dartlang.org/async-2.5.0/lib/
bloc:file:///D:/flutter/2.0.4-stable/.pub-cache/hosted/pub.dartlang.org/bloc-7.0.0/lib/
boolean_selector:file:///D:/flutter/2.0.4-stable/.pub-cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib/
......
example/lib/ui/pages/buttons_page/buttons_page.dart
part of '../pages.dart';
part of '../pages.dart';
class ButtonsPage extends StatefulWidget {
static const routeName = '/buttons_page/buttons_page';
......
example/lib/ui/pages/carousel_page.dart 0 → 100644
part of 'pages.dart';
final List<String> imageList = [
'assets/images/card3.png',
'assets/images/card2.png',
'assets/images/image1.png',
'assets/images/image2.png',
'assets/images/card4.png',
];
class CarouselPage extends StatefulWidget {
const CarouselPage({ Key? key }) : super(key: key);
static const routeName = '/carousel_page';
@override
_CarouselPageState createState() => _CarouselPageState();
}
class _CarouselPageState extends State<CarouselPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: LLSColors.PRIMARY,
leading: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(
CupertinoIcons.back,
color: LLSColors.WHITE,
),
),
title: const Text(
'Carousel',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
children: <Widget>[
const Padding(
padding: EdgeInsets.only(left: 15, top: 30, bottom: 15),
child: LLSLabel(
text: 'Full Width',
type: LLSLabelType.typo4,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCarousel(
autoPlay: true,
pagination: true,
viewportFraction: 1.0,
activeIndicator: LLSColors.SUCCESS,
passiveIndicator: LLSColors.DARK,
aspectRatio: 2,
items: imageList
.map(
(url) => LLSImageOverlay(
height: 200,
margin: const EdgeInsets.only(
left: 15,
right: 15,
bottom: 30,
),
borderRadius: const BorderRadius.all(Radius.circular(4)),
child: Padding(
padding: const EdgeInsets.only(top: 30, left: 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
Text(
'Title',
style: TextStyle(color: LLSColors.WHITE),
),
Padding(
padding: EdgeInsets.only(left: 30, right: 30, top: 30),
child: Text(
'Locator Logic is a powerful and unique analytic tool, created based on Indonesian market demand. Becoming and remaining successful in a constantly changing environment, requires more and better data.',
textAlign: TextAlign.center,
style: TextStyle(color: LLSColors.LIGHT),
),
)
],
),
),
image: AssetImage(url),
),
)
.toList(),
onPageChanged: (index) {
setState(() {});
},
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 30, bottom: 15),
child: LLSLabel(
text: 'Full Size',
type: LLSLabelType.typo4,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCarousel(
autoPlay: true,
pagination: true,
viewportFraction: 1.0,
activeIndicator: LLSColors.SUCCESS,
passiveIndicator: LLSColors.WHITE,
aspectRatio: 2,
items: imageList
.map(
(url) => LLSImageOverlay(
height: 200,
margin: const EdgeInsets.only(left: 15, right: 15),
borderRadius: const BorderRadius.all(Radius.circular(4)),
child: Padding(
padding: const EdgeInsets.only(top: 30, left: 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
Text(
'Title',
style: TextStyle(color: LLSColors.WHITE),
),
Padding(
padding: EdgeInsets.only(
left: 30,
right: 30,
top: 30,
),
child: Text(
'Locator Logic is a powerful and unique analytic tool, created based on Indonesian market demand. Becoming and remaining successful in a constantly changing environment, requires more and better data.',
textAlign: TextAlign.center,
style: TextStyle(color: LLSColors.LIGHT),
),
)
],
),
),
image: AssetImage(url),
),
)
.toList(),
onPageChanged: (index) {
setState(() {});
},
),
const SizedBox(
height: 20,
)
],
),
);
}
}
\ No newline at end of file
example/lib/ui/pages/tabs_page/tabs_page.dart 0 → 100644
part of '../pages.dart';
class TabsPage extends StatefulWidget {
static const routeName = '/tabs_page/tabs_page';
@override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: LLSColors.PRIMARY,
leading: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
child: Icon(
CupertinoIcons.back,
color: LLSColors.WHITE,
),
),
),
title: const Text(
'Tabs',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
children: <Widget>[
const SizedBox(
height: 20,
),
GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(
SegmentedTabPage.routeName
);
},
child: Container(
margin: const EdgeInsets.only(left: 15, right: 15, top: 20),
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(7)),
color: LLSColors.SECONDARY,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.40),
blurRadius: 5
)
]
),
child: LLSListTile(
color: LLSColors.SECONDARY,
title: const Text(
'Segmented Tab',
style: TextStyle(color: LLSColors.WHITE),
),
icon: Icon(
CupertinoIcons.forward,
color: LLSColors.WHITE,
)
),
)
),
GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(
IconTabPage.routeName
);
},
child: Container(
margin: const EdgeInsets.only(left: 15, right: 15, top: 20),
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(7)),
color: LLSColors.SECONDARY,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.40),
blurRadius: 5
)
]
),
child: LLSListTile(
color: LLSColors.SECONDARY,
title: const Text(
'Icon Tab',
style: TextStyle(color: LLSColors.WHITE),
),
icon: Icon(
CupertinoIcons.forward,
color: LLSColors.WHITE,
)
),
)
),
GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(
LabeledTabPage.routeName
);
},
child: Container(
margin: const EdgeInsets.only(left: 15, right: 15, top: 20),
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(7)),
color: LLSColors.SECONDARY,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.40),
blurRadius: 5
)
]
),
child: LLSListTile(
color: LLSColors.SECONDARY,
title: const Text(
'Labeled Tab',
style: TextStyle(color: LLSColors.WHITE),
),
icon: Icon(
CupertinoIcons.forward,
color: LLSColors.WHITE,
)
),
)
),
GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(
BottomIconTabPage.routeName
);
},
child: Container(
margin: const EdgeInsets.only(left: 15, right: 15, top: 20),
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(7)),
color: LLSColors.SECONDARY,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.40),
blurRadius: 5
)
]
),
child: LLSListTile(
color: LLSColors.SECONDARY,
title: const Text(
'Bottom Icon Tab',
style: TextStyle(color: LLSColors.WHITE),
),
icon: Icon(
CupertinoIcons.forward,
color: LLSColors.WHITE,
)
),
)
),
GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(
BottomLabeledTabPage.routeName
);
},
child: Container(
margin: const EdgeInsets.only(left: 15, right: 15, top: 20),
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(7)),
color: LLSColors.SECONDARY,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.40),
blurRadius: 5
)
]
),
child: LLSListTile(
color: LLSColors.SECONDARY,
title: const Text(
'Bottom Labeled Tab',
style: TextStyle(color: LLSColors.WHITE),
),
icon: Icon(
CupertinoIcons.forward,
color: LLSColors.WHITE,
)
),
)
),
]
)
);
}
}
\ No newline at end of file
example/lib/ui/pages/tiles_page.dart
......@@ -25,48 +25,68 @@ class _TilesPageState extends State<TilesPage> {
),
),
title: const Text(
'List Tiles',
'Tiles',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
children: <Widget>[
const SizedBox(
height: 20,
const Padding(
padding: EdgeInsets.only(left: 15, top: 30),
child: LLSLabel(
text: 'With Label',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(
StandardsButtonPage.routeName
);
},
child: Container(
margin: const EdgeInsets.only(left: 15, right: 15, top: 20),
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(7)),
color: LLSColors.SECONDARY,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.40),
blurRadius: 5
)
]
),
child: LLSListTile(
color: LLSColors.SECONDARY,
title: const Text(
'Text Online',
style: TextStyle(color: LLSColors.WHITE),
LLSCard(
content: LLSListTile(
titleText: 'Title',
subTitleText: 'Open source UI library',
icon: Icon(Icons.favorite),
),
),
LLSCard(
padding: EdgeInsets.zero,
content: LLSListTile(
avatar: Icon(Icons.favorite),
titleText: 'Title',
icon: const Text('Caption'),
),
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 5),
child: LLSLabel(
text: 'With Avatar',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
const LLSCard(
padding: EdgeInsets.zero,
content: LLSListTile(
avatar: LLSAvatar(
backgroundImage: AssetImage('assets/images/avatar.png'),
shape: LLSAvatarShape.circle,
),
titleText: 'Title',
subTitleText: 'Open source UI library',
),
),
const LLSCard(
padding: EdgeInsets.zero,
content: LLSListTile(
avatar: LLSAvatar(
shape: LLSAvatarShape.rounded,
backgroundImage: AssetImage('assets/images/avatar.png'),
),
titleText: 'Title',
icon: Text('Caption'),
),
icon: Icon(
CupertinoIcons.forward,
color: LLSColors.WHITE,
)
),
)
)
]
)
);
......
example/lib/ui/pages/toast_page.dart 0 → 100644
part of 'pages.dart';
class ToastPage extends StatefulWidget {
const ToastPage({ Key? key }) : super(key: key);
static const routeName = '/toast_page';
@override
_ToastPageState createState() => _ToastPageState();
}
class _ToastPageState extends State<ToastPage> {
bool showFloatingToast = true;
bool showblurness = true;
Duration autoTimerDuration = Duration(milliseconds: 400);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: LLSColors.PRIMARY,
leading: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(
CupertinoIcons.back,
color: LLSColors.WHITE,
),
),
title: const Text(
'Toast',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
physics: const ScrollPhysics(),
children: <Widget>[
const Padding(
padding: EdgeInsets.only(left: 15, top: 30, bottom: 10),
child: LLSLabel(
text: 'Animated Toasts (Auto Dismissable)',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSToast(
text: 'Auto Dismissable after the given duration !',
button: LLSButton(
onPressed: () {},
text: 'OK',
type: LLSButtonType.transparent,
color: LLSColors.SUCCESS,
),
autoDismiss: true,
duration: const Duration(seconds: 1),
),
const SizedBox(
height: 15,
),
const LLSToast(
text: 'Pass true to autoDismiss property to use this effect!',
autoDismiss: true,
duration: Duration(seconds: 2),
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 30, bottom: 10),
child: LLSLabel(
text: 'Basic Toasts',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSToast(
text: 'Paired Succesfully !',
button: LLSButton(
onPressed: () {},
text: 'OK',
type: LLSButtonType.transparent,
color: LLSColors.SUCCESS,
),
autoDismiss: false,
duration: const Duration(milliseconds: 300),
alignment: Alignment.topLeft,
),
const SizedBox(
height: 15,
),
LLSToast(
text:
'This item already has the label “travel”. You can add new label. !',
button: LLSButton(
onPressed: () {},
text: 'OK',
type: LLSButtonType.transparent,
color: LLSColors.SUCCESS,
),
autoDismiss: false,
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 30, bottom: 10),
child: LLSLabel(
text: 'Rounded Toasts',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSToast(
text: 'Paired Succesfully !',
button: LLSButton(
onPressed: () {},
text: 'OK',
type: LLSButtonType.transparent,
color: LLSColors.SUCCESS,
),
type: LLSToastType.rounded,
autoDismiss: false,
alignment: Alignment.topLeft,
),
const SizedBox(
height: 15,
),
LLSToast(
text:
'This item already has the label “travel”. You can add a new label. !',
button: LLSButton(
onPressed: () {},
text: 'OK',
type: LLSButtonType.transparent,
color: LLSColors.SUCCESS,
),
autoDismiss: false,
type: LLSToastType.rounded,
alignment: Alignment.topLeft,
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 30, bottom: 10),
child: LLSLabel(
text: 'Full Width Toasts',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSToast(
text: 'Paired Succesfully !',
button: LLSButton(
onPressed: () {},
text: 'OK',
type: LLSButtonType.transparent,
color: LLSColors.SUCCESS,
),
type: LLSToastType.fullWidth,
autoDismiss: false,
),
const SizedBox(
height: 15,
),
LLSToast(
text:
'This item already has the label “travel”. You can add a new label.!',
button: LLSButton(
onPressed: () {},
text: 'OK',
type: LLSButtonType.transparent,
color: LLSColors.SUCCESS,
),
autoDismiss: false,
type: LLSToastType.fullWidth,
),
const SizedBox(
height: 20,
),
],
),
);
}
}
\ No newline at end of file
example/lib/ui/pages/toggle_page.dart 0 → 100644
part of 'pages.dart';
class TogglePage extends StatefulWidget {
const TogglePage({ Key? key }) : super(key: key);
static const routeName = '/toggle_page';
@override
_TogglePageState createState() => _TogglePageState();
}
class _TogglePageState extends State<TogglePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: LLSColors.PRIMARY,
leading: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(
CupertinoIcons.back,
color: LLSColors.WHITE,
),
),
title: const Text(
'Toggle/Switch',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: Container(
child: Column(
children: <Widget>[
const Padding(
padding: EdgeInsets.only(left: 15, top: 30, bottom: 10),
child: LLSLabel(
text: 'Basic',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCard(
content: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
LLSToggle(
onChanged: (val) {
print('on change val $val');
},
value: true,
),
LLSToggle(
enabledTrackColor: LLSColors.DANGER,
onChanged: (val) {
print('on change val $val');
},
value: true,
),
LLSToggle(
enabledTrackColor: LLSColors.WARNING,
onChanged: (val) {
print('on change val $val');
},
value: true,
),
LLSToggle(
enabledTrackColor: LLSColors.INFO,
onChanged: (val) {
print('on change val $val');
},
value: true,
)
],
)
],
),
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 10),
child: LLSLabel(
text: 'IOS',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCard(
content: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
LLSToggle(
onChanged: (v) {
print('ios val $v');
},
value: true,
type: LLSToggleType.ios,
),
LLSToggle(
enabledTrackColor: LLSColors.DANGER,
onChanged: (v) {
print('ios val $v');
},
value: true,
type: LLSToggleType.ios,
),
LLSToggle(
enabledTrackColor: LLSColors.WARNING,
onChanged: (v) {
print('ios val $v');
},
value: true,
type: LLSToggleType.ios,
),
LLSToggle(
enabledTrackColor: LLSColors.INFO,
onChanged: (v) {
print('ios val $v');
},
value: true,
type: LLSToggleType.ios,
)
],
)
],
),
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 10),
child: LLSLabel(
text: 'Square',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCard(
content: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
LLSToggle(
onChanged: (val) {
print('on change val $val');
},
value: true,
type: LLSToggleType.square,
),
LLSToggle(
enabledTrackColor: LLSColors.DANGER,
onChanged: (val) {
print('on change val $val');
},
value: true,
type: LLSToggleType.square,
),
LLSToggle(
enabledTrackColor: LLSColors.WARNING,
onChanged: (val) {
print('on change val $val');
},
value: true,
type: LLSToggleType.square,
),
LLSToggle(
enabledTrackColor: LLSColors.INFO,
onChanged: (val) {
print('on change val $val');
},
value: true,
type: LLSToggleType.square,
)
],
)
],
),
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 10),
child: LLSLabel(
text: 'Custom',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCard(
content: Column(
children: <Widget>[
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
LLSToggle(
onChanged: (val) {
print('on change val $val');
},
value: true,
type: LLSToggleType.custom,
),
LLSToggle(
onChanged: (val) {
print('on change val $val');
},
value: true,
type: LLSToggleType.android,
boxShape: BoxShape.rectangle,
enabledTrackColor: LLSColors.DANGER,
),
LLSToggle(
onChanged: (val) {
print('on change val $val');
},
value: true,
type: LLSToggleType.ios,
boxShape: BoxShape.rectangle,
enabledTrackColor: LLSColors.WARNING,
borderRadius:
const BorderRadius.all(Radius.circular(0)),
),
LLSToggle(
onChanged: (val) {
print('on change val $val');
},
value: true,
type: LLSToggleType.ios,
boxShape: BoxShape.rectangle,
enabledText: 'ON',
disabledText: 'OFF',
enabledTrackColor: LLSColors.INFO,
borderRadius:
const BorderRadius.all(Radius.circular(0)),
)
],
),
],
),
),
],
),
),
);
}
}
\ No newline at end of file
example/pubspec.lock
......@@ -124,7 +124,7 @@ packages:
path: ".."
relative: true
source: path
version: "0.0.4"
version: "0.0.5"
matcher:
dependency: transitive
description:
......
lib/llswidget.dart
......@@ -52,3 +52,13 @@ export 'package:llswidget/src/components/badge/shape/lls_badge_shape.dart';
export 'package:llswidget/src/components/badge/lls_button_badge.dart';
//exports icon badge
export 'package:llswidget/src/components/badge/lls_icon_badge.dart';
//exports carousel
export 'package:llswidget/src/components/carousel/lls_carousel.dart';
//exports toast
export 'package:llswidget/src/components/toast/lls_toast.dart';
//exports toast type
export 'package:llswidget/src/components/toast/type/lls_toast_type.dart';
//exports toggle
export 'package:llswidget/src/components/toggle/lls_toggle.dart';
//exports toggle type
export 'package:llswidget/src/components/toggle/type/lls_toggle_type.dart';
\ No newline at end of file
lib/src/components/carousel/lls_carousel.dart 0 → 100644
import 'dart:async';
import 'package:flutter/material.dart';
class LLSCarousel extends StatefulWidget {
const LLSCarousel({
Key? key,
required this.items,
this.pagerSize,
this.passiveIndicator,
this.activeIndicator,
this.pagination,
this.height,
this.aspectRatio = 16 / 9,
this.viewportFraction = 0.8,
this.initialPage = 0,
this.enableInfiniteScroll = true,
this.reverse = false,
this.autoPlay = false,
this.autoPlayInterval = const Duration(seconds: 4),
this.autoPlayAnimationDuration = const Duration(milliseconds: 800),
this.autoPlayCurve = Curves.fastOutSlowIn,
this.pauseAutoPlayOnTouch,
this.enlargeMainPage = false,
this.onPageChanged,
this.scrollPhysics,
this.scrollDirection = Axis.horizontal,
}) : super(key: key);
final double? pagerSize;
final Color? activeIndicator;
final Color? passiveIndicator;
final bool? pagination;
final List<Widget> items;
final double? height;
final double aspectRatio;
final num viewportFraction;
final int initialPage;
final bool enableInfiniteScroll;
final bool reverse;
final bool autoPlay;
final Duration autoPlayInterval;
final Duration autoPlayAnimationDuration;
final Curve autoPlayCurve;
final Duration? pauseAutoPlayOnTouch;
final bool enlargeMainPage;
final Axis scrollDirection;
final Function(int index)? onPageChanged;
final ScrollPhysics? scrollPhysics;
List<T> map<T>(List list, Function handler) {
List<T> result;
result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}
@override
_LLSCarouselState createState() => _LLSCarouselState();
}
class _LLSCarouselState extends State<LLSCarousel> with TickerProviderStateMixin {
Timer? timer;
double size = 0;
double width = 0;
late PageController pageController;
int realPage = 10000;
int? currentSlide;
@override
void initState() {
super.initState();
realPage = widget.enableInfiniteScroll
// ignore: avoid_as
? realPage + widget.initialPage
// ignore: avoid_as
: widget.initialPage;
pageController = PageController(
// ignore: avoid_as
viewportFraction: widget.viewportFraction as double,
initialPage: widget.enableInfiniteScroll
// ignore: avoid_as
? realPage + widget.initialPage
// ignore: avoid_as
: widget.initialPage,
);
timer = getPlayTimer();
}
Timer getPlayTimer() => Timer.periodic(widget.autoPlayInterval, (_) {
if (widget.autoPlay && widget.items.length > 1) {
pageController.nextPage(
duration: widget.autoPlayAnimationDuration,
curve: widget.autoPlayCurve);
}
});
void pauseOnTouch() {
timer?.cancel();
timer = Timer(widget.pauseAutoPlayOnTouch!, () {
timer = getPlayTimer();
});
}
Widget getPageWrapper(Widget child) {
if (widget.height != null) {
final Widget wrapper = Container(height: widget.height, child: child);
return widget.autoPlay && widget.pauseAutoPlayOnTouch != null
? addGestureDetection(wrapper)
: wrapper;
} else {
final Widget wrapper =
AspectRatio(aspectRatio: widget.aspectRatio, child: child);
return widget.autoPlay && widget.pauseAutoPlayOnTouch != null
? addGestureDetection(wrapper)
: wrapper;
}
}
Widget addGestureDetection(Widget child) =>
GestureDetector(onPanDown: (_) => pauseOnTouch(), child: child);
@override
void dispose() {
timer?.cancel();
super.dispose();
}
void onPageSlide(int index) {
setState(() => currentSlide = index);
}
@override
Widget build(BuildContext context) => Stack(
children: <Widget>[
getPageWrapper(PageView.builder(
physics: widget.scrollPhysics,
scrollDirection: widget.scrollDirection,
controller: pageController,
reverse: widget.reverse,
itemCount: widget.items.length == 1
? widget.items.length
: widget.enableInfiniteScroll
? null
: widget.items.length,
onPageChanged: (int index) {
int currentPage;
currentPage = _getRealIndex(
index + widget.initialPage, realPage, widget.items.length);
if (widget.onPageChanged != null) {
widget.onPageChanged!(currentPage);
}
if (widget.pagination == true) {
onPageSlide(currentPage);
}
},
itemBuilder: (BuildContext context, int i) {
int index;
index = _getRealIndex(
i + widget.initialPage,
realPage,
widget.items.length,
);
currentSlide = widget.initialPage;
return AnimatedBuilder(
animation: pageController,
child: widget.items[index],
builder: (BuildContext context, child) {
double value;
try {
value = pageController.page! - i;
// ignore: avoid_catches_without_on_clauses
} catch (e) {
final BuildContext storageContext =
pageController.position.context.storageContext;
final double? previousSavedPosition =
PageStorage.of(storageContext)
?.readState(storageContext);
if (previousSavedPosition != null) {
value = previousSavedPosition - i.toDouble();
} else {
value = realPage.toDouble() - i.toDouble();
}
}
value = (1 - (value.abs() * 0.3)).clamp(0.0, 1.0);
final double height = widget.height ??
MediaQuery.of(context).size.width *
(1 / widget.aspectRatio);
final double distortionValue = widget.enlargeMainPage
? Curves.easeOut.transform(value)
: 1.0;
if (widget.scrollDirection == Axis.horizontal) {
return Center(
child: SizedBox(
height: distortionValue * height,
child: child,
),
);
} else {
return Center(
child: SizedBox(
width: distortionValue *
MediaQuery.of(context).size.width,
child: child),
);
}
},
);
},
)),
widget.pagination == true
? Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: widget.map<Widget>(
widget.items,
(pagerIndex, url) => Container(
width: widget.pagerSize == null
? 8.0
: widget.pagerSize,
height: widget.pagerSize == null
? 8.0
: widget.pagerSize,
margin: const EdgeInsets.symmetric(
vertical: 10, horizontal: 2),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: currentSlide == pagerIndex
? widget.activeIndicator == null
? const Color.fromRGBO(0, 0, 0, 0.9)
: widget.activeIndicator!
: widget.passiveIndicator == null
? const Color.fromRGBO(0, 0, 0, 0.4)
: widget.passiveIndicator!,
),
)
// ignore: avoid_as
),
),
),
)
: Container(),
],
);
}
int _getRealIndex(int position, int base, int length) {
final int offset = position - base;
return _remainder(offset, length);
}
int _remainder(int input, int source) {
final int result = input % source;
return result < 0 ? source + result : result;
}
\ No newline at end of file
lib/src/components/toast/lls_toast.dart 0 → 100644
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:llswidget/llswidget.dart';
class LLSToast extends StatefulWidget {
const LLSToast({
Key? key,
this.child,
this.button,
this.backgroundColor,
this.text,
this.width,
this.type = LLSToastType.basic,
this.autoDismiss = true,
this.alignment,
this.animationDuration = const Duration(milliseconds: 300),
this.duration = const Duration(milliseconds: 300),
this.textStyle = const TextStyle(color: Colors.white70),
this.autoDismissDuration = const Duration(milliseconds: 3000),
}) : super(key: key);
final Widget? child;
final Widget? button;
final Color? backgroundColor;
final String? text;
final TextStyle textStyle;
final double? width;
final LLSToastType type;
final bool autoDismiss;
final Duration animationDuration;
final Duration duration;
final Duration autoDismissDuration;
final Alignment? alignment;
@override
_LLSToastState createState() => _LLSToastState();
}
class _LLSToastState extends State<LLSToast> with TickerProviderStateMixin {
late AnimationController animationController, fadeAnimationController;
late Animation<double> animation, fadeAnimation;
Timer? timer;
bool hideToast = false;
@override
void initState() {
animationController = AnimationController(duration: widget.duration, vsync: this);
animation = CurvedAnimation(
parent: animationController,
curve: Curves.easeIn,
);
if (mounted) {
animationController.forward();
fadeAnimationController =
AnimationController(duration: widget.animationDuration, vsync: this)
..addListener(() => setState(() {}));
fadeAnimation = Tween<double>(
begin: 0,
end: 1,
).animate(fadeAnimationController);
timer = Timer(widget.duration, () {
if (mounted) {
fadeAnimationController.forward();
}
});
fadeAnimation = Tween<double>(
begin: 1,
end: 0,
).animate(fadeAnimationController);
fadeAnimation.addStatusListener((AnimationStatus state) {
if (fadeAnimation.isCompleted && widget.autoDismiss) {
setState(() {
hideToast = true;
});
}
});
}
super.initState();
}
@override
void dispose() {
animationController.dispose();
fadeAnimationController.dispose();
timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) => hideToast
? Container()
: FadeTransition(
opacity: widget.autoDismiss ? fadeAnimation : animation,
child: Column(
children: <Widget>[
Container(
width: widget.type == LLSToastType.fullWidth
? MediaQuery.of(context).size.width
: widget.width ?? MediaQuery.of(context).size.width * 0.885,
constraints: const BoxConstraints(minHeight: 50),
margin: widget.type == LLSToastType.fullWidth
? const EdgeInsets.only(left: 0, right: 0)
: const EdgeInsets.only(left: 10, right: 10),
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: widget.type == LLSToastType.basic
? BorderRadius.circular(0)
: widget.type == LLSToastType.rounded
? BorderRadius.circular(10)
: BorderRadius.zero,
color: widget.backgroundColor ?? const Color(0xff323232),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.40),
blurRadius: 6,
)
]
),
child: Row(
children: <Widget>[
Flexible(
flex: 7,
fit: FlexFit.tight,
child: Align(
alignment: widget.alignment ?? Alignment.topLeft,
child: widget.text != null
? Text(widget.text!, style: widget.textStyle)
: (widget.child ?? Container()),
),
),
const SizedBox(
width: 10,
),
widget.button != null
? Flexible(
flex: 4,
fit: FlexFit.tight,
child: Align(
alignment: Alignment.topRight,
child: widget.button,
)
)
: Container()
],
),
),
],
),
);
}
\ No newline at end of file
lib/src/components/toast/type/lls_toast_type.dart 0 → 100644
enum LLSToastType {
basic,
rounded,
fullWidth,
}
\ No newline at end of file
lib/src/components/toggle/lls_toggle.dart 0 → 100644
import 'package:flutter/material.dart';
import 'package:llswidget/llswidget.dart';
class LLSToggle extends StatefulWidget {
const LLSToggle(
{Key? key,
required this.onChanged,
required this.value,
this.enabledText,
this.disabledText,
this.enabledTextStyle,
this.enabledThumbColor,
this.enabledTrackColor,
this.disabledTextStyle,
this.disabledTrackColor,
this.disabledThumbColor,
this.type,
this.boxShape,
this.borderRadius,
this.duration = const Duration(milliseconds: 400)}
) : super(key: key);
final String? enabledText;
final String? disabledText;
final TextStyle? enabledTextStyle;
final TextStyle? disabledTextStyle;
final Color? enabledThumbColor;
final Color? disabledThumbColor;
final Color? enabledTrackColor;
final Color? disabledTrackColor;
final BoxShape? boxShape;
final BorderRadius? borderRadius;
final Duration duration;
final LLSToggleType? type;
final bool value;
final ValueChanged<bool?> onChanged;
@override
_LLSToggleState createState() => _LLSToggleState();
}
class _LLSToggleState extends State<LLSToggle> with TickerProviderStateMixin {
AnimationController? animationController;
Animation<double>? animation;
late AnimationController controller;
late Animation<Offset> offset;
late bool isOn;
@override
void initState() {
isOn = widget.value;
controller = AnimationController(duration: widget.duration, vsync: this);
offset = (isOn
? Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
)
: Tween<Offset>(
begin: Offset.zero,
end: const Offset(1, 0),
))
.animate(controller);
super.initState();
}
@override
void dispose() {
animationController?.dispose();
controller.dispose();
super.dispose();
}
void onStatusChange() {
setState(() {
isOn = !isOn;
});
switch (controller.status) {
case AnimationStatus.dismissed:
controller.forward();
break;
case AnimationStatus.completed:
controller.reverse();
break;
default:
}
widget.onChanged(isOn);
}
@override
Widget build(BuildContext context) => Stack(
children: <Widget>[
Container(
height: widget.type == LLSToggleType.android ? 25 : 30,
width: widget.type == LLSToggleType.android ? 40 : 50,
),
Positioned(
top: 5,
child: InkWell(
onTap: onStatusChange,
child: Container(
width: widget.type == LLSToggleType.ios ? 45 : 36,
height: widget.type == LLSToggleType.ios ? 25 : 15,
decoration: BoxDecoration(
color: isOn
? widget.enabledTrackColor ?? Colors.lightGreen
: widget.disabledTrackColor ?? Colors.grey,
borderRadius: widget.type == LLSToggleType.square
? const BorderRadius.all(Radius.circular(0))
: widget.borderRadius ??
const BorderRadius.all(Radius.circular(20))),
child: Padding(
padding: widget.type == LLSToggleType.ios
? const EdgeInsets.only(left: 3.5, right: 3.5, top: 5.4)
: const EdgeInsets.only(left: 3, right: 3, top: 3.4),
child: isOn
? Text(
widget.enabledText ??
(widget.type == LLSToggleType.custom ? 'ON' : ''),
style: widget.enabledTextStyle ??
(widget.type == LLSToggleType.ios
? const TextStyle(
color: Colors.white, fontSize: 12)
: const TextStyle(
color: Colors.white, fontSize: 8)))
: Text(
widget.disabledText ??
(widget.type == LLSToggleType.custom ? 'OFF' : ''),
textAlign: TextAlign.end,
style: widget.disabledTextStyle ??
(widget.type == LLSToggleType.ios
? const TextStyle(
color: Colors.white, fontSize: 12)
: const TextStyle(
color: Colors.white, fontSize: 8)),
),
),
),
),
),
Positioned(
top: widget.type == LLSToggleType.ios ? 7.5 : 3,
left: widget.type == LLSToggleType.ios ? 2 : 0,
child: InkWell(
onTap: onStatusChange,
child: SlideTransition(
position: offset,
child: Container(
padding: const EdgeInsets.only(left: 10),
height: 20,
width: 20,
decoration: BoxDecoration(
shape: widget.type == LLSToggleType.square
? BoxShape.rectangle
: widget.boxShape ?? BoxShape.circle,
color: isOn
? widget.enabledThumbColor ?? Colors.white
: widget.disabledThumbColor ?? Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.16),
blurRadius: 6,
spreadRadius: 0,
),
],
),
),
),
),
),
],
);
}
\ No newline at end of file
lib/src/components/toggle/type/lls_toggle_type.dart 0 → 100644
enum LLSToggleType {
android,
custom,
ios,
square,
}
\ No newline at end of file
pubspec.yaml
name: llswidget
description: A Flutter UI Components package.
version: 0.0.4
version: 0.0.5
author: Rizal Hermawan
homepage: https://locatorlogic.com
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment