diff --git a/assets/home-active.png b/assets/home-active.png new file mode 100644 index 0000000..bc4c7ce Binary files /dev/null and b/assets/home-active.png differ diff --git a/assets/home.png b/assets/home.png new file mode 100644 index 0000000..680ab98 Binary files /dev/null and b/assets/home.png differ diff --git a/assets/profile-active.png b/assets/profile-active.png new file mode 100644 index 0000000..8d574eb Binary files /dev/null and b/assets/profile-active.png differ diff --git a/assets/profile.png b/assets/profile.png new file mode 100644 index 0000000..7cb662a Binary files /dev/null and b/assets/profile.png differ diff --git a/assets/projects-active.png b/assets/projects-active.png new file mode 100644 index 0000000..d188a00 Binary files /dev/null and b/assets/projects-active.png differ diff --git a/assets/projects.png b/assets/projects.png new file mode 100644 index 0000000..9442177 Binary files /dev/null and b/assets/projects.png differ diff --git a/assets/results-active.png b/assets/results-active.png new file mode 100644 index 0000000..1f606f8 Binary files /dev/null and b/assets/results-active.png differ diff --git a/assets/results.png b/assets/results.png new file mode 100644 index 0000000..c94ddd2 Binary files /dev/null and b/assets/results.png differ diff --git a/example/assets/home-active.png b/example/assets/home-active.png new file mode 100644 index 0000000..bc4c7ce Binary files /dev/null and b/example/assets/home-active.png differ diff --git a/example/assets/home.png b/example/assets/home.png new file mode 100644 index 0000000..680ab98 Binary files /dev/null and b/example/assets/home.png differ diff --git a/example/assets/profile-active.png b/example/assets/profile-active.png new file mode 100644 index 0000000..8d574eb Binary files /dev/null and b/example/assets/profile-active.png differ diff --git a/example/assets/profile.png b/example/assets/profile.png new file mode 100644 index 0000000..7cb662a Binary files /dev/null and b/example/assets/profile.png differ diff --git a/example/assets/projects-active.png b/example/assets/projects-active.png new file mode 100644 index 0000000..d188a00 Binary files /dev/null and b/example/assets/projects-active.png differ diff --git a/example/assets/projects.png b/example/assets/projects.png new file mode 100644 index 0000000..9442177 Binary files /dev/null and b/example/assets/projects.png differ diff --git a/example/assets/results-active.png b/example/assets/results-active.png new file mode 100644 index 0000000..1f606f8 Binary files /dev/null and b/example/assets/results-active.png differ diff --git a/example/assets/results.png b/example/assets/results.png new file mode 100644 index 0000000..c94ddd2 Binary files /dev/null and b/example/assets/results.png differ diff --git a/example/lib/main.dart b/example/lib/main.dart index 90377b8..4ba0761 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -32,6 +32,7 @@ class MainApp extends StatelessWidget { SearchSection(), ButtonSection(), SmallButtonSection(), + TabBarWidget(), ], ), ), diff --git a/example/lib/tabbar_section.dart b/example/lib/tabbar_section.dart new file mode 100644 index 0000000..dfe3e8b --- /dev/null +++ b/example/lib/tabbar_section.dart @@ -0,0 +1,16 @@ +import 'package:flutter/material.dart'; +import 'package:ui_kit/ui_kit.dart'; + +class TabBarSection extends StatefulWidget { + const TabBarSection({super.key}); + + @override + State createState() => _TabBarSectionState(); +} + +class _TabBarSectionState extends State { + @override + Widget build(BuildContext context) { + return TabBarWidget(); + } +} diff --git a/lib/colors.dart b/lib/colors.dart index 95d584d..81fc465 100644 --- a/lib/colors.dart +++ b/lib/colors.dart @@ -14,3 +14,4 @@ const placeholderColor = Color.fromRGBO(191, 199, 209, 1); const descColor = Color.fromRGBO(135, 135, 161, 1); const cardColor = Color.fromRGBO(135, 135, 161, 1); const captionColor = Color.fromRGBO(147, 147, 150, 1); +const iconsColor = Color.fromRGBO(184, 193, 204, 1); diff --git a/lib/tabbar.dart b/lib/tabbar.dart new file mode 100644 index 0000000..5acaf0f --- /dev/null +++ b/lib/tabbar.dart @@ -0,0 +1,72 @@ +import 'package:flutter/material.dart'; +import 'package:ui_kit/colors.dart'; +import 'package:ui_kit/fonts.dart'; + +class TabBarWidget extends StatefulWidget { + const TabBarWidget({super.key}); + + @override + State createState() => _TabBarWidgetState(); +} + +class _TabBarWidgetState extends State { + int _selectedIndex = 0; + void _onItemTapped(int index) { + setState(() { + _selectedIndex = index; + }); + } + + @override + Widget build(BuildContext context) { + return BottomNavigationBar( + showSelectedLabels: true, + showUnselectedLabels: true, + selectedLabelStyle: caption2Regular, + unselectedLabelStyle: caption2Regular, + type: BottomNavigationBarType.fixed, + unselectedItemColor: iconsColor, + items: [ + BottomNavigationBarItem( + icon: Image.asset('assets/home.png', width: 18, height: 20), + label: 'Главная', + activeIcon: Image.asset( + 'assets/home-active.png', + width: 18, + height: 20, + ), + ), + BottomNavigationBarItem( + icon: Image.asset('assets/results.png', width: 18, height: 20), + label: 'Каталог', + activeIcon: Image.asset( + 'assets/results-active.png', + width: 18, + height: 20, + ), + ), + BottomNavigationBarItem( + icon: Image.asset('assets/projects.png', width: 18, height: 20), + label: 'Проекты', + activeIcon: Image.asset( + 'assets/projects-active.png', + width: 18, + height: 20, + ), + ), + BottomNavigationBarItem( + icon: Image.asset('assets/profile.png', width: 18, height: 20), + label: 'Профиль', + activeIcon: Image.asset( + 'assets/profile-active.png', + width: 18, + height: 20, + ), + ), + ], + currentIndex: _selectedIndex, + selectedItemColor: primaryColor, + onTap: _onItemTapped, + ); + } +} diff --git a/lib/ui_kit.dart b/lib/ui_kit.dart index f54908c..ccf7b9e 100644 --- a/lib/ui_kit.dart +++ b/lib/ui_kit.dart @@ -7,3 +7,4 @@ export 'utils.dart'; export 'input.dart'; export "search.dart"; export 'button.dart'; +export 'tabbar.dart';