Skip to content

Commit

Permalink
Converted gbutton tabs to widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
@YDA93
YDA93 committed May 9, 2023
1 parent b60827c commit 1a88056
Show file tree
Hide file tree
Showing 11 changed files with 324 additions and 349 deletions.
22 changes: 14 additions & 8 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,29 +65,35 @@ class _ExampleState extends State<Example> {
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
child: GNav(
rippleColor: Colors.grey[300]!,
hoverColor: Colors.grey[100]!,
gap: 8,
activeColor: Colors.black,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
duration: Duration(milliseconds: 400),
tabBackgroundColor: Colors.grey[100]!,
color: Colors.black,
buttonStyle: GButtonStyle(
rippleColor: Colors.grey[300]!,
hoverColor: Colors.grey[100]!,
gap: 8,
iconActiveColor: Colors.black,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
backgroundColor: Colors.grey[100]!,
iconColor: Colors.black,
),
tabs: [
GButton(
index: 0,
icon: LineIcons.home,
text: 'Home',
),
GButton(
index: 1,
icon: LineIcons.heart,
text: 'Likes',
),
GButton(
index: 2,
icon: LineIcons.search,
text: 'Search',
),
GButton(
index: 3,
icon: LineIcons.user,
text: 'Profile',
),
Expand Down
51 changes: 17 additions & 34 deletions example/lib/main_advance.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:line_icons/line_icons.dart';
import 'package:badges/badges.dart';

void main() => runApp(TabPage());

Expand Down Expand Up @@ -36,12 +36,12 @@ class _TabPageState extends State<TabPage> {
home: Scaffold(
extendBody: true,
appBar: AppBar(
brightness: Brightness.light,
title: Text(
'GoogleNavBar',
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
systemOverlayStyle: SystemUiOverlayStyle.dark,
),
body: PageView.builder(
onPageChanged: (page) {
Expand Down Expand Up @@ -76,34 +76,29 @@ class _TabPageState extends State<TabPage> {
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 3.0, vertical: 3),
child: GNav(
buttonStyle: GButtonStyle(
gap: gap,
iconActiveColor: Colors.purple,
iconColor: Colors.black,
textColor: Colors.purple,
backgroundColor: Colors.purple.withOpacity(.2),
iconSize: 24,
padding: padding,
),
tabs: [
GButton(
gap: gap,
iconActiveColor: Colors.purple,
iconColor: Colors.black,
textColor: Colors.purple,
backgroundColor: Colors.purple.withOpacity(.2),
iconSize: 24,
padding: padding,
index: 0,
icon: LineIcons.home,
text: 'Home',
),
GButton(
gap: gap,
iconActiveColor: Colors.pink,
iconColor: Colors.black,
textColor: Colors.pink,
backgroundColor: Colors.pink.withOpacity(.2),
iconSize: 24,
padding: padding,
index: 1,
icon: LineIcons.heart,
leading: selectedIndex == 1 || badge == 0
? null
: Badge(
badgeColor: Colors.red.shade100,
elevation: 0,
position: BadgePosition.topEnd(top: -12, end: -12),
badgeContent: Text(
backgroundColor: Colors.red.shade100,
label: Text(
badge.toString(),
style: TextStyle(color: Colors.red.shade900),
),
Expand All @@ -116,24 +111,12 @@ class _TabPageState extends State<TabPage> {
),
),
GButton(
gap: gap,
iconActiveColor: Colors.amber[600],
iconColor: Colors.black,
textColor: Colors.amber[600],
backgroundColor: Colors.amber[600]!.withOpacity(.2),
iconSize: 24,
padding: padding,
index: 2,
icon: LineIcons.search,
text: 'Search',
),
GButton(
gap: gap,
iconActiveColor: Colors.teal,
iconColor: Colors.black,
textColor: Colors.teal,
backgroundColor: Colors.teal.withOpacity(.2),
iconSize: 24,
padding: padding,
index: 3,
icon: LineIcons.user,
leading: CircleAvatar(
radius: 12,
Expand Down
131 changes: 70 additions & 61 deletions example/lib/main_gallery.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
Expand Down Expand Up @@ -78,31 +77,37 @@ class _MyHomePageState extends State<MyHomePage> {
padding: const EdgeInsets.symmetric(
horizontal: 16.0, vertical: 22),
child: GNav(
gap: 10,
color: Colors.grey[600],
activeColor: Colors.white,
rippleColor: Colors.grey[800]!,
hoverColor: Colors.grey[700]!,
iconSize: 20,
textStyle: TextStyle(fontSize: 16, color: Colors.white),
tabBackgroundColor: Colors.grey[900]!,
padding:
EdgeInsets.symmetric(horizontal: 20, vertical: 16.5),
buttonStyle: GButtonStyle(
gap: 10,
iconColor: Colors.grey[600],
iconActiveColor: Colors.white,
rippleColor: Colors.grey[800]!,
hoverColor: Colors.grey[700]!,
iconSize: 20,
textStyle: TextStyle(fontSize: 16, color: Colors.white),
backgroundColor: Colors.grey[900]!,
padding:
EdgeInsets.symmetric(horizontal: 20, vertical: 16.5),
),
duration: Duration(milliseconds: 800),
tabs: [
GButton(
index: 0,
icon: LineIcons.home,
text: 'Home',
),
GButton(
index: 1,
icon: LineIcons.heart,
text: 'Likes',
),
GButton(
index: 2,
icon: LineIcons.search,
text: 'Search',
),
GButton(
index: 3,
icon: LineIcons.user,
text: 'Profile',
),
Expand All @@ -128,33 +133,34 @@ class _MyHomePageState extends State<MyHomePage> {
padding: const EdgeInsets.symmetric(
horizontal: 16.0, vertical: 22),
child: GNav(
tabActiveBorder: Border.all(color: Colors.black),
gap: 10,
color: Colors.grey[600],
activeColor: Colors.black,
rippleColor: Colors.grey[300]!,
hoverColor: Colors.grey[100]!,
iconSize: 20,
textStyle: TextStyle(fontSize: 16, color: Colors.black),
padding:
EdgeInsets.symmetric(horizontal: 20, vertical: 14.5),
buttonStyle: GButtonStyle(
activeBorder: Border.all(color: Colors.black),
gap: 10,
iconColor: Colors.grey[600],
iconActiveColor: Colors.black,
rippleColor: Colors.grey[300]!,
hoverColor: Colors.grey[100]!,
iconSize: 20,
textStyle: TextStyle(fontSize: 16, color: Colors.black),
padding:
EdgeInsets.symmetric(horizontal: 20, vertical: 14.5),
),
duration: Duration(milliseconds: 800),
tabs: [
GButton(
index: 0,
icon: LineIcons.home,
text: 'Get',
),
GButton(
index: 1,
icon: LineIcons.heart,
text: 'This',
leading: selectedIndex == 1 || badge == 0
? null
: Badge(
badgeColor: Colors.red.shade100,
elevation: 0,
position:
BadgePosition.topEnd(top: -12, end: -12),
badgeContent: Text(
backgroundColor: Colors.red.shade100,
label: Text(
badge.toString(),
style: TextStyle(color: Colors.red.shade900),
),
Expand All @@ -168,10 +174,12 @@ class _MyHomePageState extends State<MyHomePage> {
),
),
GButton(
index: 2,
icon: LineIcons.search,
text: 'NavBar',
),
GButton(
index: 3,
icon: LineIcons.user,
text: 'Now!',
leading: CircleAvatar(
Expand All @@ -192,43 +200,35 @@ class _MyHomePageState extends State<MyHomePage> {
padding: const EdgeInsets.symmetric(
horizontal: 22.0, vertical: 14),
child: GNav(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 14),
buttonStyle: GButtonStyle(
padding:
EdgeInsets.symmetric(horizontal: 20, vertical: 14),
gap: 8.5,
iconActiveColor: Colors.purple,
iconColor: Colors.black,
textColor: Colors.purple,
backgroundColor: Colors.purple.withOpacity(.2),
iconSize: 24,
),
duration: Duration(milliseconds: 800),
gap: 8.5,
tabs: [
GButton(
iconActiveColor: Colors.purple,
iconColor: Colors.black,
textColor: Colors.purple,
backgroundColor: Colors.purple.withOpacity(.2),
iconSize: 24,
index: 0,
icon: LineIcons.home,
text: 'Home',
),
GButton(
iconActiveColor: Colors.pink,
iconColor: Colors.black,
textColor: Colors.pink,
backgroundColor: Colors.pink.withOpacity(.2),
iconSize: 24,
index: 1,
icon: LineIcons.heart,
text: 'Likes',
),
GButton(
iconActiveColor: Colors.amber[600],
iconColor: Colors.black,
textColor: Colors.amber[600],
backgroundColor: Colors.amber[600]!.withOpacity(.2),
iconSize: 24,
index: 2,
icon: LineIcons.search,
text: 'Search',
),
GButton(
iconActiveColor: Colors.teal,
iconColor: Colors.black,
textColor: Colors.teal,
backgroundColor: Colors.teal.withOpacity(.2),
iconSize: 24,
index: 3,
icon: LineIcons.user,
text: 'Profile',
)
Expand All @@ -244,39 +244,48 @@ class _MyHomePageState extends State<MyHomePage> {
padding: const EdgeInsets.symmetric(
horizontal: 16.0, vertical: 22),
child: GNav(
tabBackgroundGradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.lightBlue[100]!, Colors.cyan],
buttonStyle: GButtonStyle(
backgroundGradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.lightBlue[100]!, Colors.cyan],
),
gap: 8,
borderRadius: const BorderRadius.all(
Radius.circular(15),
),
iconColor: Colors.grey[600],
iconActiveColor: Colors.white,
iconSize: 16,
textStyle: TextStyle(fontSize: 12, color: Colors.white),
backgroundColor: Colors.grey[800]!,
padding:
EdgeInsets.symmetric(horizontal: 20, vertical: 16.5),
),
gap: 8,
tabBorderRadius: 15,
color: Colors.grey[600],
activeColor: Colors.white,
iconSize: 16,
textStyle: TextStyle(fontSize: 12, color: Colors.white),
tabBackgroundColor: Colors.grey[800]!,
padding:
EdgeInsets.symmetric(horizontal: 20, vertical: 16.5),
duration: Duration(milliseconds: 800),
tabs: [
GButton(
index: 0,
icon: LineIcons.home,
text: 'Home',
),
GButton(
index: 1,
icon: LineIcons.heart,
text: 'Likes',
),
GButton(
index: 2,
icon: LineIcons.search,
text: 'Search',
),
GButton(
index: 3,
icon: LineIcons.user,
text: 'Profile',
),
GButton(
index: 4,
icon: LineIcons.cog,
text: 'Settings',
),
Expand Down
Loading

0 comments on commit 1a88056

Please sign in to comment.