Skip to content

L
llswidget
Commit 6cd0f405 by Rizal Hermawan
Options

feat (ui component): implemet tab components on example project. Story #1

parent dd413aa4
Showing with 699 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 16:37:11.356439.
# Generated by pub on 2021-06-06 22:23:03.881705.
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/
......
example/.packages
......@@ -3,7 +3,7 @@
#
# For more info see: https://dart.dev/go/dot-packages-deprecation
#
# Generated by pub on 2021-06-06 16:37:15.204810.
# Generated by pub on 2021-06-06 22:23:06.760747.
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/route_generator.dart
......@@ -39,6 +39,24 @@ class RouteGenerator {
return MaterialPageRoute(builder: (_) => CardPage());
case TestStatePage.routeName:
return MaterialPageRoute(builder: (_) => TestStatePage());
case TabsPage.routeName:
return MaterialPageRoute(builder: (_) => TabsPage());
case SegmentedTabPage.routeName:
return MaterialPageRoute(builder: (_) => SegmentedTabPage());
case IconTabPage.routeName:
return MaterialPageRoute(builder: (_) => IconTabPage());
case LabeledTabPage.routeName:
return MaterialPageRoute(builder: (_) => LabeledTabPage());
case BottomIconTabPage.routeName:
return MaterialPageRoute(builder: (_) => BottomIconTabPage());
case BottomLabeledTabPage.routeName:
return MaterialPageRoute(builder: (_) => BottomLabeledTabPage());
case CarouselPage.routeName:
return MaterialPageRoute(builder: (_) => CarouselPage());
case ToastPage.routeName:
return MaterialPageRoute(builder: (_) => ToastPage());
case TogglePage.routeName:
return MaterialPageRoute(builder: (_) => TogglePage());
default:
// If there is no such named route in the switch statement
return MaterialPageRoute(builder: (context) {
......
example/lib/ui/pages/main_page.dart
......@@ -45,20 +45,20 @@ class _MainPageState extends State<MainPage> {
'route_dynamic': '/card_page_dynamic'
},
{
'title': 'Carousels',
'route': '/carousels_page',
'route_dynamic': '/carousels_page_dynamic'
'title': 'Carousel',
'route': '/carousel_page',
'route_dynamic': '/carousel_page_dynamic'
},
{
'title': 'Label',
'route': '/label_page',
'route_dynamic': '/label_page_dynamic'
},
{
'title': 'Loading',
'route': '/loading_page',
'route_dynamic': '/loading_page_dynamic'
},
// {
// 'title': 'Loading',
// 'route': '/loading_page',
// 'route_dynamic': '/loading_page_dynamic'
// },
{
'title': 'Tabs',
'route': '/tabs_page/tabs_page',
......
example/lib/ui/pages/pages.dart
......@@ -24,4 +24,13 @@ part 'appbar_page/searchbar_page.dart';
part 'avatar_page.dart';
part 'badges_page.dart';
part 'buttons_page/icons_buttons_page.dart';
part 'card_page.dart';
\ No newline at end of file
part 'card_page.dart';
part 'tabs_page/tabs_page.dart';
part 'tabs_page/segmentedtab_page.dart';
part 'tabs_page/icontab_page.dart';
part 'tabs_page/labeledtab_page.dart';
part 'tabs_page/bottom_icon_tab_page.dart';
part 'tabs_page/bottom_labeled_tab_page.dart';
part 'carousel_page.dart';
part 'toast_page.dart';
part 'toggle_page.dart';
\ No newline at end of file
example/lib/ui/pages/tabs_page/bottom_icon_tab_page.dart 0 → 100644
part of '../pages.dart';
class BottomIconTabPage extends StatefulWidget {
const BottomIconTabPage({ Key? key }) : super(key: key);
static const routeName = '/tabs_page/bottom_icon_tab_page';
@override
_BottomIconTabPageState createState() => _BottomIconTabPageState();
}
class _BottomIconTabPageState extends State<BottomIconTabPage> with SingleTickerProviderStateMixin {
late TabController tabController;
@override
void initState() {
super.initState();
tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@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(
'Bottom Icon Tab',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: Container(
height: MediaQuery.of(context).size.height,
child: LLSTabBarView(
controller: tabController,
children: <Widget>[
Center(
child: Icon(
Icons.home,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.music_note,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.games,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.notifications,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
)
],
)
),
bottomNavigationBar: Container(
child: LLSTabBar(
length: 1,
controller: tabController,
tabs: [
Icon(
Icons.home,
),
Icon(
Icons.music_note,
),
Icon(
Icons.games,
),
Icon(
Icons.notifications,
),
],
indicatorColor: LLSColors.SECONDARY,
labelColor: LLSColors.SECONDARY,
labelPadding: const EdgeInsets.all(8),
tabBarColor: LLSColors.PRIMARY,
unselectedLabelColor: LLSColors.WHITE
),
),
);
}
}
\ No newline at end of file
example/lib/ui/pages/tabs_page/bottom_labeled_tab_page.dart 0 → 100644
part of '../pages.dart';
class BottomLabeledTabPage extends StatefulWidget {
const BottomLabeledTabPage({ Key? key }) : super(key: key);
static const routeName = 'tabs_page/bottom_labeled_tab_page';
@override
_BottomLabeledTabPageState createState() => _BottomLabeledTabPageState();
}
class _BottomLabeledTabPageState extends State<BottomLabeledTabPage> with SingleTickerProviderStateMixin {
late TabController tabController;
@override
void initState() {
super.initState();
tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@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(
'Bottom Labeled Tab',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: Container(
height: MediaQuery.of(context).size.height,
child: LLSTabBarView(
controller: tabController,
children: <Widget>[
Center(
child: Icon(
Icons.home,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.music_note,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.games,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.notifications,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
)
],
)
),
bottomNavigationBar: Container(
child: LLSTabBar(
length: 1,
controller: tabController,
tabs: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.home,
),
const Text(
'Home',
style: TextStyle(
fontSize: 14,
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.music_note,
),
const Text(
'Music',
style: TextStyle(
fontSize: 14,
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.games,
),
const Text(
'Games',
style: TextStyle(
fontSize: 14,
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.notifications,
),
const Text(
'Notification',
style: TextStyle(
fontSize: 14,
),
)
],
),
],
indicatorColor: LLSColors.SECONDARY,
labelColor: LLSColors.SECONDARY,
labelPadding: const EdgeInsets.all(8),
tabBarColor: LLSColors.PRIMARY,
unselectedLabelColor: LLSColors.WHITE
),
)
);
}
}
\ No newline at end of file
example/lib/ui/pages/tabs_page/icontab_page.dart 0 → 100644
part of '../pages.dart';
class IconTabPage extends StatefulWidget {
const IconTabPage({ Key? key }) : super(key: key);
static const routeName = '/tabs_page/icontab_page';
@override
_IconTabPageState createState() => _IconTabPageState();
}
class _IconTabPageState extends State<IconTabPage> with SingleTickerProviderStateMixin {
late TabController tabController;
@override
void initState() {
super.initState();
tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@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(
'Icon Tab',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
children: <Widget>[
LLSTabBar(
length: 4,
controller: tabController,
tabs: [
Icon(
Icons.home,
),
Icon(
Icons.music_note,
),
Icon(
Icons.games,
),
Icon(
Icons.notifications,
),
],
indicatorColor: Colors.teal,
labelColor: LLSColors.SUCCESS,
labelPadding: const EdgeInsets.all(8),
tabBarColor: LLSColors.WHITE,
unselectedLabelColor: LLSColors.LIGHT
),
Container(
height: MediaQuery.of(context).size.height - 159,
child: LLSTabBarView(
controller: tabController,
children: <Widget>[
Center(
child: Icon(
Icons.home,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.music_note,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.games,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.notifications,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
)
],
),
)
],
),
);
}
}
\ No newline at end of file
example/lib/ui/pages/tabs_page/labeledtab_page.dart 0 → 100644
part of '../pages.dart';
class LabeledTabPage extends StatefulWidget {
const LabeledTabPage({ Key? key }) : super(key: key);
static const routeName = '/tabs_page/labeledtab_page';
@override
_LabeledTabPageState createState() => _LabeledTabPageState();
}
class _LabeledTabPageState extends State<LabeledTabPage> with SingleTickerProviderStateMixin {
late TabController tabController;
@override
void initState() {
super.initState();
tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@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(
'Labeled Tab',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
children: <Widget>[
LLSTabBar(
length: 4,
controller: tabController,
tabs: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.home,
),
const Text(
'Home',
style: TextStyle(
fontSize: 14,
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.music_note,
),
const Text(
'Music',
style: TextStyle(
fontSize: 14,
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.games,
),
const Text(
'Games',
style: TextStyle(
fontSize: 14,
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.notifications,
),
const Text(
'Notification',
style: TextStyle(
fontSize: 14,
),
)
],
),
],
indicatorColor: Colors.teal,
labelColor: LLSColors.SUCCESS,
labelPadding: const EdgeInsets.all(8),
tabBarColor: LLSColors.WHITE,
unselectedLabelColor: LLSColors.LIGHT
),
Container(
height: MediaQuery.of(context).size.height - 159,
child: LLSTabBarView(
controller: tabController,
children: <Widget>[
Center(
child: Icon(
Icons.home,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.music_note,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.games,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
),
Center(
child: Icon(
Icons.notifications,
size: 150,
color: Colors.grey.withOpacity(0.44),
),
)
],
),
)
]
)
);
}
}
\ No newline at end of file
example/lib/ui/pages/tabs_page/segmentedtab_page.dart 0 → 100644
part of '../pages.dart';
class SegmentedTabPage extends StatefulWidget {
const SegmentedTabPage({ Key? key }) : super(key: key);
static const routeName = '/tabs_page/segmentedtab_page';
@override
_SegmentedTabPageState createState() => _SegmentedTabPageState();
}
class _SegmentedTabPageState extends State<SegmentedTabPage> with SingleTickerProviderStateMixin {
late TabController tabController;
@override
void initState() {
super.initState();
tabController = TabController(length: 3, vsync: this);
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@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(
'Segmented Tab',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
children: <Widget>[
Container(
width: double.infinity,
height: 45,
margin: const EdgeInsets.only(top: 20, left: 25, right: 25),
padding: EdgeInsets.zero,
child: LLSSegmentTabs(
tabController: tabController,
width: double.infinity,
length: 3,
tabs: <Widget>[
Tab(
child: Text(
'Tab 1',
style: TextStyle(fontSize: 15),
)
),
Tab(
child: Text(
'Tab 2',
style: TextStyle(fontSize: 15),
),
),
Tab(
child: Text(
'Tab 3',
style: TextStyle(fontSize: 15),
),
)
],
tabBarColor: LLSColors.LIGHT,
indicatorSize: TabBarIndicatorSize.tab,
labelColor: LLSColors.WHITE,
unselectedLabelColor: LLSColors.DARK,
indicator: BoxDecoration(
color: LLSColors.SECONDARY,
border: Border(
bottom: BorderSide(
color: LLSColors.SUCCESS,
width: 4,
),
),
),
indicatorWeight: 2,
border: Border.all(color: Colors.white, width: 2),
),
),
Container(
height: MediaQuery.of(context).size.height - 140,
child: LLSTabBarView(
controller: tabController,
children: const <Widget>[
Center(
child: Text('Tab 1'),
),
Center(
child: Text('Tab 2'),
),
Center(
child: Text('Tab 3'),
)
],
),
)
],
),
);
}
}
\ No newline at end of file
example/pubspec.lock
......@@ -124,7 +124,7 @@ packages:
path: ".."
relative: true
source: path
version: "0.0.3"
version: "0.0.4"
matcher:
dependency: transitive
description:
......
lib/src/types/lls_animation_type.dart deleted 100644 → 0
enum LLSAnimationType {
align,
size,
container,
rotateTransition,
scaleTransition,
slideTransition,
textStyle,
}
\ No newline at end of file
lib/src/types/lls_toast_type.dart deleted 100644 → 0
enum LLSToastType {
basic,
rounded,
fullWidth,
}
\ No newline at end of file
lib/src/types/lls_toggle_type.dart deleted 100644 → 0
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.3
version: 0.0.4
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