Skip to content

Commit

Permalink
Merge pull request #228 from Rhishikesh12/botnav
Browse files Browse the repository at this point in the history 
[Feature Implimented] The Issue related to the Bottom_Navigation_Bar has been resolved.
  • Loading branch information
@Debajyoti14
Debajyoti14 authored Jun 4, 2023
2 parents e3d48c5 + 5ec9d8e commit a540c91
Show file tree
Hide file tree
Showing 8 changed files with 1,002 additions and 5 deletions.
4 changes: 2 additions & 2 deletions lib/data/widget_category.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import 'package:flutter_component_ui/ui_components/pricing_cards/pricing_cards.d
import 'package:flutter_component_ui/ui_components/segmented_controls/segmented_control_screen.dart';
import 'package:flutter_component_ui/ui_components/steppers/steppers.dart';

// import '../ui_components/progress_bars/progress_bars.dart';
import '../ui_components/bottom_navbars/bottom_navbars.dart';
import '../ui_components/radios/radios.dart';
import '../ui_components/sliders/sliders.dart';

Expand All @@ -28,7 +28,7 @@ final List<Map<String, dynamic>> widgetCategoryData = [
},
{
'categoryName': 'Bottom Navigation Bars',
'categoryScreen': const AlertScreen(),
'categoryScreen': const BottomNavBarScreen(),
},
{
'categoryName': 'Avatars',
Expand Down
146 changes: 146 additions & 0 deletions lib/ui_components/bottom_navbars/allBottomNavigationBars/animated_navbar/bottom_navbar4.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Bottom_Navbar4 extends StatefulWidget {
const Bottom_Navbar4({super.key});

@override
Bottom_Navbar4State createState() => Bottom_Navbar4State();
}

class Bottom_Navbar4State extends State<Bottom_Navbar4> {
var currentIndex = 0;

@override
Widget build(BuildContext context) {
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
double displayWidth = MediaQuery.of(context).size.width;
return Scaffold(
bottomNavigationBar: Container(
padding: const EdgeInsets.all(5),
margin: EdgeInsets.all(displayWidth * .02),
height: displayWidth * 0.2,
decoration: BoxDecoration(
color: isDarkMode ? Colors.grey[900] : Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.1),
blurRadius: 30,
offset: Offset(0, 10),
),
],
borderRadius: BorderRadius.circular(50),
),
child: ListView.builder(
itemCount: 4,
scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(horizontal: displayWidth * .02),
itemBuilder: (context, index) => InkWell(
onTap: () {
setState(() {
currentIndex = index;
HapticFeedback.lightImpact();
});
},
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Stack(
children: [
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
width: index == currentIndex
? displayWidth * .32
: displayWidth * .18,
alignment: Alignment.center,
child: AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
height: index == currentIndex ? displayWidth * .12 : 0,
width: index == currentIndex ? displayWidth * .32 : 0,
decoration: BoxDecoration(
color: index == currentIndex
? Colors.blueAccent.withOpacity(.2)
: Colors.transparent,
borderRadius: BorderRadius.circular(50),
),
),
),
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
width: index == currentIndex
? displayWidth * .31
: displayWidth * .18,
alignment: Alignment.center,
child: Stack(
children: [
Row(
children: [
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
width:
index == currentIndex ? displayWidth * .13 : 0,
),
AnimatedOpacity(
opacity: index == currentIndex ? 1 : 0,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
child: Text(
index == currentIndex
? '${listOfStrings[index]}'
: '',
style: TextStyle(
color: isDarkMode
? Colors.amberAccent
: Colors.blueAccent,
fontWeight: FontWeight.w600,
fontSize: 15,
),
),
),
],
),
Row(
children: [
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
width:
index == currentIndex ? displayWidth * .03 : 20,
),
Icon(
listOfIcons[index],
size: displayWidth * .076,
color: isDarkMode
? Colors.amberAccent
: Colors.blueAccent,
),
],
),
],
),
),
],
),
),
),
),
);
}

List<IconData> listOfIcons = [
Icons.home_rounded,
Icons.favorite_rounded,
Icons.settings_rounded,
Icons.person_rounded,
];

List<String> listOfStrings = [
'Home',
'Favorite',
'Settings',
'Account',
];
}
65 changes: 65 additions & 0 deletions lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar1.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import 'package:flutter/material.dart';

// ignore: camel_case_types
class Bottom_Navbar1 extends StatefulWidget {
const Bottom_Navbar1({super.key});

@override
State<Bottom_Navbar1> createState() => _Bottom_Navbar1State();
}

class _Bottom_Navbar1State extends State<Bottom_Navbar1> {
int _currentIndex = 0;

@override
Widget build(BuildContext context) {
final isDarkMode = Theme.of(context).brightness == Brightness.dark;

return Scaffold(
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
// Sets the background color of the `BottomNavigationBar`
canvasColor: isDarkMode ? Colors.grey[900] : Colors.white,
// Sets the active color of the `BottomNavigationBar`
primaryColor: isDarkMode ? Colors.amberAccent : Colors.red,
unselectedWidgetColor: isDarkMode ? Colors.grey[400] : Colors.grey,
// Sets the inactive color of the `BottomNavigationBar`
textTheme: Theme.of(context).textTheme.copyWith(
// ignore: deprecated_member_use
caption: TextStyle(
color: isDarkMode ? Colors.amberAccent : Colors.yellow,
),
),
),
child: BottomNavigationBar(
unselectedIconTheme: IconThemeData(
color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
),
selectedFontSize: 14,
selectedItemColor:
isDarkMode ? Colors.amberAccent : Colors.blueAccent,
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
),
);
}
}
76 changes: 76 additions & 0 deletions lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar2.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import 'package:flutter/material.dart';

// ignore: camel_case_types
class Bottom_Navbar2 extends StatefulWidget {
const Bottom_Navbar2({Key? key}) : super(key: key);

@override
State<Bottom_Navbar2> createState() => _Bottom_Navbar2State();
}

// ignore: camel_case_types
class _Bottom_Navbar2State extends State<Bottom_Navbar2> {
int _currentIndex = 0;

@override
Widget build(BuildContext context) {
bool isDarkMode = Theme.of(context).brightness == Brightness.dark;

return Theme(
data: Theme.of(context).copyWith(
// Sets the background color of the `BottomNavigationBar`
canvasColor: isDarkMode ? Colors.grey[900] : Colors.white,
// Sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: isDarkMode ? Colors.amberAccent : Colors.red,
// Sets the inactive color of the `BottomNavigationBar`
unselectedWidgetColor: isDarkMode ? Colors.grey[400] : Colors.grey,
// Sets the text color of the `BottomNavigationBar`
textTheme: Theme.of(context).textTheme.copyWith(
// Sets the text color of the labels
// ignore: deprecated_member_use
caption: TextStyle(
color: isDarkMode ? Colors.amberAccent : Colors.yellow,
),
),
),
child: Scaffold(
bottomNavigationBar: BottomNavigationBar(
unselectedIconTheme: IconThemeData(
color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
),
selectedFontSize: 16,
selectedItemColor:
isDarkMode ? Colors.amberAccent : Colors.blueAccent,
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Calls',
),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
label: 'Camera',
),
BottomNavigationBarItem(
icon: Icon(Icons.chat),
label: 'Chats',
),
BottomNavigationBarItem(
icon: Icon(Icons.star_rate),
label: 'Favorite',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
),
);
}
}
Loading

0 comments on commit a540c91

Please sign in to comment.