Skip to content

L
llswidget
Commit dd413aa4 by Rizal Hermawan
Options

feat (ui component): implemet alert, appbar, avatar, badge button badge and icon… 

feat (ui component): implemet alert, appbar, avatar, badge button badge and icon badge components on example project. Story #1
parent 3a3afd56
Showing with 893 additions and 13 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:33:07.886596.
# Generated by pub on 2021-06-06 16:37:11.356439.
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.1 - 2021-04-27
## 0.0.3 - 2021-06-06
### feat (ui component): implemet alert, appbar, avatar, badge button badge and icon badge components on example project.
## 0.0.2 - 2021-06-06
### feat (ui component): add alert, appbar, avatar, badge button badge and icon badge components.
## 0.0.1 - 2021-04-27
### feat (init): create flutter semantic UI package for flutter app development.
* create button, list tile, tabbar, label, card, image overlay components, etc
* add a sample project (example folder) for the testing package
\ No newline at end of file
example/.packages
......@@ -3,7 +3,7 @@
#
# For more info see: https://dart.dev/go/dot-packages-deprecation
#
# Generated by pub on 2021-06-04 15:07:16.298304.
# Generated by pub on 2021-06-06 16:37:15.204810.
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
......@@ -27,6 +27,16 @@ class RouteGenerator {
return MaterialPageRoute(builder: (_) => AccordionPage());
case AlertPage.routeName:
return MaterialPageRoute(builder: (_) => AlertPage());
case AppbarHomePage.routeName:
return MaterialPageRoute(builder: (_) => AppbarHomePage());
case AvatarPage.routeName:
return MaterialPageRoute(builder: (_) => AvatarPage());
case BadgesPage.routeName:
return MaterialPageRoute(builder: (_) => BadgesPage());
case IconsButtonsPage.routeName:
return MaterialPageRoute(builder: (_) => IconsButtonsPage());
case CardPage.routeName:
return MaterialPageRoute(builder: (_) => CardPage());
case TestStatePage.routeName:
return MaterialPageRoute(builder: (_) => TestStatePage());
default:
......
example/lib/ui/pages/appbar_page/appbar_homepage.dart 0 → 100644
part of '../pages.dart';
class AppbarHomePage extends StatefulWidget {
const AppbarHomePage({ Key? key }) : super(key: key);
static const routeName = '/appbar_page/appbar_homepage';
@override
_AppbarHomePageState createState() => _AppbarHomePageState();
}
class _AppbarHomePageState extends State<AppbarHomePage> {
@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(
'Appbar',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
children: <Widget>[
const Padding(
padding: EdgeInsets.only(left: 15, top: 30, bottom: 10),
child: LLSLabel(
text: 'Basic Appbar',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
Container(
height: 70,
child: AppbarPage(),
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 30, bottom: 10),
child: LLSLabel(
text: 'Appbar with SearchBox',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
Container(
height: 70,
child: SearchbarPage(),
)
],
),
);
}
}
\ No newline at end of file
example/lib/ui/pages/appbar_page/appbar_page.dart 0 → 100644
part of '../pages.dart';
class AppbarPage extends StatefulWidget {
const AppbarPage({ Key? key }) : super(key: key);
@override
_AppbarPageState createState() => _AppbarPageState();
}
class _AppbarPageState extends State<AppbarPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: LLSAppBar(
leading: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(
CupertinoIcons.back,
color: LLSColors.WHITE,
),
),
backgroundColor: LLSColors.SECONDARY,
title: const Text(
'Example',
style: TextStyle(fontSize: 17),
),
actions: <Widget>[
LLSIconButton(
icon: Icon(
Icons.favorite,
color: Colors.white,
),
onPressed: () {},
type: LLSButtonType.transparent,
size: LLSSize.SMALL
),
],
),
);
}
}
\ No newline at end of file
example/lib/ui/pages/appbar_page/searchbar_page.dart 0 → 100644
part of '../pages.dart';
class SearchbarPage extends StatefulWidget {
const SearchbarPage({ Key? key }) : super(key: key);
@override
_SearchbarPageState createState() => _SearchbarPageState();
}
class _SearchbarPageState extends State<SearchbarPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: LLSAppBar(
backgroundColor: LLSColors.DARK,
title: const Text(
'Example',
style: TextStyle(fontSize: 17),
),
searchBar: true,
actions: <Widget>[
LLSIconButton(
icon: Icon(
Icons.share,
color: Colors.white,
),
onPressed: () {},
type: LLSButtonType.transparent,
size: LLSSize.SMALL
),
],
),
);
}
}
\ No newline at end of file
example/lib/ui/pages/avatar_page.dart 0 → 100644
part of 'pages.dart';
class AvatarPage extends StatefulWidget {
const AvatarPage({ Key? key }) : super(key: key);
static const routeName = '/avatar_page';
@override
_AvatarPageState createState() => _AvatarPageState();
}
class _AvatarPageState extends State<AvatarPage> {
@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(
'Avatar',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
children: <Widget>[
const Padding(
padding: EdgeInsets.only(left: 15, top: 30),
child: LLSLabel(
text: 'Circle',
type: LLSLabelType.typo4,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCard(
color: LLSColors.LIGHT,
content: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
LLSAvatar(
backgroundImage: AssetImage('assets/images/avatar.png'),
),
],
),
const SizedBox(
height: 10,
),
],
),
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 30),
child: LLSLabel(
text: 'Rounded',
type: LLSLabelType.typo4,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCard(
color: LLSColors.LIGHT,
content: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
LLSAvatar(
backgroundImage: AssetImage('assets/images/avatar.png'),
shape: LLSAvatarShape.rounded,
)
],
),
const SizedBox(
height: 10,
),
],
),
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 30),
child: LLSLabel(
text: 'Square',
type: LLSLabelType.typo4,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCard(
color: LLSColors.LIGHT,
content: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
LLSAvatar(
backgroundImage: AssetImage('assets/images/avatar.png'),
shape: LLSAvatarShape.square,
)
],
),
const SizedBox(
height: 10,
),
],
),
)
],
),
);
}
}
\ No newline at end of file
example/lib/ui/pages/badges_page.dart 0 → 100644
part of 'pages.dart';
class BadgesPage extends StatefulWidget {
const BadgesPage({ Key? key }) : super(key: key);
static const routeName = '/badges_page';
@override
_BadgesPageState createState() => _BadgesPageState();
}
class _BadgesPageState extends State<BadgesPage> {
@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(
'Badges',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: ListView(
children: <Widget>[
const Padding(
padding: EdgeInsets.only(left: 15, top: 20),
child: LLSLabel(
text: 'With Buttons',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCard(
content: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
Row(
children: <Widget>[
Expanded(
child: LLSButtonBadge(
icon: const LLSBadge(
size: LLSSize.MEDIUM,
text: '6',
shape: LLSBadgeShape.pills,
),
onPressed: () {},
text: 'Primary',
),
),
const SizedBox(
width: 6,
),
Expanded(
child: LLSButtonBadge(
icon: const LLSBadge(
size: LLSSize.MEDIUM,
text: '6',
shape: LLSBadgeShape.pills,
),
onPressed: () {},
text: 'Second',
color: LLSColors.SECONDARY,
),
),
],
),
const SizedBox(
height: 20,
),
Row(
children: <Widget>[
Expanded(
child: LLSButtonBadge(
icon: const LLSBadge(
size: LLSSize.MEDIUM,
text: '6',
shape: LLSBadgeShape.pills,
),
onPressed: () {},
text: 'Success',
color: LLSColors.SUCCESS,
),
),
const SizedBox(
width: 6,
),
Expanded(
child: LLSButtonBadge(
icon: const LLSBadge(
size: LLSSize.MEDIUM,
text: '6',
shape: LLSBadgeShape.pills,
),
onPressed: () {},
text: 'Warning',
color: LLSColors.WARNING,
),
),
],
),
const SizedBox(
height: 20,
),
Row(
children: <Widget>[
Expanded(
child: LLSButtonBadge(
icon: const LLSBadge(
size: LLSSize.MEDIUM,
text: '6',
shape: LLSBadgeShape.pills,
),
onPressed: () {},
text: 'Danger',
color: LLSColors.DANGER,
),
),
const SizedBox(
width: 6,
),
Expanded(
child: LLSButtonBadge(
icon: const LLSBadge(
size: LLSSize.MEDIUM,
text: '6',
shape: LLSBadgeShape.pills,
),
onPressed: () {},
text: 'Info',
color: LLSColors.INFO,
),
)
],
),
const SizedBox(
height: 20,
),
Row(
children: <Widget>[
Expanded(
child: LLSButtonBadge(
icon: const LLSBadge(
size: LLSSize.MEDIUM,
text: '6',
shape: LLSBadgeShape.pills,
),
onPressed: () {},
text: 'Light',
color: LLSColors.LIGHT,
),
),
const SizedBox(
width: 6,
),
Expanded(
child: LLSButtonBadge(
icon: const LLSBadge(
size: LLSSize.MEDIUM,
text: '6',
shape: LLSBadgeShape.pills,
),
onPressed: () {},
text: 'Dark',
textStyle: const TextStyle(color: LLSColors.WHITE),
color: LLSColors.DARK,
),
),
const SizedBox(
width: 6,
),
Expanded(
child: LLSButtonBadge(
icon: const LLSBadge(
size: LLSSize.MEDIUM,
text: '6',
shape: LLSBadgeShape.pills,
),
onPressed: () {},
text: 'Link',
color: LLSColors.TRANSPARENT,
),
)
],
),
const SizedBox(
height: 10,
),
],
),
),
const Padding(
padding: EdgeInsets.only(left: 15, top: 20),
child: LLSLabel(
text: 'Icon with Badges',
type: LLSLabelType.typo5,
dividerWidth: 25,
dividerColor: LLSColors.SECONDARY,
),
),
LLSCard(
content: Column(
children: <Widget>[
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
LLSIconBadge(
child: LLSIconButton(
type: LLSButtonType.transparent,
onPressed: () {},
icon: const Icon(
Icons.access_alarm,
color: LLSColors.DANGER,
),
),
counterChild: const LLSBadge(
text: '12',
shape: LLSBadgeShape.circle,
),
right: 2,
),
LLSIconBadge(
child: LLSIconButton(
type: LLSButtonType.transparent,
onPressed: () {},
icon: const Icon(
Icons.notifications,
color: LLSColors.INFO,
),
),
counterChild: const LLSBadge(
text: '12',
shape: LLSBadgeShape.standard,
)
),
LLSIconBadge(
child: LLSIconButton(
type: LLSButtonType.transparent,
onPressed: () {},
icon: const Icon(
Icons.message,
color: LLSColors.LIGHT,
),
),
counterChild: const LLSBadge(
text: '12',
shape: LLSBadgeShape.square,
)
),
LLSIconBadge(
child: LLSIconButton(
type: LLSButtonType.transparent,
onPressed: () {},
icon: const Icon(
Icons.message,
color: LLSColors.SUCCESS,
),
),
counterChild: const LLSBadge(
text: '12',
shape: LLSBadgeShape.pills,
)
),
],
)
],
),
),
],
),
);
}
}
\ No newline at end of file
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';
......@@ -130,6 +130,38 @@ class _ButtonsPageState extends State<ButtonsPage> {
)
),
)
),
GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(
IconsButtonsPage.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(
'Icons Buttons',
style: TextStyle(color: LLSColors.WHITE),
),
icon: Icon(
CupertinoIcons.forward,
color: LLSColors.WHITE,
)
),
)
)
]
)
......
example/lib/ui/pages/card_page.dart 0 → 100644
part of 'pages.dart';
class CardPage extends StatefulWidget {
const CardPage({ Key? key }) : super(key: key);
static const routeName = '/card_page';
@override
_CardPageState createState() => _CardPageState();
}
class _CardPageState extends State<CardPage> with SingleTickerProviderStateMixin {
late TabController tabController;
@override
void initState() {
super.initState();
tabController = TabController(length: 3, vsync: this);
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
bool fav = false;
bool fav1 = false;
bool fav2 = false;
@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(
'Card',
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: const <Widget>[
Tab(
child: Text(
'Basic',
style: TextStyle(fontSize: 15),
),
),
Tab(
child: Text(
'Avatar',
style: TextStyle(fontSize: 15),
),
),
Tab(
child: Text(
'Full Image',
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,
physics: BouncingScrollPhysics(),
children: <Widget>[
Container(
child: ListView(
children: <Widget>[
LLSCard(
padding: EdgeInsets.zero,
boxFit: BoxFit.cover,
image: Image.asset(
'assets/images/card1.png',
width: MediaQuery.of(context).size.width,
fit: BoxFit.fitWidth,
),
titlePosition: LLSPosition.end,
title: LLSListTile(
titleText: 'Card Title',
icon: LLSIconButton(
size: LLSSize.SMALL,
onPressed: () {
setState(() {
fav = !fav;
});
},
icon: fav
? Icon(
Icons.favorite,
color: LLSColors.DANGER,
size: LLSSize.SMALL
)
: Icon(
Icons.favorite_border,
size: LLSSize.SMALL
),
type: LLSButtonType.transparent,
),
),
content: Text(
'Some quick example text to build on the card',
style: TextStyle(color: Colors.grey),
),
buttonBar: LLSButtonBar(
padding: const EdgeInsets.symmetric(vertical: 10),
children: <Widget>[
LLSButton(
onPressed: () {},
text: 'Read More',
),
LLSButton(
onPressed: () {},
text: 'Share',
)
],
),
)
],
),
),
Container(
child: ListView(
children: <Widget>[
LLSCard(
padding: EdgeInsets.zero,
boxFit: BoxFit.fill,
image: Image.asset(
'assets/images/card3.png',
width: MediaQuery.of(context).size.width,
fit: BoxFit.fitWidth,
),
titlePosition: LLSPosition.end,
title: LLSListTile(
avatar: LLSAvatar(
backgroundImage: AssetImage('assets/images/avatar.png'),
shape: LLSAvatarShape.circle,
),
titleText: 'Card Title',
icon: LLSIconButton(
size: LLSSize.SMALL,
onPressed: () {
setState(() {
fav2 = !fav2;
});
},
icon: fav2
? Icon(
Icons.favorite,
color: LLSColors.DANGER,
size: LLSSize.SMALL
)
: Icon(
Icons.favorite_border,
size: LLSSize.SMALL
),
type: LLSButtonType.transparent,
),
),
content: Container(
padding: EdgeInsets.only(bottom: 20),
child: Text(
'Some quick example text to build on the card',
style: TextStyle(color: Colors.grey),
),
)
)
],
),
),
Container(
child: ListView(
children: <Widget>[
LLSCard(
boxFit: BoxFit.cover,
colorFilter: ColorFilter.mode( Colors.black.withOpacity(0.45), BlendMode.darken),
imageOverlay: const AssetImage('assets/images/card5.png'),
showOverlayImage: true,
title: LLSListTile(
avatar: const LLSAvatar(
backgroundImage: AssetImage('assets/images/avatar.png'),
shape: LLSAvatarShape.circle,
),
title: Text(
'Card Title',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w500),
),
subTitle: Text(
'subtitle',
style: TextStyle(color: Colors.grey),
),
),
content: Container(
padding: EdgeInsets.only(bottom: 10),
child: Text(
'Some quick example text to build on the card',
style: TextStyle(color: Colors.grey),
),
)
),
],
),
),
]
)
)
]
)
);
}
}
\ No newline at end of file
example/lib/ui/pages/main_page.dart
......@@ -21,8 +21,8 @@ class _MainPageState extends State<MainPage> {
},
{
'title': 'App Bar',
'route': '/appbar_page',
'route_dynamic': '/appbar_page_dynamic'
'route': '/appbar_page/appbar_homepage',
'route_dynamic': '/appbar_page_dynamic/appbar_homepage_dynamic'
},
{
'title': 'Avatar',
......@@ -41,8 +41,8 @@ class _MainPageState extends State<MainPage> {
},
{
'title': 'Cards',
'route': '/cards_page/cards_page',
'route_dynamic': '/cards_page/cards_page_dynamic'
'route': '/card_page',
'route_dynamic': '/card_page_dynamic'
},
{
'title': 'Carousels',
......
example/lib/ui/pages/pages.dart
......@@ -18,4 +18,10 @@ part 'buttons_page/square_button_page.dart';
part 'test_state_page.dart';
part 'accordion_page.dart';
part 'alert_page.dart';
part 'appbar_page/appbar_page.dart';
\ No newline at end of file
part 'appbar_page/appbar_homepage.dart';
part 'appbar_page/appbar_page.dart';
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
example/pubspec.lock
......@@ -124,7 +124,7 @@ packages:
path: ".."
relative: true
source: path
version: "0.0.1"
version: "0.0.3"
matcher:
dependency: transitive
description:
......
example/pubspec.yaml
......@@ -54,7 +54,7 @@ flutter:
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/0.png
- assets/images/
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
......
pubspec.yaml
name: llswidget
description: A Flutter UI Components package.
version: 0.0.2
version: 0.0.3
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