├── LICENSE ├── README.md ├── lib ├── bottom.dart ├── calls.dart ├── chats.dart ├── main.dart ├── status.dart └── tab_screen.dart └── pubspec.yaml /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flutter-App 2 | Flutter App contains Slider, Gridview, FAB, Hide on Scroll Bottom App Bar & PopUp Menu.... 3 | -------------------------------------------------------------------------------- /lib/bottom.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class BottomNav extends StatefulWidget { 4 | const BottomNav({Key? key}) : super(key: key); 5 | 6 | @override 7 | State createState() => _BottomNavState(); 8 | } 9 | 10 | class _BottomNavState extends State { 11 | List content = []; 12 | 13 | void add(BuildContext context) { 14 | content.add(Center( 15 | child: Text( 16 | "Home", 17 | style: Theme.of(context).textTheme.headline4, 18 | ), 19 | )); 20 | content.add(Center( 21 | child: Text( 22 | "Search", 23 | style: Theme.of(context).textTheme.headline4, 24 | ), 25 | )); 26 | content.add(Center( 27 | child: Text( 28 | "Bookmark", 29 | style: Theme.of(context).textTheme.headline4, 30 | ), 31 | )); 32 | content.add(Center( 33 | child: Text( 34 | "Settings", 35 | style: Theme.of(context).textTheme.headline4, 36 | ), 37 | )); 38 | } 39 | 40 | int selectedIndex = 0; 41 | 42 | @override 43 | Widget build(BuildContext context) { 44 | add(context); 45 | return Scaffold( 46 | body: content.elementAt(selectedIndex), 47 | bottomNavigationBar: NavigationBarTheme( 48 | data: NavigationBarThemeData( 49 | indicatorColor: Colors.red, 50 | labelTextStyle: MaterialStateProperty.all( 51 | TextStyle(fontSize: 14.0), 52 | ), 53 | ), 54 | child: NavigationBar( 55 | labelBehavior: NavigationDestinationLabelBehavior.alwaysShow, 56 | height: 70, 57 | backgroundColor: Colors.redAccent.shade100, 58 | selectedIndex: selectedIndex, 59 | onDestinationSelected: (index) { 60 | setState(() { 61 | selectedIndex = index; 62 | }); 63 | }, 64 | destinations: const [ 65 | NavigationDestination( 66 | icon: Icon(Icons.home_outlined), 67 | label: 'Home', 68 | selectedIcon: Icon( 69 | Icons.home_filled, 70 | ), 71 | ), 72 | NavigationDestination( 73 | icon: Icon(Icons.email_outlined), 74 | label: 'Email', 75 | selectedIcon: Icon(Icons.email), 76 | ), 77 | NavigationDestination( 78 | icon: Icon(Icons.favorite_outline), 79 | label: 'Favorites', 80 | selectedIcon: Icon( 81 | Icons.favorite, 82 | ), 83 | ), 84 | NavigationDestination( 85 | icon: Icon( 86 | Icons.settings_outlined, 87 | ), 88 | selectedIcon: Icon(Icons.settings), 89 | label: 'Settings'), 90 | ]), 91 | ), 92 | ); 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /lib/calls.dart: -------------------------------------------------------------------------------- 1 | import 'package:faker/faker.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | class Calls extends StatelessWidget { 5 | const Calls({Key? key}) : super(key: key); 6 | 7 | @override 8 | Widget build(BuildContext context) { 9 | final Faker faker = Faker(); 10 | 11 | return ListView.builder( 12 | itemBuilder: (_, index) { 13 | return ListTile( 14 | leading: CircleAvatar( 15 | backgroundImage: NetworkImage(faker.image.image()), 16 | ), 17 | title: Text(faker.person.name()), 18 | subtitle: Text(faker.date.time()), 19 | trailing: IconButton( 20 | onPressed: () {}, 21 | icon: Icon( 22 | Icons.call_outlined, 23 | ), 24 | ), 25 | ); 26 | }, 27 | itemCount: 20, 28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/chats.dart: -------------------------------------------------------------------------------- 1 | import 'package:faker/faker.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | class Chats extends StatelessWidget { 5 | const Chats({Key? key}) : super(key: key); 6 | 7 | @override 8 | Widget build(BuildContext context) { 9 | final Faker faker = Faker(); 10 | 11 | return ListView.builder( 12 | itemBuilder: (_, index) { 13 | return ListTile( 14 | leading: CircleAvatar( 15 | backgroundImage: NetworkImage(faker.image.image()), 16 | ), 17 | title: Text(faker.person.name()), 18 | subtitle: Text( 19 | faker.lorem.sentences(1).toString(), 20 | maxLines: 1, 21 | ), 22 | ); 23 | }, 24 | itemCount: 20, 25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | 3 | import 'package:flutter/cupertino.dart'; 4 | import 'package:flutter/material.dart'; 5 | import 'package:flutter/rendering.dart'; 6 | 7 | void main() { 8 | runApp(const MyApp()); 9 | } 10 | 11 | class MyApp extends StatelessWidget { 12 | const MyApp({Key? key}) : super(key: key); 13 | 14 | // This widget is the root of your application. 15 | @override 16 | Widget build(BuildContext context) { 17 | return MaterialApp( 18 | debugShowCheckedModeBanner: false, 19 | title: 'Flutter Demo', 20 | theme: ThemeData( 21 | // This is the theme of your application. 22 | // 23 | // Try running your application with "flutter run". You'll see the 24 | // application has a blue toolbar. Then, without quitting the app, try 25 | // changing the primarySwatch below to Colors.green and then invoke 26 | // "hot reload" (press "r" in the console where you ran "flutter run", 27 | // or simply save your changes to "hot reload" in a Flutter IDE). 28 | // Notice that the counter didn't reset back to zero; the application 29 | // is not restarted. 30 | primarySwatch: Colors.blue, 31 | ), 32 | home: const Home(), 33 | ); 34 | } 35 | } 36 | 37 | class Home extends StatefulWidget { 38 | const Home({Key? key}) : super(key: key); 39 | 40 | @override 41 | State createState() => _HomeState(); 42 | } 43 | 44 | class _HomeState extends State { 45 | late final PageController pageController; 46 | ScrollController _scrollController = ScrollController(); 47 | int pageNo = 0; 48 | 49 | Timer? carasouelTmer; 50 | 51 | Timer getTimer() { 52 | return Timer.periodic(const Duration(seconds: 3), (timer) { 53 | if (pageNo == 4) { 54 | pageNo = 0; 55 | } 56 | pageController.animateToPage( 57 | pageNo, 58 | duration: const Duration(seconds: 1), 59 | curve: Curves.easeInOutCirc, 60 | ); 61 | pageNo++; 62 | }); 63 | } 64 | 65 | @override 66 | void initState() { 67 | pageController = PageController(initialPage: 0, viewportFraction: 0.85); 68 | carasouelTmer = getTimer(); 69 | _scrollController.addListener(() { 70 | if (_scrollController.position.userScrollDirection == 71 | ScrollDirection.reverse) { 72 | showBtmAppBr = false; 73 | setState(() {}); 74 | } else { 75 | showBtmAppBr = true; 76 | setState(() {}); 77 | } 78 | }); 79 | super.initState(); 80 | } 81 | 82 | @override 83 | void dispose() { 84 | pageController.dispose(); 85 | super.dispose(); 86 | } 87 | 88 | bool showBtmAppBr = true; 89 | 90 | @override 91 | Widget build(BuildContext context) { 92 | return Scaffold( 93 | body: SafeArea( 94 | child: SingleChildScrollView( 95 | controller: _scrollController, 96 | child: Column( 97 | children: [ 98 | const SizedBox( 99 | height: 36.0, 100 | ), 101 | Padding( 102 | padding: const EdgeInsets.all(24.0), 103 | child: ListTile( 104 | onTap: () {}, 105 | selected: true, 106 | shape: const RoundedRectangleBorder( 107 | borderRadius: BorderRadius.all( 108 | Radius.circular(16.0), 109 | ), 110 | ), 111 | selectedTileColor: Colors.indigoAccent.shade100, 112 | title: Text( 113 | "Welcome Back", 114 | style: Theme.of(context).textTheme.subtitle1!.merge( 115 | const TextStyle( 116 | fontWeight: FontWeight.w700, 117 | fontSize: 18.0, 118 | ), 119 | ), 120 | ), 121 | subtitle: Text( 122 | "A Greet welcome to you all.", 123 | style: Theme.of(context).textTheme.subtitle2, 124 | ), 125 | trailing: PopUpMen( 126 | menuList: const [ 127 | PopupMenuItem( 128 | child: ListTile( 129 | leading: Icon( 130 | CupertinoIcons.person, 131 | ), 132 | title: Text("My Profile"), 133 | ), 134 | ), 135 | PopupMenuItem( 136 | child: ListTile( 137 | leading: Icon( 138 | CupertinoIcons.bag, 139 | ), 140 | title: Text("My Bag"), 141 | ), 142 | ), 143 | PopupMenuDivider(), 144 | PopupMenuItem( 145 | child: Text("Settings"), 146 | ), 147 | PopupMenuItem( 148 | child: Text("About Us"), 149 | ), 150 | PopupMenuDivider(), 151 | PopupMenuItem( 152 | child: ListTile( 153 | leading: Icon( 154 | Icons.logout, 155 | ), 156 | title: Text("Log Out"), 157 | ), 158 | ), 159 | ], 160 | icon: CircleAvatar( 161 | backgroundImage: const NetworkImage( 162 | 'https://images.unsplash.com/photo-1644982647869-e1337f992828?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80', 163 | ), 164 | child: Container(), 165 | ), 166 | ), 167 | ), 168 | ), 169 | SizedBox( 170 | height: 200, 171 | child: PageView.builder( 172 | controller: pageController, 173 | onPageChanged: (index) { 174 | pageNo = index; 175 | setState(() {}); 176 | }, 177 | itemBuilder: (_, index) { 178 | return AnimatedBuilder( 179 | animation: pageController, 180 | builder: (ctx, child) { 181 | return child!; 182 | }, 183 | child: GestureDetector( 184 | onTap: () { 185 | ScaffoldMessenger.of(context).showSnackBar( 186 | SnackBar( 187 | content: 188 | Text("Hello you tapped at ${index + 1} "), 189 | ), 190 | ); 191 | }, 192 | onPanDown: (d) { 193 | carasouelTmer?.cancel(); 194 | carasouelTmer = null; 195 | }, 196 | onPanCancel: () { 197 | carasouelTmer = getTimer(); 198 | }, 199 | child: Container( 200 | margin: const EdgeInsets.only( 201 | right: 8, left: 8, top: 24, bottom: 12), 202 | decoration: BoxDecoration( 203 | borderRadius: BorderRadius.circular(24.0), 204 | color: Colors.amberAccent, 205 | ), 206 | ), 207 | ), 208 | ); 209 | }, 210 | itemCount: 5, 211 | ), 212 | ), 213 | const SizedBox( 214 | height: 12.0, 215 | ), 216 | Row( 217 | mainAxisAlignment: MainAxisAlignment.center, 218 | children: List.generate( 219 | 5, 220 | (index) => GestureDetector( 221 | child: Container( 222 | margin: const EdgeInsets.all(2.0), 223 | child: Icon( 224 | Icons.circle, 225 | size: 12.0, 226 | color: pageNo == index 227 | ? Colors.indigoAccent 228 | : Colors.grey.shade300, 229 | ), 230 | ), 231 | ), 232 | ), 233 | ), 234 | const Padding( 235 | padding: EdgeInsets.all(24.0), 236 | child: GridB(), 237 | ), 238 | ], 239 | ), 240 | ), 241 | ), 242 | floatingActionButtonLocation: showBtmAppBr 243 | ? FloatingActionButtonLocation.centerDocked 244 | : FloatingActionButtonLocation.centerFloat, 245 | floatingActionButton: FloatingActionButton( 246 | onPressed: () {}, 247 | child: const Icon( 248 | Icons.add, 249 | ), 250 | ), 251 | bottomNavigationBar: AnimatedContainer( 252 | child: BottomAppBar( 253 | notchMargin: 8.0, 254 | shape: const CircularNotchedRectangle(), 255 | child: Row( 256 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 257 | children: [ 258 | IconButton( 259 | onPressed: () {}, 260 | icon: const Icon( 261 | Icons.home_outlined, 262 | ), 263 | ), 264 | IconButton( 265 | onPressed: () {}, 266 | icon: const Icon( 267 | CupertinoIcons.heart, 268 | ), 269 | ), 270 | const SizedBox( 271 | width: 50, 272 | ), 273 | IconButton( 274 | onPressed: () {}, 275 | icon: const Icon( 276 | CupertinoIcons.cart, 277 | ), 278 | ), 279 | IconButton( 280 | onPressed: () {}, 281 | icon: const Icon( 282 | CupertinoIcons.bell, 283 | ), 284 | ), 285 | ], 286 | ), 287 | ), 288 | duration: const Duration( 289 | milliseconds: 800, 290 | ), 291 | curve: Curves.easeInOutSine, 292 | height: showBtmAppBr ? 70 : 0, 293 | ), 294 | ); 295 | } 296 | } 297 | 298 | class PopUpMen extends StatelessWidget { 299 | final List menuList; 300 | final Widget? icon; 301 | const PopUpMen({Key? key, required this.menuList, this.icon}) 302 | : super(key: key); 303 | 304 | @override 305 | Widget build(BuildContext context) { 306 | return PopupMenuButton( 307 | shape: RoundedRectangleBorder( 308 | borderRadius: BorderRadius.circular(16.0), 309 | ), 310 | itemBuilder: ((context) => menuList), 311 | icon: icon, 312 | ); 313 | } 314 | } 315 | 316 | class FabExt extends StatelessWidget { 317 | const FabExt({ 318 | Key? key, 319 | required this.showFabTitle, 320 | }) : super(key: key); 321 | 322 | final bool showFabTitle; 323 | 324 | @override 325 | Widget build(BuildContext context) { 326 | return FloatingActionButton.extended( 327 | onPressed: () {}, 328 | label: AnimatedContainer( 329 | duration: const Duration(seconds: 2), 330 | padding: const EdgeInsets.all(12.0), 331 | child: Row( 332 | children: [ 333 | const Icon(CupertinoIcons.cart), 334 | SizedBox(width: showFabTitle ? 12.0 : 0), 335 | AnimatedContainer( 336 | duration: const Duration(seconds: 2), 337 | child: showFabTitle ? const Text("Go to cart") : const SizedBox(), 338 | ) 339 | ], 340 | ), 341 | ), 342 | ); 343 | } 344 | } 345 | 346 | class GridB extends StatefulWidget { 347 | const GridB({Key? key}) : super(key: key); 348 | 349 | @override 350 | State createState() => _GridBState(); 351 | } 352 | 353 | class _GridBState extends State { 354 | final List> gridMap = [ 355 | { 356 | "title": "white sneaker with adidas logo", 357 | "price": "\$255", 358 | "images": 359 | "https://images.unsplash.com/photo-1600185365926-3a2ce3cdb9eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=725&q=80", 360 | }, 361 | { 362 | "title": "Black Jeans with blue stripes", 363 | "price": "\$245", 364 | "images": 365 | "https://images.unsplash.com/photo-1541099649105-f69ad21f3246?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80", 366 | }, 367 | { 368 | "title": "Red shoes with black stripes", 369 | "price": "\$155", 370 | "images": 371 | "https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2hvZXN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", 372 | }, 373 | { 374 | "title": "Gamma shoes with beta brand.", 375 | "price": "\$275", 376 | "images": 377 | "https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80", 378 | }, 379 | { 380 | "title": "Alpha t-shirt for alpha testers.", 381 | "price": "\$25", 382 | "images": 383 | "https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80", 384 | }, 385 | { 386 | "title": "Beta jeans for beta testers", 387 | "price": "\$27", 388 | "images": 389 | "https://images.unsplash.com/photo-1602293589930-45aad59ba3ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80", 390 | }, 391 | { 392 | "title": "V&V model white t shirts.", 393 | "price": "\$55", 394 | "images": 395 | "https://images.unsplash.com/photo-1554568218-0f1715e72254?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80", 396 | } 397 | ]; 398 | 399 | @override 400 | Widget build(BuildContext context) { 401 | return GridView.builder( 402 | physics: const NeverScrollableScrollPhysics(), 403 | shrinkWrap: true, 404 | gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( 405 | crossAxisCount: 2, 406 | crossAxisSpacing: 12.0, 407 | mainAxisSpacing: 12.0, 408 | mainAxisExtent: 310, 409 | ), 410 | itemCount: gridMap.length, 411 | itemBuilder: (_, index) { 412 | return Container( 413 | decoration: BoxDecoration( 414 | borderRadius: BorderRadius.circular( 415 | 16.0, 416 | ), 417 | color: Colors.amberAccent.shade100, 418 | ), 419 | child: Column( 420 | crossAxisAlignment: CrossAxisAlignment.start, 421 | children: [ 422 | ClipRRect( 423 | borderRadius: const BorderRadius.only( 424 | topLeft: Radius.circular(16.0), 425 | topRight: Radius.circular(16.0), 426 | ), 427 | child: Image.network( 428 | "${gridMap.elementAt(index)['images']}", 429 | height: 170, 430 | width: double.infinity, 431 | fit: BoxFit.cover, 432 | ), 433 | ), 434 | Padding( 435 | padding: const EdgeInsets.all(8.0), 436 | child: Column( 437 | crossAxisAlignment: CrossAxisAlignment.start, 438 | children: [ 439 | Text( 440 | "${gridMap.elementAt(index)['title']}", 441 | style: Theme.of(context).textTheme.subtitle1!.merge( 442 | const TextStyle( 443 | fontWeight: FontWeight.w700, 444 | ), 445 | ), 446 | ), 447 | const SizedBox( 448 | height: 8.0, 449 | ), 450 | Text( 451 | "${gridMap.elementAt(index)['price']}", 452 | style: Theme.of(context).textTheme.subtitle2!.merge( 453 | TextStyle( 454 | fontWeight: FontWeight.w700, 455 | color: Colors.grey.shade500, 456 | ), 457 | ), 458 | ), 459 | const SizedBox( 460 | height: 8.0, 461 | ), 462 | Row( 463 | children: [ 464 | IconButton( 465 | onPressed: () {}, 466 | icon: Icon( 467 | CupertinoIcons.heart, 468 | ), 469 | ), 470 | IconButton( 471 | onPressed: () {}, 472 | icon: Icon( 473 | CupertinoIcons.cart, 474 | ), 475 | ), 476 | ], 477 | ), 478 | ], 479 | ), 480 | ), 481 | ], 482 | ), 483 | ); 484 | }, 485 | ); 486 | } 487 | } 488 | -------------------------------------------------------------------------------- /lib/status.dart: -------------------------------------------------------------------------------- 1 | import 'package:faker/faker.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | class Status extends StatelessWidget { 5 | const Status({Key? key}) : super(key: key); 6 | 7 | @override 8 | Widget build(BuildContext context) { 9 | final Faker faker = Faker(); 10 | return Column( 11 | children: [ 12 | const SizedBox( 13 | height: 16.0, 14 | ), 15 | ListTile( 16 | leading: const CircleAvatar( 17 | backgroundColor: Colors.green, 18 | maxRadius: 28.0, 19 | ), 20 | title: const Text("Add Status"), 21 | onTap: () {}, 22 | ), 23 | const SizedBox( 24 | height: 16.0, 25 | ), 26 | ListView.builder( 27 | shrinkWrap: true, 28 | itemCount: 4, 29 | itemBuilder: (_, index) { 30 | return ListTile( 31 | leading: CircleAvatar( 32 | child: CircleAvatar( 33 | maxRadius: 25.0, 34 | backgroundImage: NetworkImage( 35 | faker.image.image(), 36 | ), 37 | ), 38 | maxRadius: 28.0, 39 | ), 40 | title: Text(faker.person.name()), 41 | subtitle: Text(faker.date.time()), 42 | ); 43 | }, 44 | ), 45 | ], 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /lib/tab_screen.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:slider_menu/calls.dart'; 3 | import 'package:slider_menu/chats.dart'; 4 | import 'package:slider_menu/status.dart'; 5 | 6 | class TabScreen extends StatefulWidget { 7 | const TabScreen({Key? key}) : super(key: key); 8 | 9 | @override 10 | State createState() => _TabScreenState(); 11 | } 12 | 13 | class _TabScreenState extends State 14 | with SingleTickerProviderStateMixin { 15 | late final TabController tabController; 16 | 17 | @override 18 | void initState() { 19 | tabController = TabController(length: 4, vsync: this); 20 | super.initState(); 21 | } 22 | 23 | @override 24 | void dispose() { 25 | tabController.dispose(); 26 | super.dispose(); 27 | } 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | return Scaffold( 32 | appBar: AppBar( 33 | backgroundColor: const Color(0xFF128a7e), 34 | title: const Text("Whatsapp"), 35 | bottom: TabBar( 36 | indicatorColor: Colors.white, 37 | tabs: const [ 38 | Tab( 39 | icon: Icon( 40 | Icons.camera_alt, 41 | ), 42 | ), 43 | Tab(text: 'Chats'), 44 | Tab(text: 'Status'), 45 | Tab(text: 'Calls'), 46 | ], 47 | controller: tabController, 48 | ), 49 | ), 50 | body: TabBarView( 51 | children: const [ 52 | Center( 53 | child: Icon( 54 | Icons.camera_alt, 55 | ), 56 | ), 57 | Chats(), 58 | Status(), 59 | Calls(), 60 | ], 61 | controller: tabController, 62 | ), 63 | ); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: slider_menu 2 | description: A new Flutter project. 3 | 4 | # The following line prevents the package from being accidentally published to 5 | # pub.dev using `flutter pub publish`. This is preferred for private packages. 6 | publish_to: 'none' # Remove this line if you wish to publish to pub.dev 7 | 8 | # The following defines the version and build number for your application. 9 | # A version number is three numbers separated by dots, like 1.2.43 10 | # followed by an optional build number separated by a +. 11 | # Both the version and the builder number may be overridden in flutter 12 | # build by specifying --build-name and --build-number, respectively. 13 | # In Android, build-name is used as versionName while build-number used as versionCode. 14 | # Read more about Android versioning at https://developer.android.com/studio/publish/versioning 15 | # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. 16 | # Read more about iOS versioning at 17 | # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html 18 | version: 1.0.0+1 19 | 20 | environment: 21 | sdk: ">=2.16.1 <3.0.0" 22 | 23 | # Dependencies specify other packages that your package needs in order to work. 24 | # To automatically upgrade your package dependencies to the latest versions 25 | # consider running `flutter pub upgrade --major-versions`. Alternatively, 26 | # dependencies can be manually updated by changing the version numbers below to 27 | # the latest version available on pub.dev. To see which dependencies have newer 28 | # versions available, run `flutter pub outdated`. 29 | dependencies: 30 | flutter: 31 | sdk: flutter 32 | 33 | 34 | # The following adds the Cupertino Icons font to your application. 35 | # Use with the CupertinoIcons class for iOS style icons. 36 | cupertino_icons: ^1.0.2 37 | 38 | dev_dependencies: 39 | flutter_test: 40 | sdk: flutter 41 | 42 | # The "flutter_lints" package below contains a set of recommended lints to 43 | # encourage good coding practices. The lint set provided by the package is 44 | # activated in the `analysis_options.yaml` file located at the root of your 45 | # package. See that file for information about deactivating specific lint 46 | # rules and activating additional ones. 47 | flutter_lints: ^1.0.0 48 | 49 | # For information on the generic Dart part of this file, see the 50 | # following page: https://dart.dev/tools/pub/pubspec 51 | 52 | # The following section is specific to Flutter. 53 | flutter: 54 | 55 | # The following line ensures that the Material Icons font is 56 | # included with your application, so that you can use the icons in 57 | # the material Icons class. 58 | uses-material-design: true 59 | 60 | # To add assets to your application, add an assets section, like this: 61 | # assets: 62 | # - images/a_dot_burr.jpeg 63 | # - images/a_dot_ham.jpeg 64 | 65 | # An image asset can refer to one or more resolution-specific "variants", see 66 | # https://flutter.dev/assets-and-images/#resolution-aware. 67 | 68 | # For details regarding adding assets from package dependencies, see 69 | # https://flutter.dev/assets-and-images/#from-packages 70 | 71 | # To add custom fonts to your application, add a fonts section here, 72 | # in this "flutter" section. Each entry in this list should have a 73 | # "family" key with the font family name, and a "fonts" key with a 74 | # list giving the asset and other descriptors for the font. For 75 | # example: 76 | # fonts: 77 | # - family: Schyler 78 | # fonts: 79 | # - asset: fonts/Schyler-Regular.ttf 80 | # - asset: fonts/Schyler-Italic.ttf 81 | # style: italic 82 | # - family: Trajan Pro 83 | # fonts: 84 | # - asset: fonts/TrajanPro.ttf 85 | # - asset: fonts/TrajanPro_Bold.ttf 86 | # weight: 700 87 | # 88 | # For details regarding fonts from package dependencies, 89 | # see https://flutter.dev/custom-fonts/#from-packages 90 | --------------------------------------------------------------------------------