├── 01. Flutter Google Maps Marker ├── 02. Google_maps_polylines.dart ├── 03.shopping_cart_logic.dart ├── 04. flutter_web_firebase_auth.dart ├── 05. google_maps_location_animator.dart ├── 06. auto_email_attacher.dart ├── 07. twitter-new-data-indicator.dart ├── 08. flutter_3d_model.dart ├── 09. flutter_blur_effect.dart ├── 10.flutter_stay_slider.dart ├── 11.flutter_signature.dart ├── 12. flutter_frosted_glass_effect.dart ├── 13.flutter_filter_data.dart ├── 14.fluid_bottom_bar.dart ├── 15.flutter_dropdown.dart ├── 16.flutter_swiggy_menu.dart ├── 17.flutter_bottom_sheet.dart ├── 18.apple_dynamic_island.dart ├── 19. flutter_radio_button.dart ├── 20. flutter_custom_modal_popup.dart ├── 21. floating_action_sheet.dart ├── 22. custom_tabbar.dart ├── 23. flutter_flexi_gridview.dart ├── 24. flutter_expandable_drawer.dart ├── 25.flutter_elegant_button.dart ├── 26. flutter_pageview_changer.dart ├── 27. flutter_animated_bottomsheet.dart ├── 28.flutter_navigation_animation.dart ├── 29.flutter_dynamic_search.dart ├── 30.flutter_selectable_tile.dart ├── 30.flutter_ui_utils.dart ├── 30.modern_dropdown_button.dart ├── 31.modern_onboarding_view.dart ├── 32.flutter_stacked_expandable_container.dart ├── 33. flutter_pinterest_searchbar.dart ├── 34. flutter_easy_animation_button.dart ├── 35.flutter_custom_tab.dart ├── 36.flutter_share.dart ├── 37.flutter_google_maps_marker_mode.dart ├── 38.flutter_go_router_basics.dart ├── 39.flutter_maps_listview.dart ├── 40.flutter_double_slider.dart ├── 41.flutter_payment_modes.dart ├── 42.flutter_listview_search.dart ├── 43.flutter_color_pallete_generator.dart ├── 44.flutter_dropdown_search.dart ├── 45.flutter_checkbox_dark_theme.dart ├── 46.flutter_ios_calender_picker.dart ├── 47.flutter_navigation_rail_example.dart ├── 48.flutter_spiderman_slider.dart ├── 49.flutter_color_drag_drop.dart ├── 50.flutter_modern_item_section.dart ├── 51.flutter_advanced_social_media_button.dart ├── 52.flutter_jiocinema_subtitle_section.dart ├── 53.flutter_quick_data_selector.dart ├── 54.dribble_dropdown_menu.dart ├── 55.flutter_poll_options.dart ├── 56.flutter_vs_gridview.dart ├── 57. flutter_blur_background.dart ├── 58. custom_theme_onboarding.dart ├── 59. flutter_parallax_effect.dart └── README.md /01. Flutter Google Maps Marker: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:google_maps_flutter/google_maps_flutter.dart'; 4 | import 'package:provider/provider.dart'; 5 | import 'package:sizer/sizer.dart'; 6 | 7 | class GoogleMapsMarkerNotifier extends ChangeNotifier { 8 | final List _markers = []; 9 | 10 | bool isSoloMarker = false; 11 | 12 | addNewMarker({required LatLng latLng}) { 13 | if (isSoloMarker) { 14 | _markers.clear(); 15 | Marker marker = Marker( 16 | position: LatLng(latLng.latitude, latLng.longitude), 17 | markerId: MarkerId(latLng.toString())); 18 | _markers.add(marker); 19 | notifyListeners(); 20 | } else { 21 | Marker marker = Marker( 22 | position: LatLng(latLng.latitude, latLng.longitude), 23 | markerId: MarkerId(latLng.toString())); 24 | _markers.add(marker); 25 | notifyListeners(); 26 | } 27 | } 28 | 29 | setSoloMarker() { 30 | isSoloMarker = !isSoloMarker; 31 | notifyListeners(); 32 | } 33 | 34 | clearMarkers() { 35 | _markers.clear(); 36 | notifyListeners(); 37 | } 38 | } 39 | 40 | class GoogleMapsMarkerExample extends StatelessWidget { 41 | const GoogleMapsMarkerExample({Key? key}) : super(key: key); 42 | 43 | @override 44 | Widget build(BuildContext context) { 45 | Completer _controller = Completer(); 46 | 47 | GoogleMapsMarkerNotifier googleMapsMarkerNotifier( 48 | {required bool renderUI}) => 49 | Provider.of(context, listen: renderUI); 50 | 51 | return Sizer(builder: ((context, orientation, deviceType) { 52 | return MaterialApp( 53 | debugShowCheckedModeBanner: false, 54 | home: Scaffold( 55 | floatingActionButtonLocation: 56 | FloatingActionButtonLocation.centerDocked, 57 | floatingActionButton: SizedBox( 58 | child: Column(mainAxisAlignment: MainAxisAlignment.end, children: [ 59 | CustomRoundedButton( 60 | onTap: () { 61 | googleMapsMarkerNotifier(renderUI: false).setSoloMarker(); 62 | }, 63 | backgroundColor: 64 | googleMapsMarkerNotifier(renderUI: true).isSoloMarker 65 | ? Colors.deepOrangeAccent 66 | : KConstantColors.blueColor, 67 | label: googleMapsMarkerNotifier(renderUI: true).isSoloMarker 68 | ? "Single mode" 69 | : "Multiple mode", 70 | height: 5, 71 | width: 40), 72 | vSizedBox1, 73 | if (googleMapsMarkerNotifier(renderUI: true)._markers.isNotEmpty) 74 | CustomRoundedButton( 75 | onTap: () { 76 | googleMapsMarkerNotifier(renderUI: false).clearMarkers(); 77 | }, 78 | backgroundColor: KConstantColors.bgColorFaint, 79 | label: "Clear markers", 80 | height: 5, 81 | width: 40), 82 | ]), 83 | ), 84 | appBar: AppBar( 85 | backgroundColor: KConstantColors.bgColorFaint, 86 | title: Text("Google maps markers", 87 | style: KCustomTextStyle.kBold(context, 14))), 88 | backgroundColor: KConstantColors.bgColor, 89 | body: GoogleMap( 90 | mapType: MapType.hybrid, 91 | onTap: (latln) { 92 | googleMapsMarkerNotifier(renderUI: false) 93 | .addNewMarker(latLng: latln); 94 | }, 95 | markers: Set.from( 96 | googleMapsMarkerNotifier(renderUI: true)._markers.toList()), 97 | onMapCreated: (GoogleMapController controller) { 98 | _controller.complete(controller); 99 | }, 100 | initialCameraPosition: const CameraPosition( 101 | zoom: 16, target: LatLng(28.7041, 77.1025))), 102 | ), 103 | ); 104 | })); 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /02. Google_maps_polylines.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | import 'dart:io'; 3 | import 'package:easy_localization/easy_localization.dart'; 4 | import 'package:flutter/cupertino.dart'; 5 | import 'package:flutter/material.dart'; 6 | import 'package:flutter_dotenv/flutter_dotenv.dart'; 7 | import 'package:flutter_polyline_points/flutter_polyline_points.dart'; 8 | import 'package:font_awesome_flutter/font_awesome_flutter.dart'; 9 | import 'package:google_maps_flutter/google_maps_flutter.dart'; 10 | import 'package:location/location.dart'; 11 | import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart'; 12 | import 'package:provider/provider.dart'; 13 | 14 | 15 | // NOTES : 16 | // 1. DM ME FOR FULL PROJECT CODE 17 | // 2. YOU NEED TO HAVE BILLING ACCOUNT ON GOOGLE PLATFORM 18 | // 3. STAR THIS REPOSITORY 19 | // 4. FOLLOW ME ON INSTAGRAM : [https://www.instagram.com/abhishvek/] 20 | 21 | class ShowRoutesView extends StatefulWidget { 22 | @override 23 | State createState() => _ShowRoutesViewState(); 24 | } 25 | 26 | class _ShowRoutesViewState extends State { 27 | List polylineCoordinates = []; 28 | late PolylinePoints polylinePoints; 29 | final Set _polylines = {}; 30 | GoogleMapController? googleMapController; 31 | 32 | Location? location; 33 | 34 | @override 35 | void initState() { 36 | polylinePoints = PolylinePoints(); 37 | location = Location(); 38 | super.initState(); 39 | } 40 | 41 | @override 42 | Widget build(BuildContext context) { 43 | double ZOOM = 12; 44 | 45 | LatLng? currentLatLong = 46 | Provider.of(context, listen: true).currentLatLng; 47 | String API_KEY = "API_KEY"; 48 | 49 | void setPolylines() async { 50 | LatLng desLatLng = "SOME_LATLNG"; 51 | 52 | LatLng myLocationLatLng = "SOME_LATLNG"; 53 | 54 | PolylineResult result = await polylinePoints.getRouteBetweenCoordinates( 55 | API_KEY, 56 | PointLatLng(desLatLng.latitude, desLatLng.longitude), 57 | PointLatLng(myLocationLatLng.latitude, myLocationLatLng.longitude)); 58 | 59 | if (result.status == 'OK') { 60 | for (var point in result.points) { 61 | polylineCoordinates.add(LatLng(point.latitude, point.longitude)); 62 | } 63 | setState(() { 64 | _polylines.add(Polyline( 65 | polylineId: const PolylineId('id'), 66 | points: polylineCoordinates)); 67 | }); 68 | } 69 | } 70 | 71 | LatLng desLatLng = "SOME_LATLNG"; 72 | 73 | Marker desMarker = Marker( 74 | infoWindow: const InfoWindow(title: "Destination point"), 75 | markerId: MarkerId(YOUR_OBJECT.toString()), 76 | position: desLatLng); 77 | Marker myLocationMarker = Marker( 78 | infoWindow: const InfoWindow(title: "My location"), 79 | markerId: MarkerId(currentLatLong.toString()), 80 | position: currentLatLong!); 81 | 82 | Set marker = {desMarker, myLocationMarker}; 83 | 84 | Completer _controller = Completer(); 85 | 86 | return Scaffold( 87 | body: Expanded(child: Consumer2( 88 | builder: ((context, locationNotifier, kNotifier, child) { 89 | return GoogleMap( 90 | scrollGesturesEnabled: true, 91 | buildingsEnabled: true, 92 | zoomControlsEnabled: true, 93 | zoomGesturesEnabled: true, 94 | onTap: (latLng) { 95 | _polylines.clear(); 96 | polylineCoordinates.clear(); 97 | setPolylines(); 98 | locationNotifier.animateToCamera( 99 | isCurrent: false, 100 | zoom: 12, 101 | otherLatLng: latLng, 102 | controller: googleMapController!); 103 | }, 104 | polylines: _polylines, 105 | myLocationButtonEnabled: true, 106 | myLocationEnabled: true, 107 | markers: marker, 108 | mapType: MapType.normal, 109 | initialCameraPosition: CameraPosition( 110 | target: currentLatLong, 111 | zoom: ZOOM), 112 | onMapCreated: (GoogleMapController mainController) { 113 | _controller.complete(mainController); 114 | googleMapController = mainController; 115 | setPolylines(); 116 | }, 117 | ); 118 | }), 119 | )) 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /04. flutter_web_firebase_auth.dart: -------------------------------------------------------------------------------- 1 | import 'package:awesome_widgets/awesome_widgets.dart'; 2 | import 'package:firebase_auth/firebase_auth.dart'; 3 | import 'package:flutter/material.dart'; 4 | import 'package:flutter_firebase_utils/utils/colors.dart'; 5 | 6 | 7 | /* 8 | 9 | 1. Create a firebase app with web mode. Copy the credentials. 10 | 11 | 2. ADD THIS SCRIPT ABOVE flutter_service_worker script in index.html file 12 | 13 | 14 | 15 | 27 | */ 28 | 29 | class FirebaseWebAuthentication extends StatelessWidget { 30 | const FirebaseWebAuthentication({Key? key}) : super(key: key); 31 | 32 | @override 33 | Widget build(BuildContext context) { 34 | final emailController = TextEditingController(); 35 | final passwordController = TextEditingController(); 36 | 37 | showRes({required String title}) { 38 | return showDialog( 39 | context: context, 40 | builder: (context) { 41 | return AlertDialog( 42 | actions: [ 43 | AwesomeButton.roundedIconButton( 44 | height: 30, 45 | width: 50, 46 | backgroundColor: KConstantColors.blueColor, 47 | onTap: () { 48 | Navigator.pop(context); 49 | }, 50 | title: "Okay") 51 | ], 52 | backgroundColor: KConstantColors.bgColorFaint, 53 | title: Text( 54 | title, 55 | style: const TextStyle( 56 | fontSize: 12, 57 | fontWeight: FontWeight.bold, 58 | fontFamily: "Poppins-B"), 59 | ), 60 | ); 61 | }); 62 | } 63 | 64 | Future login() async { 65 | try { 66 | if (emailController.text.isNotEmpty && 67 | passwordController.text.isNotEmpty) { 68 | final credential = await FirebaseAuth.instance 69 | .signInWithEmailAndPassword( 70 | email: emailController.text, 71 | password: passwordController.text); 72 | showRes(title: "${credential.user!.email} logged in!"); 73 | } else { 74 | showRes(title: "Enter credentials"); 75 | // showError(title: "Enter credentials"); 76 | } 77 | } on FirebaseAuthException catch (e) { 78 | if (e.code == 'user-not-found') { 79 | showRes(title: "User not found!"); 80 | } else if (e.code == 'wrong-password') { 81 | showRes(title: "Wrong password"); 82 | } 83 | } catch (e) { 84 | showRes(title: e.toString()); 85 | } 86 | } 87 | 88 | Future signup() async { 89 | try { 90 | final credential = await FirebaseAuth.instance 91 | .createUserWithEmailAndPassword( 92 | email: emailController.text, password: passwordController.text); 93 | showRes(title: "${credential.user!.email} created new account!"); 94 | } on FirebaseAuthException catch (e) { 95 | if (e.code == 'weak-password') { 96 | showRes(title: "Use different password, Its weak one"); 97 | } else if (e.code == 'email-already-in-use') { 98 | showRes(title: "The account already exists for that email"); 99 | } 100 | } catch (e) { 101 | showRes(title: e.toString()); 102 | } 103 | } 104 | 105 | return Scaffold( 106 | backgroundColor: KConstantColors.bgColor, 107 | body: Column( 108 | children: [ 109 | const SizedBox(height: 20), 110 | const Text( 111 | "Flutter Firebase\n Web Authentication", 112 | textAlign: TextAlign.center, 113 | style: TextStyle( 114 | fontSize: 40, 115 | fontWeight: FontWeight.bold, 116 | fontFamily: "Poppins-B"), 117 | ), 118 | const SizedBox(height: 20), 119 | ClipRRect( 120 | borderRadius: BorderRadius.circular(25), 121 | child: Container( 122 | decoration: 123 | const BoxDecoration(color: Colors.deepOrangeAccent), 124 | height: 250, 125 | child: Image.asset("assets/images/onboard.png")), 126 | ), 127 | const SizedBox(height: 20), 128 | AwesomeTextfield.filled( 129 | height: 60, 130 | fillColor: KConstantColors.bgColorFaint, 131 | titleTextstyle: 132 | const TextStyle(fontSize: 12, fontFamily: "Poppins-M"), 133 | hintText: "Enter email address", 134 | textEditingController: emailController), 135 | AwesomeTextfield.filled( 136 | height: 60, 137 | titleTextstyle: 138 | const TextStyle(fontSize: 12, fontFamily: "Poppins-M"), 139 | fillColor: KConstantColors.bgColorFaint, 140 | hintText: "Enter password", 141 | textEditingController: passwordController), 142 | const SizedBox(height: 10), 143 | Row( 144 | mainAxisAlignment: MainAxisAlignment.center, 145 | children: [ 146 | AwesomeButton.roundedIconButton( 147 | titleTextstyle: 148 | const TextStyle(fontSize: 12, fontFamily: "Poppins-M"), 149 | height: 30, 150 | width: 100, 151 | backgroundColor: Colors.deepOrangeAccent, 152 | onTap: login, 153 | title: "Login"), 154 | const SizedBox(width: 100), 155 | AwesomeButton.roundedIconButton( 156 | titleTextstyle: 157 | const TextStyle(fontSize: 12, fontFamily: "Poppins-M"), 158 | height: 30, 159 | width: 100, 160 | backgroundColor: Colors.deepOrangeAccent, 161 | onTap: signup, 162 | title: "Signup"), 163 | ], 164 | ) 165 | ], 166 | )); 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /06. auto_email_attacher.dart: -------------------------------------------------------------------------------- 1 | import 'package:awesome_widgets/awesome_widgets.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | class LoginNotifier extends ChangeNotifier { 6 | final TextEditingController emailController = TextEditingController(); 7 | 8 | String attachedProvider = ""; 9 | 10 | attachEmailProvider({required String provider}) { 11 | emailController.text = emailController.text + provider; 12 | attachedProvider = provider; 13 | notifyListeners(); 14 | } 15 | 16 | clearTextFieldState() { 17 | emailController.clear(); 18 | attachedProvider = ""; 19 | notifyListeners(); 20 | } 21 | } 22 | 23 | class DemoLoginView extends StatelessWidget { 24 | const DemoLoginView({Key? key}) : super(key: key); 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | LoginNotifier loginNotifier({required bool renderUI}) => 29 | Provider.of(context, listen: renderUI); 30 | 31 | return Scaffold( 32 | body: Container( 33 | child: Column( 34 | children: [ 35 | AwesomeTextfield.filled( 36 | textEditingController: 37 | loginNotifier(renderUI: false).emailController, 38 | fillColor: Colors.grey), 39 | Row( 40 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 41 | children: [ 42 | ActionChipButton( 43 | backgroundColor: 44 | loginNotifier(renderUI: true).attachedProvider == 45 | "@yahoo.com" 46 | ? Colors.blue 47 | : Colors.greenAccent, 48 | onTap: () { 49 | loginNotifier(renderUI: false) 50 | .attachEmailProvider(provider: "@yahoo.com"); 51 | }, 52 | label: "@yahoo.com"), 53 | ActionChipButton( 54 | backgroundColor: 55 | loginNotifier(renderUI: true).attachedProvider == 56 | "@hotmail.com" 57 | ? Colors.blue 58 | : Colors.greenAccent, 59 | onTap: () { 60 | loginNotifier(renderUI: false) 61 | .attachEmailProvider(provider: "@hotmail.com"); 62 | }, 63 | label: "@hotmail.com"), 64 | ], 65 | ), 66 | if (loginNotifier(renderUI: true).attachedProvider != "") 67 | Align( 68 | alignment: Alignment.centerRight, 69 | child: ActionChip( 70 | onPressed: () { 71 | loginNotifier(renderUI: false).clearTextFieldState(); 72 | }, 73 | label: const Text("clear")), 74 | ), 75 | ], 76 | ), 77 | ), 78 | ); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /07. twitter-new-data-indicator.dart: -------------------------------------------------------------------------------- 1 | class NewDataIndicatorNotifier extends ChangeNotifier { 2 | bool _receivedNewData = false; 3 | bool get receivedNewData => _receivedNewData; 4 | 5 | List baseData = [ 6 | "Lorem Ipsum ", 7 | "is simply dummy", 8 | "text of the printing", 9 | "and typesetting industry", 10 | "when an unknown printer", 11 | "type specimen book" 12 | ]; 13 | 14 | List tempDataList = []; 15 | void fillTempList({required String data}) { 16 | tempDataList.add(data); 17 | notifyListeners(); 18 | } 19 | 20 | void fillBaseList() { 21 | baseData.addAll(tempDataList); 22 | tempDataList.clear(); 23 | notifyListeners(); 24 | } 25 | 26 | setReceivedNewData() { 27 | _receivedNewData = true; 28 | notifyListeners(); 29 | } 30 | } 31 | 32 | class TwitterPullToRefreshView extends StatelessWidget { 33 | const TwitterPullToRefreshView({Key? key}) : super(key: key); 34 | 35 | @override 36 | Widget build(BuildContext context) { 37 | final ScrollController scrollController = ScrollController(); 38 | NewDataIndicatorNotifier newDataIndicatorNotifier( 39 | {required bool renderUI}) => 40 | Provider.of(context, listen: renderUI); 41 | 42 | List data = newDataIndicatorNotifier(renderUI: true).baseData; 43 | 44 | bool hasNewData = 45 | newDataIndicatorNotifier(renderUI: true).tempDataList.isNotEmpty; 46 | 47 | void scrollToTop() { 48 | scrollController.jumpTo(scrollController.position.maxScrollExtent); 49 | } 50 | 51 | Widget newDataNotificationBlock() { 52 | return Padding( 53 | padding: const EdgeInsets.only(top: 10), 54 | child: AnimatedOpacity( 55 | curve: Curves.easeInCubic, 56 | duration: const Duration(milliseconds: 500), 57 | opacity: hasNewData ? 1 : 0, 58 | child: Align( 59 | alignment: Alignment.topCenter, 60 | child: CustomRoundedIconButton( 61 | height: 5, 62 | iconData: Icons.arrow_drop_down_circle, 63 | width: 35, 64 | radius: 50, 65 | backgroundColor: KConstantColors.blueColor, 66 | onTap: () { 67 | scrollToTop(); 68 | newDataIndicatorNotifier(renderUI: false).fillBaseList(); 69 | }, 70 | label: "New posts"), 71 | ), 72 | ), 73 | ); 74 | } 75 | 76 | return Sizer(builder: (context, origentation, _) { 77 | return MaterialApp( 78 | debugShowCheckedModeBanner: false, 79 | home: Scaffold( 80 | floatingActionButton: Column( 81 | mainAxisAlignment: MainAxisAlignment.end, 82 | children: [ 83 | CustomRoundedButton( 84 | width: 40, 85 | backgroundColor: KConstantColors.blueColor, 86 | onTap: () { 87 | DateTime timeStamp = DateTime.now(); 88 | newDataIndicatorNotifier(renderUI: false) 89 | .fillTempList(data: "New data : $timeStamp"); 90 | }, 91 | label: "Add more data"), 92 | ], 93 | ), 94 | appBar: AppBar( 95 | backgroundColor: KConstantColors.blueColor, 96 | title: Row( 97 | mainAxisAlignment: MainAxisAlignment.center, 98 | children: [ 99 | const Icon(FontAwesomeIcons.twitter), 100 | hSizedBox2, 101 | Text("Twitter New Data Indicator", 102 | style: KCustomTextStyle.kBold(context, 16)) 103 | ], 104 | )), 105 | backgroundColor: KConstantColors.bgColor, 106 | body: Stack( 107 | children: [ 108 | ListView.builder( 109 | reverse: true, 110 | controller: scrollController, 111 | shrinkWrap: true, 112 | itemCount: data.length, 113 | itemBuilder: (BuildContext context, int index) { 114 | return Card( 115 | color: KConstantColors.bgColorFaint, 116 | elevation: 0.4, 117 | child: Padding( 118 | padding: const EdgeInsets.all(8.0), 119 | child: ListTile( 120 | tileColor: KConstantColors.bgColorFaint, 121 | title: Text(data[index], 122 | style: KCustomTextStyle.kMedium(context, 10))), 123 | ), 124 | ); 125 | }, 126 | ), 127 | Positioned(child: newDataNotificationBlock()) 128 | ], 129 | )), 130 | ); 131 | }); 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /08. flutter_3d_model.dart: -------------------------------------------------------------------------------- 1 | import 'package:awesome_widgets/awesome_widgets.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:font_awesome_flutter/font_awesome_flutter.dart'; 4 | import 'package:model_viewer_plus/model_viewer_plus.dart'; 5 | import 'package:provider/provider.dart'; 6 | import 'package:sizer/sizer.dart'; 7 | 8 | // [Get the above packages 🚀] 9 | 10 | class ItemViewer3D extends StatelessWidget { 11 | const ItemViewer3D({Key? key}) : super(key: key); 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | return Sizer( 16 | builder: ((context, orientation, deviceType) { 17 | return MaterialApp( 18 | debugShowCheckedModeBanner: false, 19 | home: SafeArea( 20 | child: Scaffold( 21 | backgroundColor: KConstantColors.bgColor, 22 | body: Column( 23 | mainAxisAlignment: MainAxisAlignment.start, 24 | crossAxisAlignment: CrossAxisAlignment.start, 25 | children: [ 26 | SizedBox( 27 | height: 400, 28 | child: ModelViewer( 29 | src: 30 | 'https://modelviewer.dev/shared-assets/models/Astronaut.glb', 31 | alt: "A 3D model of an astronaut", 32 | ar: true, 33 | autoRotate: true, 34 | cameraControls: true, 35 | ), 36 | ), 37 | Text("Astronaut suit", 38 | style: KCustomTextStyle.kBold(context, 32)), 39 | Text( 40 | "This is one suit made specially for all the space enthusiasts. The special power includes surviving in the giant space!", 41 | style: KCustomTextStyle.kMedium( 42 | context, 11, KConstantColors.textColor)), 43 | Row( 44 | children: [ 45 | Text("\$2000", 46 | style: KCustomTextStyle.kBold(context, 30)), 47 | const Spacer(), 48 | AwesomeButton.iconButton( 49 | height: 30, 50 | width: 30, 51 | onTap: () {}, 52 | icon: const Icon(FontAwesomeIcons.heart, 53 | size: 15, color: KConstantColors.whiteColor)), 54 | hSizedBox2, 55 | AwesomeButton.iconButton( 56 | height: 30, 57 | width: 30, 58 | onTap: () {}, 59 | icon: const Icon(FontAwesomeIcons.bookmark, 60 | size: 15, color: KConstantColors.whiteColor)), 61 | hSizedBox2 62 | ], 63 | ), 64 | vSizedBox2, 65 | AwesomeButton.roundedIconButton( 66 | titleTextstyle: KCustomTextStyle.kBold(context, 12), 67 | onTap: () {}, 68 | title: "Buy now"), 69 | vSizedBox1, 70 | Center( 71 | child: AwesomeButton.roundedIconButton( 72 | backgroundColor: KConstantColors.dimDark, 73 | titleTextstyle: KCustomTextStyle.kBold(context, 12), 74 | onTap: () {}, 75 | title: "Add to cart"), 76 | ) 77 | ], 78 | ), 79 | ), 80 | )); 81 | }), 82 | ); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /09. flutter_blur_effect.dart: -------------------------------------------------------------------------------- 1 | import 'dart:ui'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | /* 6 | 7 | @SUBSCRIBE - [https://www.youtube.com/channel/UCIxJGxcB4pSrIvuv8FyuqUA] 8 | 9 | */ 10 | 11 | class FlutterBlueEffectNotifier extends ChangeNotifier { 12 | double _blurValue = 0; 13 | double get blurValue => _blurValue; 14 | 15 | setBlueValue({required double val}) { 16 | _blurValue = val; 17 | notifyListeners(); 18 | } 19 | } 20 | 21 | class FlutterBlurEffectView extends StatelessWidget { 22 | const FlutterBlurEffectView({Key? key}) : super(key: key); 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | FlutterBlueEffectNotifier flutterBlueEffectNotifier( 27 | {required bool renderUI}) => 28 | Provider.of(context, listen: renderUI); 29 | 30 | return Scaffold( 31 | appBar: AppBar( 32 | backgroundColor: Colors.blue, 33 | title: const Text("Flutter Blur Effect")), 34 | body: Column( 35 | mainAxisAlignment: MainAxisAlignment.center, 36 | children: [ 37 | SizedBox( 38 | height: 500, 39 | child: Stack( 40 | fit: StackFit.expand, 41 | children: [ 42 | SizedBox( 43 | height: 500, 44 | child: ClipRRect( 45 | borderRadius: BorderRadius.circular(25), 46 | child: Image.asset("assets/car.jpeg"))), 47 | SizedBox( 48 | height: 500, 49 | child: BackdropFilter( 50 | child: const SizedBox.shrink(), 51 | filter: ImageFilter.blur( 52 | sigmaX: flutterBlueEffectNotifier(renderUI: false) 53 | .blurValue, 54 | sigmaY: flutterBlueEffectNotifier(renderUI: false) 55 | .blurValue)), 56 | ), 57 | ], 58 | ), 59 | ), 60 | const SizedBox(height: 20), 61 | Slider( 62 | min: 0, 63 | max: 10, 64 | value: flutterBlueEffectNotifier(renderUI: true).blurValue, 65 | onChanged: (val) { 66 | flutterBlueEffectNotifier(renderUI: false) 67 | .setBlueValue(val: val); 68 | }), 69 | ], 70 | ), 71 | ); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /10.flutter_stay_slider.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:instagram_posts/main.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | class StaySliderNotifier extends ChangeNotifier { 6 | List ratings = ["🚀", "🔥", "👍🏻", "😒", "👎🏻"]; 7 | 8 | bool isRatingChanged = false; 9 | setRatingChanged({required bool value}) { 10 | isRatingChanged = value; 11 | notifyListeners(); 12 | debugPrint(isRatingChanged.toString()); 13 | } 14 | 15 | String selectedRating = "🚀"; 16 | double ratingValue = 0; 17 | setRatingValue({required double val}) { 18 | ratingValue = val; 19 | notifyListeners(); 20 | if (ratingValue > 0 && ratingValue < .2) { 21 | selectedRating = ratings[4]; 22 | } else if (ratingValue > .2 && ratingValue < .4) { 23 | selectedRating = ratings[3]; 24 | } else if (ratingValue > .4 && ratingValue < .6) { 25 | selectedRating = ratings[2]; 26 | } else if (ratingValue > .6 && ratingValue < .8) { 27 | selectedRating = ratings[1]; 28 | } else if (ratingValue > .8) { 29 | selectedRating = ratings[0]; 30 | } 31 | notifyListeners(); 32 | debugPrint(ratingValue.toString()); 33 | } 34 | } 35 | 36 | class FlutterExperienceSliderWidget extends StatelessWidget { 37 | const FlutterExperienceSliderWidget({Key? key}) : super(key: key); 38 | 39 | @override 40 | Widget build(BuildContext context) { 41 | StaySliderNotifier staySliderNotifier({required bool renderUI}) => 42 | Provider.of(context, listen: renderUI); 43 | 44 | String selectedEmoji = staySliderNotifier(renderUI: true).selectedRating; 45 | double ratingValue = staySliderNotifier(renderUI: true).ratingValue; 46 | bool isRatingChanged = staySliderNotifier(renderUI: true).isRatingChanged; 47 | 48 | Widget staySlider() { 49 | return Center( 50 | child: Column( 51 | mainAxisAlignment: MainAxisAlignment.center, 52 | crossAxisAlignment: CrossAxisAlignment.center, 53 | children: [ 54 | const SizedBox(height: 20), 55 | SizedBox( 56 | height: 170, 57 | child: AnimatedScale( 58 | duration: const Duration(seconds: 1), 59 | scale: isRatingChanged ? 1.1 : 0.8, 60 | child: Text(selectedEmoji, 61 | style: TextStyle( 62 | fontWeight: FontWeight.bold, 63 | fontSize: isRatingChanged ? 120 : 100)), 64 | ), 65 | ), 66 | SizedBox( 67 | width: 300, 68 | child: Slider( 69 | activeColor: Colors.red, 70 | min: 0, 71 | max: 1, 72 | value: ratingValue, 73 | onChangeEnd: (val) { 74 | staySliderNotifier(renderUI: false) 75 | .setRatingChanged(value: true); 76 | }, 77 | onChangeStart: (val) { 78 | staySliderNotifier(renderUI: false) 79 | .setRatingChanged(value: false); 80 | }, 81 | onChanged: (val) { 82 | staySliderNotifier(renderUI: false) 83 | .setRatingValue(val: val); 84 | })) 85 | ], 86 | ), 87 | ); 88 | } 89 | 90 | return Scaffold( 91 | backgroundColor: bgColor, 92 | appBar: AppBar( 93 | backgroundColor: bgColor, 94 | title: const Text("Flutter Stay Slider", 95 | style: TextStyle(fontWeight: FontWeight.bold))), 96 | body: Column( 97 | mainAxisAlignment: MainAxisAlignment.center, 98 | crossAxisAlignment: CrossAxisAlignment.center, 99 | children: [ 100 | Container( 101 | child: Padding( 102 | padding: const EdgeInsets.all(8.0), 103 | child: Column( 104 | children: [ 105 | const Text("Rate your stay", 106 | style: 107 | TextStyle(fontWeight: FontWeight.bold, fontSize: 30)), 108 | staySlider() 109 | ], 110 | ), 111 | ), 112 | decoration: BoxDecoration( 113 | border: Border.all(width: 0.2, color: Colors.white), 114 | borderRadius: BorderRadius.circular(25)), 115 | ) 116 | ], 117 | ), 118 | ); 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /11.flutter_signature.dart: -------------------------------------------------------------------------------- 1 | import 'package:finance_logs/app/shared/colors.dart'; 2 | import 'package:finance_logs/app/shared/dimensions.dart'; 3 | import 'package:finance_logs/app/shared/text_styles.dart'; 4 | import 'package:flutter/material.dart'; 5 | import 'package:provider/provider.dart'; 6 | import 'package:signature/signature.dart'; 7 | 8 | // ADD https://pub.dev/packages/signature in pubspec.yaml 9 | 10 | class FlutterSignatureNotifier extends ChangeNotifier { 11 | double penWidth = 5; 12 | 13 | setPenWidth({required double kValue}) { 14 | penWidth = kValue; 15 | notifyListeners(); 16 | } 17 | 18 | SignatureController controller({required double width}) => 19 | SignatureController( 20 | penStrokeWidth: width, 21 | penColor: Colors.white, 22 | exportPenColor: KConstantColors.bgColor, 23 | exportBackgroundColor: Colors.white); 24 | } 25 | 26 | class FlutterSignatureUsageView extends StatelessWidget { 27 | const FlutterSignatureUsageView({Key? key}) : super(key: key); 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | FlutterSignatureNotifier flutterSignatureNotifier( 32 | {required bool renderUI}) => 33 | Provider.of(context, listen: renderUI); 34 | 35 | Widget getCanvas() { 36 | return Padding( 37 | padding: const EdgeInsets.all(8.0), 38 | child: ClipRRect( 39 | borderRadius: BorderRadius.circular(25), 40 | child: Signature( 41 | controller: flutterSignatureNotifier(renderUI: false).controller( 42 | width: flutterSignatureNotifier(renderUI: true).penWidth), 43 | width: 500, 44 | height: 400, 45 | backgroundColor: KConstantColors.bgColorFaint, 46 | ), 47 | ), 48 | ); 49 | } 50 | 51 | return Scaffold( 52 | appBar: AppBar( 53 | backgroundColor: KConstantColors.bgColorFaint, 54 | title: const Text("Flutter signature pad")), 55 | backgroundColor: KConstantColors.bgColor, 56 | body: Column( 57 | mainAxisAlignment: MainAxisAlignment.center, 58 | crossAxisAlignment: CrossAxisAlignment.center, 59 | children: [ 60 | Text("Add signature", style: KCustomTextStyle.kBold(context, 30)), 61 | vSizedBox2, 62 | getCanvas(), 63 | Slider( 64 | min: 1, 65 | max: 10, 66 | value: flutterSignatureNotifier(renderUI: true).penWidth, 67 | onChanged: (val) { 68 | flutterSignatureNotifier(renderUI: false) 69 | .setPenWidth(kValue: val); 70 | }), 71 | vSizedBox2, 72 | ActionChip( 73 | backgroundColor: KConstantColors.blueColor, 74 | label: Text("Continue", 75 | style: KCustomTextStyle.kMedium(context, 10)), 76 | onPressed: () { 77 | if (flutterSignatureNotifier(renderUI: false) 78 | .controller( 79 | width: 80 | flutterSignatureNotifier(renderUI: true).penWidth) 81 | .isEmpty) { 82 | // DO SOMETHING 83 | } 84 | }) 85 | ], 86 | ), 87 | ); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /12. flutter_frosted_glass_effect.dart: -------------------------------------------------------------------------------- 1 | import 'dart:ui'; 2 | import 'package:flutter/material.dart'; 3 | 4 | const bgColorFaint = Color.fromRGBO(22, 24, 27, 1); 5 | const bgColor = Color.fromRGBO(11, 12, 14, 1); 6 | 7 | class FlutterFrostView extends StatelessWidget { 8 | const FlutterFrostView({Key? key}) : super(key: key); 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | List data = [ 13 | { 14 | "title": "Naruto", 15 | "image": "assets/naruto.jpeg", 16 | "description": 17 | "Naruto is an orphan who has a dangerous fox-like entity known as Kurama the Nine-Tailed Fox sealed within his body by his father, the Fourth Hokage Minato Namikaze, the leader of Konoha's ninja force, at the cost of his own life and that of his wife, Kushina Uzumaki." 18 | }, 19 | { 20 | "title": "Sasuke", 21 | "image": "assets/sasuke.jpeg", 22 | "description": 23 | "Sasuke belongs to the Uchiha clan, a notorious ninja family, and one of the most powerful, allied with Konohagakure (木ノ葉隠れの里, English version: 'Hidden Leaf Village'). Most of its members were massacred by Sasuke's older brother, Itachi Uchiha, before the series began, leaving Sasuke one of the few living." 24 | }, 25 | { 26 | "title": "Kakashi", 27 | "image": "assets/kakshi.jpeg", 28 | "description": 29 | "Kakashi graduated from the Ninja Academy and became a Genin, when he was merely 5 years old, then at 6 years old, became a Chuunin. He later became a Jounin and a member of the AnBu Assasination squad for Hidden Leaf Village. We see him as he takes up the role as being a sensei for the new Chunnins." 30 | } 31 | ]; 32 | 33 | return Scaffold( 34 | backgroundColor: bgColor, 35 | appBar: AppBar( 36 | backgroundColor: bgColorFaint, 37 | title: const Text("Flutter Frosted Glass Effect🚀")), 38 | body: Column( 39 | mainAxisAlignment: MainAxisAlignment.center, 40 | crossAxisAlignment: CrossAxisAlignment.center, 41 | children: [ 42 | SizedBox( 43 | height: 500, 44 | width: 500, 45 | child: ListView.builder( 46 | shrinkWrap: true, 47 | scrollDirection: Axis.horizontal, 48 | itemCount: data.length, 49 | itemBuilder: (BuildContext context, int index) { 50 | return FrostedCardWidget(data: data[index]); 51 | }, 52 | ), 53 | ), 54 | ], 55 | ), 56 | ); 57 | } 58 | } 59 | 60 | class FrostedCardWidget extends StatelessWidget { 61 | final Map data; 62 | const FrostedCardWidget({required this.data, Key? key}) : super(key: key); 63 | 64 | @override 65 | Widget build(BuildContext context) { 66 | return Padding( 67 | padding: const EdgeInsets.all(8.0), 68 | child: Center( 69 | child: ClipRRect( 70 | borderRadius: BorderRadius.circular(50), 71 | child: SizedBox( 72 | height: 600, 73 | width: 400, 74 | child: Stack( 75 | children: [ 76 | SizedBox( 77 | height: 600, 78 | width: 400, 79 | child: Image.asset( 80 | data['image'], 81 | fit: BoxFit.cover, 82 | )), 83 | Align( 84 | alignment: Alignment.bottomCenter, 85 | child: ClipRect( 86 | child: BackdropFilter( 87 | filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), 88 | child: SizedBox( 89 | width: 500.0, 90 | height: 280.0, 91 | child: Center( 92 | child: Column( 93 | mainAxisAlignment: MainAxisAlignment.center, 94 | crossAxisAlignment: CrossAxisAlignment.center, 95 | children: [ 96 | Text(data['title'], 97 | style: const TextStyle( 98 | fontWeight: FontWeight.bold, 99 | fontSize: 50)), 100 | const SizedBox(height: 10), 101 | Text(data['description'], 102 | textAlign: TextAlign.center, 103 | style: const TextStyle(fontSize: 16)), 104 | const SizedBox(height: 10), 105 | const Chip( 106 | backgroundColor: Colors.red, 107 | label: Text("Buy item", 108 | style: TextStyle( 109 | fontSize: 16, 110 | fontWeight: FontWeight.bold)), 111 | ) 112 | ], 113 | ))), 114 | ), 115 | ), 116 | ) 117 | ], 118 | ), 119 | ), 120 | ), 121 | ), 122 | ); 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /13.flutter_filter_data.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | class FakeData { 6 | final String title; 7 | final String category; 8 | 9 | const FakeData({required this.title, required this.category}); 10 | } 11 | 12 | class FilterDataNotifier extends ChangeNotifier { 13 | List categories = ["animal", "bird", "fish"]; 14 | 15 | List data = const [ 16 | FakeData(title: "Lion", category: "animal"), 17 | FakeData(title: "Elephant", category: "animal"), 18 | FakeData(title: "Dolphin", category: "fish"), 19 | FakeData(title: "Tiger", category: "animal"), 20 | FakeData(title: "Eagle", category: "bird"), 21 | FakeData(title: "Gold fish", category: "fish"), 22 | FakeData(title: "Rabbit", category: "animal"), 23 | FakeData(title: "Vulture", category: "bird"), 24 | FakeData(title: "Swallow", category: "bird"), 25 | FakeData(title: "Whale", category: "fish"), 26 | FakeData(title: "Shark", category: "fish"), 27 | FakeData(title: "Cat", category: "animal"), 28 | FakeData(title: "Duck", category: "bird"), 29 | FakeData(title: "Swallow", category: "bird"), 30 | FakeData(title: "Pigeon", category: "bird"), 31 | ]; 32 | 33 | List queriedData = []; 34 | 35 | bool isFilterMode = false; 36 | 37 | String? _query; 38 | String? get query => _query; 39 | 40 | setQuery({required String kValue}) { 41 | isFilterMode = true; 42 | _query = kValue; 43 | debugPrint(_query); 44 | notifyListeners(); 45 | } 46 | 47 | disableFilter() { 48 | isFilterMode = false; 49 | _query = null; 50 | notifyListeners(); 51 | } 52 | 53 | queryData() { 54 | queriedData.clear(); 55 | for (FakeData kData in data) { 56 | if (!queriedData.contains(kData)) { 57 | if (_query != null) { 58 | if (kData.category.contains(_query!)) { 59 | queriedData.add(kData); 60 | notifyListeners(); 61 | } 62 | } 63 | } 64 | } 65 | } 66 | } 67 | 68 | class FlutterFilterDataView extends StatelessWidget { 69 | const FlutterFilterDataView({Key? key}) : super(key: key); 70 | 71 | @override 72 | Widget build(BuildContext context) { 73 | FilterDataNotifier filterDataNotifier({required bool renderUI}) => 74 | Provider.of(context, listen: renderUI); 75 | 76 | List data = filterDataNotifier(renderUI: true).isFilterMode 77 | ? filterDataNotifier(renderUI: true).queriedData 78 | : filterDataNotifier(renderUI: true).data; 79 | 80 | List categories = filterDataNotifier(renderUI: false).categories; 81 | 82 | return Scaffold( 83 | backgroundColor: bgColor, 84 | appBar: AppBar( 85 | backgroundColor: bgColorFaint, 86 | title: const Text("Flutter Filter mode")), 87 | floatingActionButton: filterDataNotifier(renderUI: true).isFilterMode 88 | ? FloatingActionButton( 89 | backgroundColor: Colors.blue, 90 | child: const Icon(Icons.clear), 91 | onPressed: () { 92 | filterDataNotifier(renderUI: false).disableFilter(); 93 | }) 94 | : const SizedBox.shrink(), 95 | body: SingleChildScrollView( 96 | child: Column( 97 | mainAxisAlignment: MainAxisAlignment.start, 98 | crossAxisAlignment: CrossAxisAlignment.start, 99 | children: [ 100 | SizedBox( 101 | height: 100, 102 | width: 400, 103 | child: ListView.builder( 104 | scrollDirection: Axis.horizontal, 105 | itemCount: categories.length, 106 | itemBuilder: (BuildContext context, int index) { 107 | return Padding( 108 | padding: const EdgeInsets.all(8.0), 109 | child: ActionChip( 110 | backgroundColor: 111 | filterDataNotifier(renderUI: true).query == 112 | categories[index] 113 | ? Colors.blue 114 | : bgColorFaint, 115 | label: Text(categories[index]), 116 | onPressed: () { 117 | filterDataNotifier(renderUI: false) 118 | .setQuery(kValue: categories[index]); 119 | filterDataNotifier(renderUI: false).queryData(); 120 | }), 121 | ); 122 | }, 123 | ), 124 | ), 125 | ListView.builder( 126 | shrinkWrap: true, 127 | itemCount: data.length, 128 | itemBuilder: (BuildContext context, int index) { 129 | FakeData fakeData = data[index]; 130 | return ListTile( 131 | leading: const Icon(Icons.animation), 132 | title: Text(fakeData.title), 133 | subtitle: Text(fakeData.category), 134 | ); 135 | }, 136 | ), 137 | ], 138 | ), 139 | ), 140 | ); 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /14.fluid_bottom_bar.dart: -------------------------------------------------------------------------------- 1 | import 'package:fluid_bottom_nav_bar/fluid_bottom_nav_bar.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 4 | 5 | class FlutterBottomBarView extends StatefulWidget { 6 | const FlutterBottomBarView({Key? key}) : super(key: key); 7 | 8 | @override 9 | State createState() => _FlutterBottomBarViewState(); 10 | } 11 | 12 | class _FlutterBottomBarViewState extends State { 13 | int pageIndex = 0; 14 | PageController pageController = PageController(); 15 | changeIndex({required int value}) { 16 | setState(() { 17 | pageIndex = value; 18 | }); 19 | } 20 | 21 | @override 22 | Widget build(BuildContext context) { 23 | return Scaffold( 24 | appBar: AppBar( 25 | backgroundColor: bgColorFaint, 26 | title: const Text( 27 | "Animated bottom bar", 28 | style: TextStyle(fontWeight: FontWeight.bold), 29 | )), 30 | backgroundColor: bgColor, 31 | body: PageView( 32 | controller: pageController, 33 | children: const [ 34 | Center( 35 | child: Text( 36 | "Home view 🏠", 37 | style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32), 38 | ), 39 | ), 40 | Center( 41 | child: Text( 42 | "Profile view 🧛", 43 | style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32), 44 | )), 45 | ], 46 | ), 47 | bottomNavigationBar: FluidNavBar( 48 | defaultIndex: pageIndex, 49 | style: const FluidNavBarStyle( 50 | iconUnselectedForegroundColor: bgColor, 51 | iconSelectedForegroundColor: Colors.white, 52 | iconBackgroundColor: Colors.deepOrangeAccent, 53 | barBackgroundColor: bgColorFaint), 54 | icons: [ 55 | FluidNavBarIcon(icon: Icons.home), 56 | FluidNavBarIcon(icon: Icons.person), 57 | ], 58 | onChange: (val) { 59 | changeIndex(value: val); 60 | pageController.jumpToPage(pageIndex); 61 | }, 62 | ), 63 | ); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /15.flutter_dropdown.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | class DropDownNotifier extends ChangeNotifier { 6 | String? selectedItem; 7 | 8 | void setSelectedItem({required String value}) { 9 | selectedItem = value; 10 | notifyListeners(); 11 | debugPrint(selectedItem); 12 | } 13 | 14 | void clearMenu() { 15 | selectedItem = null; 16 | notifyListeners(); 17 | } 18 | } 19 | 20 | class FlutterDropDownView extends StatelessWidget { 21 | const FlutterDropDownView({Key? key}) : super(key: key); 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | DropDownNotifier downNotifier({required bool renderUI}) => 26 | Provider.of(context, listen: renderUI); 27 | 28 | List items = [ 29 | "India 🇮🇳", 30 | "Chile 🇨🇱", 31 | "France 🇫🇷", 32 | "Argetina 🇦🇷", 33 | "Indonesia 🇮🇩" 34 | ]; 35 | 36 | String? kSelectedData = downNotifier(renderUI: true).selectedItem; 37 | String? parsedString = kSelectedData?.substring(kSelectedData.length - 5); 38 | 39 | return Scaffold( 40 | appBar: AppBar( 41 | backgroundColor: bgColorFaint, 42 | title: const Text("Clean Dropdown Menu 🚀")), 43 | backgroundColor: bgColor, 44 | body: Center( 45 | child: Column( 46 | mainAxisAlignment: MainAxisAlignment.center, 47 | crossAxisAlignment: CrossAxisAlignment.center, 48 | children: [ 49 | if (parsedString != null) 50 | Text(parsedString, 51 | style: const TextStyle( 52 | fontWeight: FontWeight.bold, fontSize: 100)), 53 | if (kSelectedData != null) 54 | Text( 55 | "The selected country is ${downNotifier(renderUI: true).selectedItem}", 56 | style: const TextStyle( 57 | fontWeight: FontWeight.bold, fontSize: 20)), 58 | const SizedBox(height: 20), 59 | DropdownButton( 60 | menuMaxHeight: 200, 61 | icon: const Icon(Icons.arrow_forward_ios, size: 12), 62 | dropdownColor: bgColorFaint, 63 | hint: const Text("Select your country", 64 | style: TextStyle(fontWeight: FontWeight.bold)), 65 | borderRadius: BorderRadius.circular(25), 66 | value: downNotifier(renderUI: true).selectedItem, 67 | items: items.map((String value) { 68 | return DropdownMenuItem( 69 | value: value, 70 | child: Text( 71 | value, 72 | style: const TextStyle( 73 | fontWeight: FontWeight.bold, color: Colors.white), 74 | )); 75 | }).toList(), 76 | onChanged: (kValue) { 77 | if (kValue != null) { 78 | downNotifier(renderUI: false).setSelectedItem(value: kValue); 79 | } 80 | }, 81 | ), 82 | const SizedBox(height: 20), 83 | Row( 84 | mainAxisAlignment: MainAxisAlignment.center, 85 | children: [ 86 | if (kSelectedData != null) 87 | ActionChip( 88 | backgroundColor: Colors.red, 89 | label: const Text("Clear", 90 | style: TextStyle(fontWeight: FontWeight.bold)), 91 | onPressed: () { 92 | downNotifier(renderUI: false).clearMenu(); 93 | }), 94 | const SizedBox(width: 20), 95 | if (kSelectedData != null) 96 | ActionChip( 97 | backgroundColor: Colors.blue, 98 | label: const Text("Continue", 99 | style: TextStyle(fontWeight: FontWeight.bold)), 100 | onPressed: () { 101 | downNotifier(renderUI: false).clearMenu(); 102 | }) 103 | ], 104 | ) 105 | ], 106 | ), 107 | ), 108 | ); 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /17.flutter_bottom_sheet.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class BottomSheetNotifier extends ChangeNotifier { 7 | List tags = [ 8 | "Lion", 9 | "Tiger", 10 | "Elephant", 11 | "Cheetah", 12 | "Fish", 13 | "Dolphin", 14 | "Rabbit", 15 | "Dog", 16 | "Swan", 17 | "Cat", 18 | "Donkey", 19 | "Frog" 20 | ]; 21 | List queriedData = []; 22 | 23 | addToList({required String kValue}) { 24 | if (queriedData.contains(kValue)) { 25 | queriedData.remove(kValue); 26 | notifyListeners(); 27 | } else { 28 | queriedData.add(kValue); 29 | notifyListeners(); 30 | } 31 | } 32 | } 33 | 34 | class FlutterBottomSheetView extends StatelessWidget { 35 | const FlutterBottomSheetView({Key? key}) : super(key: key); 36 | 37 | @override 38 | Widget build(BuildContext context) { 39 | BottomSheetNotifier bottomSheetNotifier({required bool renderUI}) => 40 | Provider.of(context, listen: renderUI); 41 | 42 | List data = bottomSheetNotifier(renderUI: true).queriedData; 43 | 44 | _showTags() { 45 | return GridView.builder( 46 | shrinkWrap: true, 47 | gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( 48 | childAspectRatio: 2, crossAxisCount: 4), 49 | itemCount: bottomSheetNotifier(renderUI: false).tags.length, 50 | itemBuilder: (BuildContext context, int index) { 51 | BottomSheetNotifier bottomSheetNotifier({required bool renderUI}) => 52 | Provider.of(context, listen: renderUI); 53 | return ActionChip( 54 | backgroundColor: bottomSheetNotifier(renderUI: true) 55 | .queriedData 56 | .contains( 57 | bottomSheetNotifier(renderUI: false).tags[index]) 58 | ? Colors.blue 59 | : bgColor, 60 | label: Text(bottomSheetNotifier(renderUI: false).tags[index], 61 | style: regulerText), 62 | onPressed: () { 63 | bottomSheetNotifier(renderUI: false).addToList( 64 | kValue: bottomSheetNotifier(renderUI: false).tags[index]); 65 | }); 66 | }, 67 | ); 68 | } 69 | 70 | _showBottomSheet() { 71 | return showModalBottomSheet( 72 | isScrollControlled: true, 73 | backgroundColor: bgColorFaint, 74 | shape: 75 | RoundedRectangleBorder(borderRadius: BorderRadius.circular(25.0)), 76 | context: context, 77 | builder: (context) { 78 | return SizedBox( 79 | height: 800, 80 | child: Column( 81 | mainAxisAlignment: MainAxisAlignment.center, 82 | children: [ 83 | Text("Select tags", style: boldText(fSize: 50)), 84 | Text("You can select more than 5 tags for the app", 85 | style: regulerText), 86 | const SizedBox(height: 50), 87 | _showTags(), 88 | const SizedBox(height: 10), 89 | ActionChip( 90 | backgroundColor: Colors.blue, 91 | onPressed: () { 92 | Navigator.pop(context); 93 | }, 94 | label: Text("Dismiss", style: regulerText)), 95 | const SizedBox(height: 80), 96 | Text("Follow @abhishvek for more! 🚀", 97 | style: boldText(fSize: 16)), 98 | ], 99 | ), 100 | ); 101 | }); 102 | } 103 | 104 | return Scaffold( 105 | appBar: AppBar( 106 | backgroundColor: bgColorFaint, 107 | title: Text("Flutter bottom sheet 🔥", style: boldText(fSize: 20))), 108 | backgroundColor: bgColor, 109 | body: Center( 110 | child: Column( 111 | mainAxisAlignment: MainAxisAlignment.center, 112 | children: [ 113 | if (bottomSheetNotifier(renderUI: true).queriedData.isNotEmpty) 114 | Text("Selected Tags", style: boldText(fSize: 30)), 115 | const SizedBox(height: 10), 116 | if (bottomSheetNotifier(renderUI: true).queriedData.isNotEmpty) 117 | GridView.builder( 118 | gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( 119 | childAspectRatio: 2, crossAxisCount: 4), 120 | shrinkWrap: true, 121 | itemCount: data.length, 122 | itemBuilder: (BuildContext context, int index) { 123 | return Chip( 124 | backgroundColor: bgColorFaint, label: Text(data[index])); 125 | }, 126 | ), 127 | ActionChip( 128 | backgroundColor: Colors.blue, 129 | onPressed: () { 130 | _showBottomSheet(); 131 | }, 132 | label: Text("Select tags", style: regulerText)), 133 | ], 134 | ), 135 | ), 136 | ); 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /18.apple_dynamic_island.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 4 | 5 | class FlutterDynamicIslandMenu extends StatefulWidget { 6 | const FlutterDynamicIslandMenu({Key? key}) : super(key: key); 7 | 8 | @override 9 | State createState() => 10 | _FlutterDynamicIslandMenuState(); 11 | } 12 | 13 | class _FlutterDynamicIslandMenuState extends State 14 | with TickerProviderStateMixin { 15 | late final AnimationController callRecController = 16 | AnimationController(duration: const Duration(seconds: 1), vsync: this); 17 | late final Animation _animation = 18 | CurvedAnimation(parent: callRecController, curve: Curves.fastOutSlowIn); 19 | 20 | late final AnimationController userController = 21 | AnimationController(duration: const Duration(seconds: 1), vsync: this); 22 | late final Animation _userAnimation = 23 | CurvedAnimation(parent: userController, curve: Curves.fastOutSlowIn); 24 | 25 | bool isRecAnimating = false; 26 | bool isUserAnimating = false; 27 | bool showBaseTile = true; 28 | 29 | void playRecording() { 30 | setState(() { 31 | showBaseTile = !showBaseTile; 32 | isRecAnimating = !isRecAnimating; 33 | if (isRecAnimating) { 34 | callRecController.reset(); 35 | } else { 36 | callRecController.forward(); 37 | } 38 | }); 39 | } 40 | 41 | void playUserTile() { 42 | setState(() { 43 | showBaseTile = !showBaseTile; 44 | isUserAnimating = !isUserAnimating; 45 | if (isUserAnimating) { 46 | userController.forward(); 47 | } else { 48 | userController.reset(); 49 | } 50 | }); 51 | } 52 | 53 | void clearCall() { 54 | setState(() { 55 | showBaseTile = true; 56 | isRecAnimating = false; 57 | isUserAnimating = false; 58 | callRecController.reset(); 59 | userController.reset(); 60 | }); 61 | } 62 | 63 | @override 64 | void dispose() { 65 | callRecController.dispose(); 66 | super.dispose(); 67 | } 68 | 69 | @override 70 | Widget build(BuildContext context) { 71 | _callRecordingChip() { 72 | return SizeTransition( 73 | sizeFactor: _animation, 74 | axis: Axis.horizontal, 75 | child: GestureDetector( 76 | onTap: () { 77 | // playRecording(); 78 | playUserTile(); 79 | }, 80 | child: Container( 81 | width: 200, 82 | height: 40, 83 | decoration: BoxDecoration( 84 | borderRadius: BorderRadius.circular(50), color: bgColorFaint), 85 | child: Row( 86 | children: [ 87 | const SizedBox(width: 10), 88 | const Icon(Icons.call_end, color: Colors.green), 89 | const SizedBox(width: 10), 90 | Text("1:23", style: regulerText), 91 | const Spacer(), 92 | Image.asset("assets/voice.png"), 93 | const SizedBox(width: 10), 94 | ], 95 | ), 96 | ), 97 | )); 98 | } 99 | 100 | userChip() { 101 | return SizeTransition( 102 | sizeFactor: _userAnimation, 103 | axis: Axis.vertical, 104 | axisAlignment: -1, 105 | child: GestureDetector( 106 | onTap: () { 107 | clearCall(); 108 | }, 109 | child: Container( 110 | width: 400, 111 | height: 80, 112 | decoration: BoxDecoration( 113 | borderRadius: BorderRadius.circular(50), color: bgColorFaint), 114 | child: Padding( 115 | padding: const EdgeInsets.all(8.0), 116 | child: Row( 117 | children: [ 118 | const SizedBox(width: 10), 119 | const CircleAvatar( 120 | child: Icon(Icons.person, color: Colors.green)), 121 | const SizedBox(width: 10), 122 | Column( 123 | mainAxisAlignment: MainAxisAlignment.center, 124 | crossAxisAlignment: CrossAxisAlignment.start, 125 | children: [ 126 | Text("Mobile", style: regulerText), 127 | Text("Abhishvek", style: boldText(fSize: 20)), 128 | ], 129 | ), 130 | const Spacer(), 131 | GestureDetector( 132 | onTap: () {}, 133 | child: const CircleAvatar( 134 | backgroundColor: Colors.redAccent, 135 | child: Icon(Icons.call, color: Colors.white)), 136 | ), 137 | const SizedBox(width: 10), 138 | const CircleAvatar( 139 | backgroundColor: Colors.green, 140 | child: Icon(Icons.call, color: Colors.white)), 141 | const SizedBox(width: 10), 142 | ], 143 | ), 144 | ), 145 | ), 146 | )); 147 | } 148 | 149 | _baseChip() { 150 | return AnimatedOpacity( 151 | duration: const Duration(seconds: 1), 152 | opacity: 1, // showBaseTile ? 1 : 0, 153 | child: GestureDetector( 154 | onTap: () { 155 | playRecording(); 156 | }, 157 | child: Container( 158 | width: 150, 159 | height: 25, 160 | decoration: BoxDecoration( 161 | borderRadius: BorderRadius.circular(50), color: bgColorFaint), 162 | ), 163 | ), 164 | ); 165 | } 166 | 167 | _mainStack() { 168 | return Stack( 169 | alignment: Alignment.center, 170 | children: [ 171 | _baseChip(), 172 | _callRecordingChip(), 173 | userChip(), 174 | ], 175 | ); 176 | } 177 | 178 | return Scaffold( 179 | backgroundColor: bgColor.withOpacity(0.8), 180 | body: Center( 181 | child: Column( 182 | children: [ 183 | const SizedBox(height: 40), 184 | _mainStack(), 185 | const SizedBox(height: 200), 186 | Text("🚀 Flutter\n Apple Dynamic Island", 187 | textAlign: TextAlign.center, style: boldText(fSize: 30)), 188 | const SizedBox(height: 10), 189 | Text("@abhishvek", 190 | textAlign: TextAlign.center, style: boldText(fSize: 10)) 191 | ], 192 | ), 193 | ), 194 | ); 195 | } 196 | } 197 | -------------------------------------------------------------------------------- /19. flutter_radio_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class ButtonNotifier extends ChangeNotifier { 7 | String? radioValue; 8 | void setRadioValue({required String kValue}) { 9 | radioValue = kValue; 10 | notifyListeners(); 11 | } 12 | } 13 | 14 | class FlutterClassicButtons extends StatelessWidget { 15 | const FlutterClassicButtons({Key? key}) : super(key: key); 16 | 17 | @override 18 | Widget build(BuildContext context) { 19 | ButtonNotifier buttonNotifier({required bool renderUI}) => 20 | Provider.of(context, listen: renderUI); 21 | 22 | List values = [ 23 | "India 🇮🇳", 24 | "Germany 🇩🇪", 25 | "China 🇨🇳", 26 | "England 🏴󠁧󠁢󠁥󠁮󠁧󠁿", 27 | "Poland 󠁧󠁢󠁥󠁮󠁧🇵🇱", 28 | "Japan 🇯🇵", 29 | "Romania 🇷🇴", 30 | "Argentina 🇦🇷", 31 | ]; 32 | 33 | radioButtons() { 34 | return ListView.builder( 35 | shrinkWrap: true, 36 | itemCount: values.length, 37 | itemBuilder: (BuildContext context, int index) { 38 | return RadioListTile( 39 | title: Text(values[index], style: regulerText), 40 | value: values[index], 41 | groupValue: buttonNotifier(renderUI: true).radioValue, 42 | onChanged: (value) { 43 | buttonNotifier(renderUI: false) 44 | .setRadioValue(kValue: values[index]); 45 | }); 46 | }, 47 | ); 48 | } 49 | 50 | return Scaffold( 51 | backgroundColor: bgColor, 52 | appBar: AppBar( 53 | backgroundColor: bgColorFaint, 54 | title: Text("Flutter Radio Buttons ⭕️", style: boldText())), 55 | body: Column( 56 | children: [ 57 | const SizedBox(height: 20), 58 | Container( 59 | decoration: BoxDecoration( 60 | border: Border.all(color: Colors.white), 61 | borderRadius: BorderRadius.circular(25)), 62 | child: Padding( 63 | padding: const EdgeInsets.all(20.0), 64 | child: Text(buttonNotifier(renderUI: true).radioValue ?? "", 65 | style: boldText()))), 66 | const SizedBox(height: 20), 67 | radioButtons(), 68 | ], 69 | ), 70 | ); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /21. floating_action_sheet.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 4 | 5 | class FlutterFloatingSheetWidget extends StatelessWidget { 6 | const FlutterFloatingSheetWidget({Key? key}) : super(key: key); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | kDivider() => Padding( 11 | padding: const EdgeInsets.symmetric(vertical: 5), 12 | child: Divider(thickness: 0.5, color: Colors.white.withOpacity(0.5)), 13 | ); 14 | 15 | kButton({required IconData iconData, required String title}) => Row( 16 | children: [ 17 | const SizedBox(width: 20), 18 | Icon(iconData, size: 16), 19 | const SizedBox(width: 10), 20 | Text(title, style: boldText(fSize: 16)) 21 | ], 22 | ); 23 | 24 | showSheet() { 25 | return showModalBottomSheet( 26 | backgroundColor: Colors.transparent, 27 | shape: 28 | RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)), 29 | barrierColor: Colors.transparent, 30 | context: context, 31 | builder: (context) { 32 | return Padding( 33 | padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20), 34 | child: Container( 35 | height: 300, 36 | decoration: BoxDecoration( 37 | color: bgColor, borderRadius: BorderRadius.circular(26)), 38 | child: Padding( 39 | padding: const EdgeInsets.all(8.0), 40 | child: Column( 41 | mainAxisAlignment: MainAxisAlignment.start, 42 | crossAxisAlignment: CrossAxisAlignment.start, 43 | children: [ 44 | const SizedBox(height: 10), 45 | Row( 46 | children: [ 47 | const SizedBox(width: 20), 48 | const CircleAvatar( 49 | radius: 16, 50 | backgroundImage: 51 | AssetImage("assets/naruto.jpeg")), 52 | const SizedBox(width: 10), 53 | Column( 54 | mainAxisAlignment: MainAxisAlignment.start, 55 | crossAxisAlignment: CrossAxisAlignment.start, 56 | children: [ 57 | Text("Naruto : Shippuden", style: boldText()), 58 | Text("Anime about naruto and his adventures", 59 | style: regulerText) 60 | ], 61 | ), 62 | const Spacer(), 63 | IconButton( 64 | onPressed: () { 65 | Navigator.pop(context); 66 | }, 67 | icon: const Icon(Icons.arrow_forward_ios, 68 | size: 12, color: Colors.white)), 69 | const SizedBox(width: 5) 70 | ], 71 | ), 72 | kDivider(), 73 | kButton( 74 | iconData: Icons.remove_red_eye, title: "Watch now"), 75 | kDivider(), 76 | kButton(iconData: Icons.thumb_up, title: "Dislike"), 77 | kDivider(), 78 | kButton(iconData: Icons.thumb_down, title: "Dislike"), 79 | kDivider(), 80 | kButton(iconData: Icons.share, title: "Share"), 81 | ], 82 | ), 83 | ), 84 | ), 85 | ); 86 | }); 87 | } 88 | 89 | return Scaffold( 90 | appBar: AppBar( 91 | backgroundColor: bgColor, 92 | title: Text("Flutter Floating Bottom Sheet", style: boldText())), 93 | backgroundColor: bgColorFaint, 94 | body: Center( 95 | child: ActionChip( 96 | label: Text("Show sheet", style: regulerText), 97 | onPressed: () { 98 | showSheet(); 99 | }))); 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /22. custom_tabbar.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/0.abhishvek_header.dart'; 3 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 4 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 5 | import 'package:provider/provider.dart'; 6 | 7 | class TabNotifier extends ChangeNotifier { 8 | int tabIndex = 0; 9 | 10 | void setTabIndex({required int kValue}) { 11 | tabIndex = kValue; 12 | notifyListeners(); 13 | } 14 | } 15 | 16 | class CustomTabBarWidget extends StatelessWidget { 17 | const CustomTabBarWidget({Key? key}) : super(key: key); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | TabNotifier tabNotifier({required bool renderUI}) => 22 | Provider.of(context, listen: renderUI); 23 | 24 | Widget tabHolder({required int index, required String title}) { 25 | return ActionChip( 26 | backgroundColor: tabNotifier(renderUI: true).tabIndex == index 27 | ? Colors.blue 28 | : bgColorFaint, 29 | onPressed: () { 30 | tabNotifier(renderUI: false).setTabIndex(kValue: index); 31 | }, 32 | label: Text(title, style: boldText()), 33 | ); 34 | } 35 | 36 | int kIndex = tabNotifier(renderUI: true).tabIndex; 37 | 38 | Widget mainWidget() { 39 | subWidget({required String title}) { 40 | return Container( 41 | height: 650, 42 | width: 400, 43 | decoration: BoxDecoration( 44 | border: Border.all(width: 0.2, color: Colors.white), 45 | borderRadius: BorderRadius.circular(25)), 46 | child: Center(child: Text(title, style: boldText(fSize: 26))), 47 | ); 48 | } 49 | 50 | if (kIndex == 0) { 51 | return subWidget(title: "Content for home"); 52 | } 53 | if (kIndex == 1) { 54 | return subWidget(title: "Content for profile"); 55 | } 56 | return subWidget(title: "Content for settings"); 57 | } 58 | 59 | return Scaffold( 60 | appBar: AppBar( 61 | backgroundColor: bgColorFaint, 62 | title: Text("Flutter Custom TabBar", style: boldText(fSize: 16))), 63 | backgroundColor: bgColor, 64 | body: Column( 65 | children: [ 66 | const SizedBox(height: 10), 67 | Row( 68 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 69 | children: [ 70 | tabHolder(index: 0, title: "Home"), 71 | tabHolder(index: 1, title: "Profile"), 72 | tabHolder(index: 2, title: "Settings"), 73 | ], 74 | ), 75 | const Divider(color: Colors.white, thickness: 0.1), 76 | const SizedBox(height: 10), 77 | mainWidget(), 78 | const SizedBox(height: 20), 79 | const AbhishvekHeaderWidget(), 80 | ], 81 | )); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /23. flutter_flexi_gridview.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/0.abhishvek_header.dart'; 3 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 4 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 5 | import 'package:provider/provider.dart'; 6 | 7 | class FlexiGridNotifier extends ChangeNotifier { 8 | double gridCount = 1; 9 | void setGridCount({required double kCount}) { 10 | gridCount = kCount; 11 | notifyListeners(); 12 | } 13 | } 14 | 15 | class FlutterFlexibleGridView extends StatelessWidget { 16 | const FlutterFlexibleGridView({Key? key}) : super(key: key); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | FlexiGridNotifier flexiGridNotifier({required bool renderUI}) => 21 | Provider.of(context, listen: renderUI); 22 | 23 | double gridCount = flexiGridNotifier(renderUI: true).gridCount; 24 | 25 | return Scaffold( 26 | appBar: AppBar( 27 | backgroundColor: bgColorFaint, 28 | title: Text("Flutter Flexi GridView", style: boldText())), 29 | backgroundColor: bgColor, 30 | body: SingleChildScrollView( 31 | child: Column( 32 | children: [ 33 | const SizedBox(height: 20), 34 | Slider( 35 | activeColor: Colors.green, 36 | inactiveColor: Colors.greenAccent, 37 | min: 1, 38 | max: 5, 39 | value: gridCount, 40 | onChanged: ((value) { 41 | flexiGridNotifier(renderUI: false) 42 | .setGridCount(kCount: value); 43 | })), 44 | GridView.builder( 45 | shrinkWrap: true, 46 | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 47 | crossAxisCount: gridCount.toInt()), 48 | itemCount: 8, 49 | itemBuilder: (BuildContext context, int index) { 50 | return Padding( 51 | padding: const EdgeInsets.all(8.0), 52 | child: Container( 53 | decoration: BoxDecoration( 54 | color: bgColorFaint, 55 | image: const DecorationImage( 56 | image: AssetImage("assets/sasuke.jpeg")), 57 | borderRadius: BorderRadius.circular(25))), 58 | ); 59 | }, 60 | ), 61 | const AbhishvekHeaderWidget() 62 | ], 63 | ), 64 | ), 65 | ); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /24. flutter_expandable_drawer.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class DrawerNotifier extends ChangeNotifier { 7 | double drawerWidth = 300; 8 | bool isHalfExpanded = false; 9 | 10 | void setExpansion({required bool isHalf}) { 11 | isHalfExpanded = !isHalfExpanded; 12 | if (isHalf) { 13 | drawerWidth = 250; 14 | notifyListeners(); 15 | } else { 16 | drawerWidth = 100; 17 | notifyListeners(); 18 | } 19 | } 20 | } 21 | 22 | class FlutterExpandableDrawer extends StatelessWidget { 23 | const FlutterExpandableDrawer({super.key}); 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | DrawerNotifier drawerNotifier({required bool renderUI}) => 28 | Provider.of(context, listen: renderUI); 29 | 30 | bool isHalfExpanded = drawerNotifier(renderUI: true).isHalfExpanded; 31 | double drawerWidth = drawerNotifier(renderUI: true).drawerWidth; 32 | 33 | Widget buildExpansionButton() { 34 | if (isHalfExpanded) { 35 | return CircleAvatar( 36 | backgroundColor: bgColor, 37 | child: IconButton( 38 | onPressed: () { 39 | drawerNotifier(renderUI: false).setExpansion(isHalf: false); 40 | }, 41 | icon: const Icon(Icons.close, color: Colors.white)), 42 | ); 43 | } else { 44 | return CircleAvatar( 45 | backgroundColor: bgColor, 46 | child: IconButton( 47 | onPressed: () { 48 | drawerNotifier(renderUI: false).setExpansion(isHalf: true); 49 | }, 50 | icon: const Icon(Icons.open_in_browser, color: Colors.white)), 51 | ); 52 | } 53 | } 54 | 55 | Widget shell( 56 | {required double width, 57 | required IconData iconData, 58 | required String title, 59 | required bool isHalfExpanded}) { 60 | return Padding( 61 | padding: const EdgeInsets.only(bottom: 12), 62 | child: Container( 63 | width: width, 64 | height: 50, 65 | decoration: BoxDecoration( 66 | color: bgColor, borderRadius: BorderRadius.circular(25)), 67 | child: Row( 68 | mainAxisAlignment: MainAxisAlignment.center, 69 | children: [ 70 | Icon(iconData, color: Colors.white), 71 | if (isHalfExpanded) const SizedBox(width: 20), 72 | if (isHalfExpanded) Text(title, style: regulerText), 73 | ], 74 | ), 75 | ), 76 | ); 77 | } 78 | 79 | Widget buildSecondaryButton( 80 | {required IconData iconData, required String title}) { 81 | if (isHalfExpanded) { 82 | return shell( 83 | isHalfExpanded: isHalfExpanded, 84 | width: 200, 85 | iconData: iconData, 86 | title: title); 87 | } else { 88 | return shell( 89 | isHalfExpanded: isHalfExpanded, 90 | width: 50, 91 | iconData: iconData, 92 | title: title); 93 | } 94 | } 95 | 96 | return Scaffold( 97 | appBar: AppBar( 98 | title: Text("Flutter Expandable Drawer", style: boldText()), 99 | backgroundColor: bgColorFaint), 100 | backgroundColor: bgColor, 101 | drawer: Drawer( 102 | width: drawerWidth, 103 | backgroundColor: Colors.transparent, 104 | child: Container( 105 | decoration: BoxDecoration( 106 | color: bgColorFaint, borderRadius: BorderRadius.circular(50)), 107 | child: Column( 108 | children: [ 109 | const SizedBox(height: 100), 110 | buildExpansionButton(), 111 | const SizedBox(height: 20), 112 | buildSecondaryButton(iconData: Icons.home, title: "Home"), 113 | buildSecondaryButton(iconData: Icons.info, title: "Info"), 114 | buildSecondaryButton(iconData: Icons.data_array, title: "Data"), 115 | buildSecondaryButton( 116 | iconData: Icons.meeting_room, title: "Meeting"), 117 | buildSecondaryButton( 118 | iconData: Icons.severe_cold, title: "Weather"), 119 | buildSecondaryButton( 120 | iconData: Icons.perm_device_info, title: "Device"), 121 | buildSecondaryButton( 122 | iconData: Icons.fullscreen, title: "Webview"), 123 | buildSecondaryButton( 124 | iconData: Icons.settings, title: "Settings"), 125 | buildSecondaryButton(iconData: Icons.logout, title: "Logout"), 126 | ], 127 | )), 128 | ), 129 | body: Container(), 130 | ); 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /25.flutter_elegant_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class SpotifyButtonNotifier extends ChangeNotifier { 7 | int? buttonIndex; 8 | 9 | void setButtonIndex({required int newIndex}) { 10 | buttonIndex = newIndex; 11 | notifyListeners(); 12 | } 13 | 14 | void setNullIndex() { 15 | buttonIndex = null; 16 | notifyListeners(); 17 | } 18 | } 19 | 20 | class FlutterSpotifyButtonWidget extends StatelessWidget { 21 | const FlutterSpotifyButtonWidget({super.key}); 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | SpotifyButtonNotifier spotifyButtonNotifie({required bool renderUI}) => 26 | Provider.of(context, listen: renderUI); 27 | 28 | bool isIndexSelected = 29 | spotifyButtonNotifie(renderUI: true).buttonIndex != null; 30 | 31 | int? selectedIndex = spotifyButtonNotifie(renderUI: true).buttonIndex; 32 | 33 | Widget directChip({required int kIndex, required String title}) { 34 | return ActionChip( 35 | onPressed: () { 36 | spotifyButtonNotifie(renderUI: false) 37 | .setButtonIndex(newIndex: kIndex); 38 | }, 39 | backgroundColor: selectedIndex == kIndex ? Colors.green : bgColorFaint, 40 | label: Row( 41 | children: [Text(title, style: regulerText)], 42 | ), 43 | ); 44 | } 45 | 46 | return Scaffold( 47 | backgroundColor: bgColor, 48 | appBar: AppBar( 49 | backgroundColor: bgColorFaint, 50 | title: Text("Flutter Elegant Action Chips", style: boldText())), 51 | body: Column( 52 | children: [ 53 | const SizedBox(height: 20), 54 | Row( 55 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 56 | children: [ 57 | if (isIndexSelected) 58 | GestureDetector( 59 | onTap: () { 60 | spotifyButtonNotifie(renderUI: false).setNullIndex(); 61 | }, 62 | child: const CircleAvatar( 63 | backgroundColor: bgColorFaint, 64 | child: Icon(Icons.backspace_outlined, color: Colors.white), 65 | ), 66 | ), 67 | directChip(title: "Music", kIndex: 0), 68 | directChip(title: "Podcasts", kIndex: 1), 69 | directChip(title: "Videos", kIndex: 2), 70 | directChip(title: "Others", kIndex: 3), 71 | ], 72 | ), 73 | const SizedBox(height: 100), 74 | ], 75 | ), 76 | ); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /26. flutter_pageview_changer.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class PageChangerNotifier extends ChangeNotifier { 7 | int intialIndex = 0; 8 | 9 | final PageController pageController = PageController(); 10 | 11 | changeIndex({required bool forward}) { 12 | debugPrint(forward.toString()); 13 | if (forward) { 14 | intialIndex++; 15 | pageController.jumpToPage(intialIndex); 16 | notifyListeners(); 17 | } else { 18 | if (intialIndex > 0) { 19 | intialIndex--; 20 | pageController.jumpToPage(intialIndex); 21 | notifyListeners(); 22 | } 23 | } 24 | } 25 | } 26 | 27 | class FlutterPageChangerWidget extends StatelessWidget { 28 | const FlutterPageChangerWidget({super.key}); 29 | 30 | @override 31 | Widget build(BuildContext context) { 32 | PageChangerNotifier pageChangerNotifier({required bool renderUI}) => 33 | Provider.of(context, listen: renderUI); 34 | 35 | PageController pageController = 36 | pageChangerNotifier(renderUI: true).pageController; 37 | 38 | Widget changerButton( 39 | {required IconData iconData, required Function onTap}) { 40 | return GestureDetector( 41 | onTap: () { 42 | onTap(); 43 | }, 44 | child: CircleAvatar( 45 | backgroundColor: bgColor, 46 | child: Icon(iconData, color: Colors.white), 47 | ), 48 | ); 49 | } 50 | 51 | int currentPageIndex = pageChangerNotifier(renderUI: true).intialIndex; 52 | 53 | return Scaffold( 54 | backgroundColor: bgColorFaint, 55 | appBar: AppBar( 56 | backgroundColor: bgColor, 57 | title: Text("Flutter page changer", style: boldText())), 58 | body: Center( 59 | child: Column( 60 | mainAxisAlignment: MainAxisAlignment.center, 61 | crossAxisAlignment: CrossAxisAlignment.center, 62 | children: [ 63 | Text("Page index : $currentPageIndex", style: boldText(fSize: 30)), 64 | const SizedBox(height: 20), 65 | Row( 66 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 67 | children: [ 68 | changerButton( 69 | iconData: Icons.arrow_back_ios, 70 | onTap: () { 71 | pageChangerNotifier(renderUI: false) 72 | .changeIndex(forward: false); 73 | }), 74 | SizedBox( 75 | height: 600, 76 | width: 300, 77 | child: PageView.builder( 78 | controller: pageController, 79 | scrollDirection: Axis.horizontal, 80 | itemCount: 4, 81 | itemBuilder: (BuildContext context, int index) { 82 | return Padding( 83 | padding: const EdgeInsets.all(8.0), 84 | child: Container( 85 | height: 600, 86 | width: 300, 87 | decoration: BoxDecoration( 88 | color: currentPageIndex % 2 == 0 89 | ? Colors.blue 90 | : Colors.red, 91 | borderRadius: BorderRadius.circular(25)), 92 | child: Center( 93 | child: Text(index.toString(), style: boldText())), 94 | ), 95 | ); 96 | }, 97 | ), 98 | ), 99 | changerButton( 100 | iconData: Icons.arrow_forward_ios, 101 | onTap: () { 102 | debugPrint("agaga"); 103 | pageChangerNotifier(renderUI: false) 104 | .changeIndex(forward: true); 105 | }), 106 | ], 107 | ), 108 | ], 109 | ), 110 | ), 111 | ); 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /27. flutter_animated_bottomsheet.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class BottomSheetNotifier extends ChangeNotifier { 7 | bool _isExpanded = false; 8 | bool get isExpanded => _isExpanded; 9 | 10 | void toggleExpansion() { 11 | _isExpanded = !_isExpanded; 12 | notifyListeners(); 13 | } 14 | } 15 | 16 | class FlutterAnimatedBottomSheet extends StatelessWidget { 17 | const FlutterAnimatedBottomSheet({super.key}); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | myBottomSheet() { 22 | return showModalBottomSheet( 23 | isScrollControlled: true, 24 | isDismissible: true, 25 | shape: 26 | RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)), 27 | context: context, 28 | builder: (context) { 29 | BottomSheetNotifier bottomSheetNotifier({required bool renderUI}) => 30 | Provider.of(context, listen: renderUI); 31 | bool isExpanded = bottomSheetNotifier(renderUI: true).isExpanded; 32 | 33 | return AnimatedContainer( 34 | color: bgColorFaint, 35 | height: isExpanded ? 700 : 300, 36 | width: 500, 37 | duration: const Duration(seconds: 1), 38 | child: Center( 39 | child: Column( 40 | mainAxisAlignment: MainAxisAlignment.center, 41 | children: [ 42 | GestureDetector( 43 | onTap: () { 44 | bottomSheetNotifier(renderUI: false).toggleExpansion(); 45 | }, 46 | child: CircleAvatar( 47 | backgroundColor: bgColor, 48 | child: Icon( 49 | bottomSheetNotifier(renderUI: true).isExpanded 50 | ? Icons.arrow_downward 51 | : Icons.arrow_upward, 52 | color: Colors.white), 53 | ), 54 | ), 55 | const SizedBox(height: 20), 56 | Text("Some content here", style: boldText()), 57 | Text("Some more additional content here", 58 | style: regulerText), 59 | ], 60 | ))); 61 | }); 62 | } 63 | 64 | return Scaffold( 65 | backgroundColor: bgColor, 66 | appBar: AppBar( 67 | backgroundColor: bgColorFaint, 68 | title: Text("Flutter Expandable Sheet 🔥", style: boldText())), 69 | body: Center( 70 | child: ElevatedButton( 71 | child: Text("Show sheet", style: regulerText), 72 | onPressed: () { 73 | myBottomSheet(); 74 | }, 75 | ), 76 | ), 77 | ); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /28.flutter_navigation_animation.dart: -------------------------------------------------------------------------------- 1 | import 'package:animations/animations.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 4 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 5 | 6 | class FlutteHeroAnimationWidget extends StatelessWidget { 7 | const FlutteHeroAnimationWidget({super.key}); 8 | 9 | @override 10 | Widget build(BuildContext context) { 11 | List fakeData = [ 12 | "🍔 Burger", 13 | "🍟 Fries", 14 | "🍗 Chicken", 15 | "🍅 Ketchup", 16 | "🍗 Meat", 17 | "💧 Water", 18 | "🍕 Pizza", 19 | "🍜 Noodles", 20 | "🍨 Ice cream", 21 | "🍊 Orange", 22 | "🌭 Sausage", 23 | "🍱 Meal" 24 | ]; 25 | 26 | return Scaffold( 27 | appBar: AppBar( 28 | backgroundColor: bgColorFaint, 29 | title: 30 | Text("Flutter Animated Navigation", style: boldText(fSize: 20))), 31 | backgroundColor: bgColor, 32 | body: GridView.builder( 33 | shrinkWrap: true, 34 | gridDelegate: 35 | const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2), 36 | itemCount: fakeData.length, 37 | itemBuilder: (BuildContext context, int index) { 38 | return OpenContainer( 39 | openColor: bgColor, 40 | closedBuilder: (_, openContainer) { 41 | return Padding( 42 | padding: const EdgeInsets.all(8.0), 43 | child: Container( 44 | child: Center( 45 | child: 46 | Text(fakeData[index], style: boldText(fSize: 28))), 47 | decoration: BoxDecoration( 48 | color: bgColorFaint, 49 | borderRadius: BorderRadius.circular(12)), 50 | ), 51 | ); 52 | }, 53 | closedColor: bgColor, 54 | closedElevation: 5.0, 55 | openBuilder: (_, closeContainer) { 56 | return OpenedUpPage(callbackData: fakeData[index]); 57 | }); 58 | }, 59 | ), 60 | ); 61 | } 62 | } 63 | 64 | class OpenedUpPage extends StatelessWidget { 65 | final String callbackData; 66 | const OpenedUpPage({required this.callbackData, super.key}); 67 | 68 | @override 69 | Widget build(BuildContext context) { 70 | return Scaffold( 71 | floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, 72 | floatingActionButton: FloatingActionButton( 73 | backgroundColor: bgColorFaint, 74 | child: Icon( 75 | Icons.arrow_back_ios, 76 | color: Colors.white, 77 | ), 78 | onPressed: () { 79 | Navigator.pop(context); 80 | }), 81 | backgroundColor: bgColor, 82 | body: Center( 83 | child: Text(callbackData, style: boldText(fSize: 30)), 84 | ), 85 | ); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /29.flutter_dynamic_search.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 3 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class DynamicSearchNotifier extends ChangeNotifier { 7 | List fakeData = [ 8 | "🍔 Burger", 9 | "🍟 Fries", 10 | "🍗 Chicken", 11 | "🍅 Ketchup", 12 | "🍗 Meat", 13 | "💧 Water", 14 | "🍕 Pizza", 15 | "🍜 Noodles", 16 | "🍨 Ice cream", 17 | "🍊 Orange", 18 | "🌭 Sausage", 19 | "🍱 Meal" 20 | ]; 21 | 22 | List queriedData = []; 23 | 24 | String _query = ""; 25 | String get query => _query; 26 | 27 | void setQuery({required String kValue}) { 28 | _query = kValue; 29 | notifyListeners(); 30 | } 31 | 32 | void queryData() { 33 | queriedData.clear(); 34 | for (String data in fakeData) { 35 | if (data.contains(query)) { 36 | queriedData.add(data); 37 | notifyListeners(); 38 | } 39 | } 40 | } 41 | 42 | void clearSearch() { 43 | queriedData.clear(); 44 | notifyListeners(); 45 | } 46 | } 47 | 48 | class FlutterDyanmicSearchWidget extends StatelessWidget { 49 | const FlutterDyanmicSearchWidget({super.key}); 50 | 51 | @override 52 | Widget build(BuildContext context) { 53 | DynamicSearchNotifier dynamicSearchNotifier({required bool renderUI}) => 54 | Provider.of(context, listen: renderUI); 55 | 56 | return Scaffold( 57 | backgroundColor: bgColor, 58 | body: Container( 59 | child: SingleChildScrollView( 60 | child: Column( 61 | mainAxisAlignment: MainAxisAlignment.start, 62 | crossAxisAlignment: CrossAxisAlignment.start, 63 | children: [ 64 | SizedBox(height: 10), 65 | SizedBox( 66 | width: 400, 67 | child: TextField( 68 | style: regulerText, 69 | onChanged: (val) { 70 | if (val == "") { 71 | dynamicSearchNotifier(renderUI: false).clearSearch(); 72 | } else { 73 | dynamicSearchNotifier(renderUI: false) 74 | .setQuery(kValue: val); 75 | dynamicSearchNotifier(renderUI: false).queryData(); 76 | } 77 | }, 78 | decoration: InputDecoration( 79 | hintStyle: regulerText, hintText: "Enter any food item"), 80 | ), 81 | ), 82 | // if (dynamicSearchNotifier(renderUI: true).queriedData.isEmpty) 83 | // Center( 84 | // child: Padding( 85 | // padding: const EdgeInsets.only(top: 200), 86 | // child: Text("No data found", style: boldText()), 87 | // )), 88 | // if (dynamicSearchNotifier(renderUI: true).queriedData.isNotEmpty) 89 | ListView.builder( 90 | shrinkWrap: true, 91 | scrollDirection: Axis.vertical, 92 | itemCount: 93 | dynamicSearchNotifier(renderUI: true).queriedData.length, 94 | itemBuilder: (BuildContext context, int index) { 95 | String data = 96 | dynamicSearchNotifier(renderUI: true).queriedData[index]; 97 | 98 | return Padding( 99 | padding: const EdgeInsets.all(4.0), 100 | child: ListTile( 101 | tileColor: bgColorFaint, 102 | shape: RoundedRectangleBorder( 103 | borderRadius: BorderRadius.circular(25)), 104 | title: Text(data, style: regulerText), 105 | ), 106 | ); 107 | }, 108 | ), 109 | ], 110 | ), 111 | ), 112 | ), 113 | appBar: AppBar( 114 | backgroundColor: bgColorFaint, 115 | title: Text( 116 | "Flutter static search", 117 | style: boldText(), 118 | )), 119 | ); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /30.flutter_selectable_tile.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/utils/colors.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | class SelectableTileNotifier extends ChangeNotifier { 6 | List _selectedTilesId = []; 7 | List get selectedTilesId => _selectedTilesId; 8 | 9 | void selectTiles({required String tileId}) { 10 | if (_selectedTilesId.contains(tileId)) { 11 | _selectedTilesId.remove(tileId); 12 | notifyListeners(); 13 | } else { 14 | _selectedTilesId.add(tileId); 15 | notifyListeners(); 16 | } 17 | } 18 | 19 | void clearAllTiles() { 20 | selectedTilesId.clear(); 21 | notifyListeners(); 22 | } 23 | 24 | void selectAllTiles({required List ids}) { 25 | selectedTilesId.clear(); 26 | selectedTilesId.addAll(ids); 27 | notifyListeners(); 28 | } 29 | } 30 | 31 | class FlutterSelectableTilesView extends StatelessWidget { 32 | const FlutterSelectableTilesView({super.key}); 33 | 34 | @override 35 | Widget build(BuildContext context) { 36 | SelectableTileNotifier selectableTileNotifier({required bool renderUI}) => 37 | Provider.of(context, listen: renderUI); 38 | 39 | List data = [ 40 | {"title": "Cricket", "iconData": Icons.star}, 41 | {"title": "Football", "iconData": Icons.star}, 42 | {"title": "Tennis", "iconData": Icons.star}, 43 | {"title": "Swimming", "iconData": Icons.star}, 44 | {"title": "Karate", "iconData": Icons.star}, 45 | {"title": "Boxing", "iconData": Icons.star}, 46 | {"title": "Chess", "iconData": Icons.star}, 47 | {"title": "Badminton", "iconData": Icons.star}, 48 | ]; 49 | 50 | tileBlock({required IconData iconData, required String title}) { 51 | bool isSelected = selectableTileNotifier(renderUI: true) 52 | .selectedTilesId 53 | .contains(title); 54 | 55 | return GestureDetector( 56 | onTap: () { 57 | selectableTileNotifier(renderUI: false).selectTiles(tileId: title); 58 | }, 59 | child: Padding( 60 | padding: const EdgeInsets.all(8.0), 61 | child: Container( 62 | child: Column( 63 | mainAxisAlignment: MainAxisAlignment.center, 64 | crossAxisAlignment: CrossAxisAlignment.center, 65 | children: [ 66 | CircleAvatar( 67 | child: Icon(iconData, color: KConstantColors.whiteColor), 68 | backgroundColor: KConstantColors.bgColor, 69 | ), 70 | SizedBox(height: 5), 71 | Text(title, style: KConstantTextstyles.light(fontSize: 10)), 72 | ], 73 | ), 74 | decoration: BoxDecoration( 75 | color: isSelected 76 | ? KConstantColors.blueColor 77 | : KConstantColors.bgColorFaint, 78 | borderRadius: BorderRadius.circular(25)), 79 | ), 80 | ), 81 | ); 82 | } 83 | 84 | return Scaffold( 85 | appBar: AppBar( 86 | backgroundColor: KConstantColors.blueColor, 87 | title: Text("Flutter Selectable Tiles", 88 | style: KConstantTextstyles.bold(fontSize: 15))), 89 | backgroundColor: KConstantColors.bgColor, 90 | body: Container( 91 | child: Center( 92 | child: Center( 93 | child: Column( 94 | mainAxisAlignment: MainAxisAlignment.center, 95 | children: [ 96 | GridView.builder( 97 | shrinkWrap: true, 98 | itemCount: data.length, 99 | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 100 | crossAxisCount: 4), 101 | itemBuilder: (context, index) { 102 | return tileBlock( 103 | iconData: data[index]['iconData'], 104 | title: data[index]['title'], 105 | ); 106 | }), 107 | Row( 108 | mainAxisAlignment: MainAxisAlignment.center, 109 | children: [ 110 | if (selectableTileNotifier(renderUI: true) 111 | .selectedTilesId 112 | .isNotEmpty) 113 | ActionChip( 114 | backgroundColor: KConstantColors.redColor, 115 | label: Text("Clear all", 116 | style: KConstantTextstyles.light(fontSize: 12)), 117 | onPressed: () { 118 | selectableTileNotifier(renderUI: false) 119 | .clearAllTiles(); 120 | }), 121 | SizedBox(width: 20), 122 | ActionChip( 123 | backgroundColor: KConstantColors.blueColor, 124 | label: Text("Select all", 125 | style: KConstantTextstyles.light(fontSize: 12)), 126 | onPressed: () { 127 | List d = []; 128 | data.forEach((element) { 129 | d.add(element['title']); 130 | }); 131 | 132 | selectableTileNotifier(renderUI: false) 133 | .selectAllTiles(ids: d); 134 | }) 135 | ], 136 | ), 137 | Row( 138 | mainAxisAlignment: MainAxisAlignment.center, 139 | children: [ 140 | if (selectableTileNotifier(renderUI: true) 141 | .selectedTilesId 142 | .isNotEmpty) 143 | ActionChip( 144 | backgroundColor: KConstantColors.bgColorFaint, 145 | label: Text("Continue", 146 | style: KConstantTextstyles.light(fontSize: 12)), 147 | onPressed: () {}), 148 | ], 149 | ) 150 | ], 151 | ), 152 | ), 153 | ), 154 | ), 155 | ); 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /30.flutter_ui_utils.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/rendering.dart'; 3 | import 'package:ig_posts/features/1.flutter_frost_glass.view.dart'; 4 | import 'package:ig_posts/features/5.flutter_swiggy_button.dart'; 5 | import 'package:provider/provider.dart'; 6 | 7 | class OnScrollNotifier extends ChangeNotifier { 8 | bool _isViewScrolling = false; 9 | bool get isViewScrolling => _isViewScrolling; 10 | 11 | void setOnViewScrolling({required bool isScrolling}) { 12 | _isViewScrolling = isScrolling; 13 | notifyListeners(); 14 | } 15 | } 16 | 17 | class FlutterOnScrollContainerFab extends StatefulWidget { 18 | const FlutterOnScrollContainerFab({super.key}); 19 | 20 | @override 21 | State createState() => 22 | _FlutterOnScrollContainerFabState(); 23 | } 24 | 25 | class _FlutterOnScrollContainerFabState 26 | extends State { 27 | OnScrollNotifier onScrollNotifier({required bool renderUI}) => 28 | Provider.of(context, listen: renderUI); 29 | 30 | ScrollController scrollController = new ScrollController(); 31 | 32 | @override 33 | void initState() { 34 | scrollController.addListener(() { 35 | WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 36 | if (scrollController.position.userScrollDirection == 37 | ScrollDirection.forward) { 38 | onScrollNotifier(renderUI: false) 39 | .setOnViewScrolling(isScrolling: false); 40 | } else { 41 | onScrollNotifier(renderUI: false) 42 | .setOnViewScrolling(isScrolling: true); 43 | } 44 | }); 45 | }); 46 | super.initState(); 47 | } 48 | 49 | @override 50 | Widget build(BuildContext context) { 51 | bool isScrolling = onScrollNotifier(renderUI: true).isViewScrolling; 52 | 53 | Widget customFab() { 54 | if (!isScrolling) { 55 | return AnimatedContainer( 56 | curve: Curves.linearToEaseOut, 57 | duration: Duration(milliseconds: 100), 58 | height: 50, 59 | width: 300, 60 | child: Center(child: Text("Add your widget here", style: boldText())), 61 | decoration: BoxDecoration( 62 | color: bgColorFaint, borderRadius: BorderRadius.circular(25)), 63 | ); 64 | } else { 65 | return AnimatedContainer( 66 | duration: Duration(milliseconds: 500), 67 | height: 50, 68 | width: 150, 69 | child: Row( 70 | mainAxisAlignment: MainAxisAlignment.center, 71 | crossAxisAlignment: CrossAxisAlignment.center, 72 | children: [ 73 | Icon(Icons.comment, color: Colors.white), 74 | SizedBox(width: 10), 75 | Text("12", style: regulerText), 76 | SizedBox(width: 30), 77 | Icon(Icons.thumb_up, color: Colors.white), 78 | SizedBox(width: 10), 79 | Text("07", style: regulerText), 80 | ], 81 | ), 82 | decoration: BoxDecoration( 83 | color: bgColorFaint, borderRadius: BorderRadius.circular(25)), 84 | ); 85 | } 86 | } 87 | 88 | return Scaffold( 89 | floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, 90 | floatingActionButton: customFab(), 91 | backgroundColor: bgColor, 92 | appBar: AppBar( 93 | title: Text("Flutter FAB animation", style: boldText()), 94 | backgroundColor: bgColorFaint), 95 | body: ListView.builder( 96 | controller: scrollController, 97 | shrinkWrap: true, 98 | itemCount: 50, 99 | itemBuilder: (BuildContext context, int index) { 100 | return ListTile( 101 | leading: CircleAvatar(backgroundColor: Colors.orangeAccent), 102 | subtitle: Text("Some demo data", style: regulerText), 103 | title: Text("Item no : $index", style: boldText())); 104 | }, 105 | ), 106 | ); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /30.modern_dropdown_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/utils/colors.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | class ModernDropDownNotifier extends ChangeNotifier { 6 | bool _isButtonOpened = false; 7 | bool get isButtonOpened => _isButtonOpened; 8 | 9 | void toggleButtonState() { 10 | _isButtonOpened = !_isButtonOpened; 11 | notifyListeners(); 12 | } 13 | } 14 | 15 | class ModernDropdownButtonView extends StatelessWidget { 16 | const ModernDropdownButtonView({super.key}); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | ModernDropDownNotifier modernDropDownNotifier({required bool renderUI}) => 21 | Provider.of(context, listen: renderUI); 22 | 23 | bool isButtonOpened = modernDropDownNotifier(renderUI: true).isButtonOpened; 24 | 25 | Widget headerComponent() { 26 | return GestureDetector( 27 | onTap: () { 28 | modernDropDownNotifier(renderUI: false).toggleButtonState(); 29 | }, 30 | child: Container( 31 | decoration: BoxDecoration( 32 | color: KConstantColors.blueColor, 33 | borderRadius: BorderRadius.circular(15)), 34 | child: Padding( 35 | padding: const EdgeInsets.all(8.0), 36 | child: Row( 37 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 38 | children: [ 39 | Text("Components", 40 | style: KConstantTextstyles.bold(fontSize: 16)), 41 | Column( 42 | children: [ 43 | Icon( 44 | !isButtonOpened 45 | ? Icons.arrow_downward 46 | : Icons.arrow_upward, 47 | color: KConstantColors.whiteColor, 48 | size: 10), 49 | Icon( 50 | isButtonOpened 51 | ? Icons.arrow_downward 52 | : Icons.arrow_upward, 53 | color: KConstantColors.whiteColor, 54 | size: 10) 55 | ], 56 | ) 57 | ], 58 | ), 59 | )), 60 | ); 61 | } 62 | 63 | Widget miniComponent({required IconData iconData, required String title}) { 64 | return ClipRRect( 65 | child: Padding( 66 | padding: const EdgeInsets.only(bottom: 8), 67 | child: Container( 68 | child: Row( 69 | mainAxisAlignment: MainAxisAlignment.start, 70 | children: [ 71 | SizedBox(width: 27), 72 | Text(title, style: KConstantTextstyles.bold(fontSize: 16)), 73 | const Spacer(), 74 | Icon(iconData, color: KConstantColors.blueColor, size: 17), 75 | SizedBox(width: 27), 76 | ], 77 | ), 78 | ), 79 | ), 80 | ); 81 | } 82 | 83 | return Scaffold( 84 | backgroundColor: KConstantColors.bgColor, 85 | appBar: AppBar( 86 | title: Text("Modern dropdown button", 87 | style: KConstantTextstyles.light(fontSize: 16)), 88 | ), 89 | body: Center( 90 | child: AnimatedContainer( 91 | duration: Duration(seconds: 1), 92 | height: isButtonOpened ? 170 : 60, 93 | width: 200, 94 | child: SingleChildScrollView( 95 | child: Column( 96 | children: [ 97 | SizedBox(height: 10), 98 | headerComponent(), 99 | SizedBox(height: 10), 100 | if (isButtonOpened) 101 | miniComponent(iconData: Icons.view_sidebar, title: "Pages"), 102 | if (isButtonOpened) 103 | miniComponent( 104 | iconData: Icons.view_array_outlined, title: "Views"), 105 | if (isButtonOpened) 106 | miniComponent( 107 | iconData: Icons.build_circle_outlined, 108 | title: "Widgets"), 109 | if (isButtonOpened) SizedBox(height: 5), 110 | ], 111 | ), 112 | ), 113 | decoration: BoxDecoration( 114 | color: KConstantColors.bgColorFaint, 115 | borderRadius: BorderRadius.circular(25)), 116 | ), 117 | )); 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /31.modern_onboarding_view.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:provider/provider.dart'; 3 | import '../utils/colors.dart'; 4 | 5 | class ModernOnboardingNotifier extends ChangeNotifier { 6 | int _currentPageIndex = 0; 7 | int get currentPageIndex => _currentPageIndex; 8 | 9 | void setPageIndex({required int newIndex}) { 10 | _currentPageIndex = newIndex; 11 | notifyListeners(); 12 | } 13 | } 14 | 15 | class ModernOnboardingView extends StatefulWidget { 16 | const ModernOnboardingView({super.key}); 17 | 18 | @override 19 | State createState() => _ModernOnboardingViewState(); 20 | } 21 | 22 | class _ModernOnboardingViewState extends State { 23 | ModernOnboardingNotifier modernOnboardingNotifier({required bool renderUI}) => 24 | Provider.of(context, listen: renderUI); 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | int currentPageIndex = 29 | modernOnboardingNotifier(renderUI: true).currentPageIndex; 30 | 31 | Widget onboardingBlock({required Color color}) { 32 | return Padding( 33 | padding: const EdgeInsets.all(8.0), 34 | child: Container( 35 | height: 500, 36 | decoration: BoxDecoration( 37 | borderRadius: BorderRadius.circular(25), color: color), 38 | ), 39 | ); 40 | } 41 | 42 | Widget dotIndicator() { 43 | customDot({required int index}) { 44 | bool isCurrentIndex = currentPageIndex == index; 45 | 46 | return Padding( 47 | padding: const EdgeInsets.only(right: 8), 48 | child: CircleAvatar( 49 | radius: isCurrentIndex ? 8 : 6, 50 | backgroundColor: isCurrentIndex 51 | ? KConstantColors.blueColor 52 | : KConstantColors.bgColorFaint, 53 | ), 54 | ); 55 | } 56 | 57 | return SizedBox( 58 | width: 100, 59 | height: 50, 60 | child: ListView.builder( 61 | itemCount: 5, 62 | shrinkWrap: true, 63 | scrollDirection: Axis.horizontal, 64 | itemBuilder: (context, index) { 65 | return customDot(index: index); 66 | }), 67 | ); 68 | } 69 | 70 | return SafeArea( 71 | child: Scaffold( 72 | backgroundColor: KConstantColors.bgColor, 73 | body: Container( 74 | child: Padding( 75 | padding: const EdgeInsets.all(8.0), 76 | child: Column( 77 | mainAxisAlignment: MainAxisAlignment.start, 78 | crossAxisAlignment: CrossAxisAlignment.center, 79 | children: [ 80 | Container( 81 | height: 500, 82 | width: 500, 83 | child: PageView( 84 | onPageChanged: (index) { 85 | modernOnboardingNotifier(renderUI: false) 86 | .setPageIndex(newIndex: index); 87 | }, 88 | children: [ 89 | onboardingBlock(color: KConstantColors.blueColor), 90 | onboardingBlock(color: KConstantColors.redColor), 91 | onboardingBlock(color: KConstantColors.purpleColor), 92 | onboardingBlock(color: KConstantColors.bgColorFaint), 93 | onboardingBlock(color: KConstantColors.whiteColor), 94 | ], 95 | ), 96 | ), 97 | SizedBox(height: 5), 98 | dotIndicator(), 99 | SizedBox(height: 5), 100 | Text("Welcome back", 101 | style: KConstantTextstyles.bold(fontSize: 46)), 102 | Text("You've been missed here!", 103 | style: KConstantTextstyles.light(fontSize: 16)), 104 | SizedBox(height: 30), 105 | Container( 106 | height: 50, 107 | width: 400, 108 | child: Center( 109 | child: Text("Continue", 110 | style: KConstantTextstyles.bold(fontSize: 16))), 111 | decoration: BoxDecoration( 112 | color: KConstantColors.blueColor, 113 | borderRadius: BorderRadius.circular(25)), 114 | ), 115 | SizedBox(height: 10), 116 | Container( 117 | height: 50, 118 | width: 300, 119 | child: Center( 120 | child: Text("Take a tour", 121 | style: KConstantTextstyles.bold(fontSize: 16))), 122 | decoration: BoxDecoration( 123 | color: KConstantColors.purpleColor, 124 | borderRadius: BorderRadius.circular(25)), 125 | ) 126 | ], 127 | ), 128 | ), 129 | ), 130 | ), 131 | ); 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /32.flutter_stacked_expandable_container.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/utils/colors.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | class StackedBottomSheetNotifier extends ChangeNotifier { 6 | bool _isSheetExpanded = false; 7 | bool get isSheetExpanded => _isSheetExpanded; 8 | 9 | void toggleSheetExpansion() { 10 | _isSheetExpanded = !_isSheetExpanded; 11 | notifyListeners(); 12 | } 13 | } 14 | 15 | class StackedBottomSheetView extends StatelessWidget { 16 | const StackedBottomSheetView({super.key}); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | StackedBottomSheetNotifier stackedBottomSheetNotifier( 21 | {required bool renderUI}) => 22 | Provider.of(context, listen: renderUI); 23 | 24 | bool isSheetExpanded = 25 | stackedBottomSheetNotifier(renderUI: true).isSheetExpanded; 26 | 27 | Widget baseWidget() { 28 | return Stack( 29 | children: [ 30 | Container(width: 500, height: 400), 31 | Padding( 32 | padding: const EdgeInsets.only(top: 20), 33 | child: AnimatedContainer( 34 | duration: Duration(seconds: 1), 35 | curve: Curves.easeIn, 36 | child: Padding( 37 | padding: const EdgeInsets.all(8.0), 38 | child: SingleChildScrollView( 39 | child: Column( 40 | mainAxisAlignment: MainAxisAlignment.start, 41 | crossAxisAlignment: CrossAxisAlignment.start, 42 | children: [ 43 | Text("Some content", 44 | style: KConstantTextstyles.bold(fontSize: 32)), 45 | Text("Some more content header line", 46 | style: KConstantTextstyles.light(fontSize: 12)), 47 | if (isSheetExpanded) SizedBox(height: 10), 48 | if (isSheetExpanded) 49 | AnimatedOpacity( 50 | curve: Curves.ease, 51 | child: GridView.builder( 52 | itemCount: 8, 53 | shrinkWrap: true, 54 | scrollDirection: Axis.vertical, 55 | gridDelegate: 56 | SliverGridDelegateWithFixedCrossAxisCount( 57 | crossAxisCount: 4), 58 | itemBuilder: (context, index) { 59 | return Padding( 60 | padding: const EdgeInsets.all(8.0), 61 | child: Container( 62 | height: 100, 63 | width: 100, 64 | decoration: BoxDecoration( 65 | borderRadius: 66 | BorderRadius.circular(25), 67 | color: KConstantColors.redColor)), 68 | ); 69 | }), 70 | opacity: isSheetExpanded ? 1 : 0, 71 | duration: Duration(seconds: 2)) 72 | ], 73 | ), 74 | ), 75 | ), 76 | width: 400, 77 | height: isSheetExpanded ? 320 : 90, 78 | decoration: BoxDecoration( 79 | color: KConstantColors.bgColorFaint, 80 | borderRadius: BorderRadius.circular(25))), 81 | ), 82 | Positioned( 83 | right: 30, 84 | child: CircleAvatar( 85 | backgroundColor: KConstantColors.bgColor, 86 | child: Padding( 87 | padding: const EdgeInsets.all(4.0), 88 | child: GestureDetector( 89 | onTap: () { 90 | stackedBottomSheetNotifier(renderUI: false) 91 | .toggleSheetExpansion(); 92 | }, 93 | child: CircleAvatar( 94 | child: Center( 95 | child: Icon(isSheetExpanded 96 | ? Icons.arrow_drop_down_rounded 97 | : Icons.arrow_drop_up_rounded)), 98 | backgroundColor: KConstantColors.bgColorFaint), 99 | ), 100 | ), 101 | ), 102 | ) 103 | ], 104 | ); 105 | } 106 | 107 | return Scaffold( 108 | body: Column( 109 | children: [ 110 | SizedBox(height: 20), 111 | baseWidget(), 112 | ], 113 | ), 114 | backgroundColor: KConstantColors.bgColor, 115 | appBar: AppBar( 116 | backgroundColor: KConstantColors.bgColorFaint, 117 | title: Text("Stacked Expandable Container", 118 | style: KConstantTextstyles.bold(fontSize: 16))), 119 | ); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /33. flutter_pinterest_searchbar.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:ig_posts/utils/text_styles.dart'; 5 | import 'package:provider/provider.dart'; 6 | import 'package:random_string/random_string.dart'; 7 | 8 | class PinterestSearchBarNotifier extends ChangeNotifier { 9 | final TextEditingController textEditingController = TextEditingController(); 10 | 11 | settleQuery({required String value}) { 12 | String existingText = textEditingController.text; 13 | String newText = existingText + " $value"; 14 | textEditingController..text = newText; 15 | textEditingController.selection = TextSelection.fromPosition( 16 | TextPosition(offset: textEditingController.text.length)); 17 | notifyListeners(); 18 | } 19 | 20 | List generatedSuggesions = []; 21 | 22 | void generateSuggesions({required String userInput}) { 23 | generatedSuggesions.clear(); 24 | if (userInput.toLowerCase().contains("gift")) { 25 | generatedSuggesions 26 | .addAll(["for family", "flowers", "under \$5", "aesthetic"]); 27 | notifyListeners(); 28 | } else if (userInput.toLowerCase().contains("learn")) { 29 | generatedSuggesions.addAll(["flutter", "dart", "python", "maths"]); 30 | notifyListeners(); 31 | } else if (userInput.toLowerCase().contains("drive")) { 32 | generatedSuggesions.addAll(["mercedes", "audi", "ferrari", "me crazy"]); 33 | notifyListeners(); 34 | } 35 | } 36 | 37 | void clearSuggetions() { 38 | generatedSuggesions.clear(); 39 | textEditingController.clear(); 40 | notifyListeners(); 41 | } 42 | 43 | List colors = [ 44 | Colors.brown, 45 | KConstantColors.purpleColor, 46 | KConstantColors.bgColor, 47 | Colors.redAccent, 48 | Colors.deepOrangeAccent, 49 | Colors.green 50 | ]; 51 | 52 | Color getRandomColor() { 53 | int randomInt = randomBetween(0, colors.length - 1); 54 | return colors[randomInt]; 55 | } 56 | } 57 | 58 | class PinterestSearchBarWidget extends StatefulWidget { 59 | const PinterestSearchBarWidget({super.key}); 60 | 61 | @override 62 | State createState() => 63 | _PinterestSearchBarWidgetState(); 64 | } 65 | 66 | class _PinterestSearchBarWidgetState extends State { 67 | PinterestSearchBarNotifier pinterestSearchBarNotifier( 68 | {required bool renderUI}) => 69 | Provider.of(context, listen: renderUI); 70 | 71 | @override 72 | Widget build(BuildContext context) { 73 | TextEditingController textEditingController = 74 | pinterestSearchBarNotifier(renderUI: true).textEditingController; 75 | 76 | Widget suggestions() { 77 | suggestionBlock({required String value}) { 78 | return Padding( 79 | padding: const EdgeInsets.only(right: 16), 80 | child: ActionChip( 81 | label: Text(value, style: KConstantTextstyles.light(fontSize: 10)), 82 | onPressed: () { 83 | pinterestSearchBarNotifier(renderUI: false) 84 | .settleQuery(value: value); 85 | }, 86 | backgroundColor: 87 | pinterestSearchBarNotifier(renderUI: true).getRandomColor(), 88 | ), 89 | ); 90 | } 91 | 92 | return SizedBox( 93 | width: 100, 94 | child: ListView.builder( 95 | shrinkWrap: true, 96 | itemCount: pinterestSearchBarNotifier(renderUI: true) 97 | .generatedSuggesions 98 | .length, 99 | itemBuilder: (context, index) { 100 | return suggestionBlock( 101 | value: pinterestSearchBarNotifier(renderUI: true) 102 | .generatedSuggesions[index]); 103 | })); 104 | } 105 | 106 | return Scaffold( 107 | backgroundColor: KConstantColors.bgColor, 108 | appBar: CustomAppBar(title: "Pinterest Suggestion Bar"), 109 | body: Column( 110 | mainAxisAlignment: MainAxisAlignment.start, 111 | crossAxisAlignment: CrossAxisAlignment.start, 112 | children: [ 113 | SizedBox(height: 10), 114 | Padding( 115 | padding: const EdgeInsets.all(8.0), 116 | child: TextField( 117 | onChanged: (val) { 118 | if (val == "") { 119 | pinterestSearchBarNotifier(renderUI: false).clearSuggetions(); 120 | } else { 121 | pinterestSearchBarNotifier(renderUI: false) 122 | .generateSuggesions(userInput: val); 123 | } 124 | }, 125 | style: KCustomTextStyle.kRegular( 126 | context, 16, KConstantColors.whiteColor), 127 | decoration: InputDecoration( 128 | border: OutlineInputBorder( 129 | borderRadius: BorderRadius.circular(8)), 130 | hintStyle: KCustomTextStyle.kRegular(context, 16), 131 | hintText: "Search anything", 132 | filled: true, 133 | fillColor: KConstantColors.bgColorFaint), 134 | controller: textEditingController, 135 | ), 136 | ), 137 | SizedBox(height: 10), 138 | if (pinterestSearchBarNotifier(renderUI: true) 139 | .generatedSuggesions 140 | .isNotEmpty) 141 | Text("Refine your search", 142 | style: KConstantTextstyles.light(fontSize: 12)), 143 | suggestions() 144 | ], 145 | ), 146 | ); 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /34. flutter_easy_animation_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/utils/colors.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | class AnimatedSubscribeButtonNotifier extends ChangeNotifier { 6 | AnimationController? animationController; 7 | 8 | bool isAnimated = false; 9 | void toggleAnimationState() { 10 | isAnimated = !isAnimated; 11 | if (isAnimated) { 12 | animationController?.forward(); 13 | } else { 14 | animationController?.reverse(); 15 | } 16 | notifyListeners(); 17 | } 18 | } 19 | 20 | class AnimatedSubscribeButtonWidget extends StatefulWidget { 21 | const AnimatedSubscribeButtonWidget({super.key}); 22 | 23 | @override 24 | State createState() => 25 | _AnimatedSubscribeButtonWidgetState(); 26 | } 27 | 28 | class _AnimatedSubscribeButtonWidgetState 29 | extends State 30 | with SingleTickerProviderStateMixin { 31 | AnimatedSubscribeButtonNotifier animatedSubscribeButtonNotifier( 32 | {required bool renderUI}) => 33 | Provider.of(context, listen: renderUI); 34 | 35 | @override 36 | void initState() { 37 | animatedSubscribeButtonNotifier(renderUI: false).animationController = 38 | AnimationController(vsync: this, duration: Duration(milliseconds: 500)); 39 | super.initState(); 40 | } 41 | 42 | @override 43 | Widget build(BuildContext context) { 44 | bool isAnimated = 45 | animatedSubscribeButtonNotifier(renderUI: true).isAnimated; 46 | 47 | return Scaffold( 48 | appBar: AppBar( 49 | backgroundColor: KConstantColors.bgColor, 50 | title: Text("Flutter Easy Animation", 51 | style: KConstantTextstyles.bold(fontSize: 16))), 52 | backgroundColor: KConstantColors.bgColor, 53 | body: Center( 54 | child: Column( 55 | mainAxisAlignment: MainAxisAlignment.center, 56 | children: [ 57 | ActionChip( 58 | label: Text(isAnimated ? "Hide information" : "Show information", 59 | style: KConstantTextstyles.light(fontSize: 14)), 60 | backgroundColor: isAnimated 61 | ? KConstantColors.redColor 62 | : KConstantColors.blueColor, 63 | onPressed: () { 64 | animatedSubscribeButtonNotifier(renderUI: false) 65 | .toggleAnimationState(); 66 | }, 67 | ), 68 | const SizedBox(height: 20), 69 | SizeTransition( 70 | sizeFactor: animatedSubscribeButtonNotifier(renderUI: true) 71 | .animationController!, 72 | child: Container( 73 | decoration: BoxDecoration( 74 | borderRadius: BorderRadius.circular(12), 75 | color: KConstantColors.bgColorFaint), 76 | child: Padding( 77 | padding: const EdgeInsets.all(16.0), 78 | child: Center( 79 | child: Text( 80 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", 81 | style: KConstantTextstyles.light(fontSize: 12)), 82 | ), 83 | )), 84 | ), 85 | ], 86 | ), 87 | ), 88 | ); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /35.flutter_custom_tab.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class TabNavigatorNotifier extends ChangeNotifier { 7 | int selectedIndex = 0; 8 | 9 | void setTabIndex({required int newIndex}) { 10 | selectedIndex = newIndex; 11 | notifyListeners(); 12 | } 13 | } 14 | 15 | class FlutterTabNavigataorView extends StatefulWidget { 16 | const FlutterTabNavigataorView({super.key}); 17 | 18 | @override 19 | State createState() => 20 | _FlutterTabNavigataorViewState(); 21 | } 22 | 23 | class _FlutterTabNavigataorViewState extends State { 24 | TabNavigatorNotifier tabNavigatorNotifier({required bool renderUI}) => 25 | Provider.of(context, listen: renderUI); 26 | 27 | PageController pageController = PageController(); 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | showTabHolder() { 32 | miniTab( 33 | {required int index, 34 | required IconData iconData, 35 | required String title}) { 36 | bool isSelectedIndex = 37 | tabNavigatorNotifier(renderUI: true).selectedIndex == index; 38 | 39 | return GestureDetector( 40 | onTap: () { 41 | pageController.jumpToPage(index); 42 | tabNavigatorNotifier(renderUI: false).setTabIndex(newIndex: index); 43 | }, 44 | child: Container( 45 | child: Padding( 46 | padding: const EdgeInsets.all(8.0), 47 | child: Column( 48 | mainAxisAlignment: MainAxisAlignment.center, 49 | crossAxisAlignment: CrossAxisAlignment.center, 50 | children: [ 51 | Icon(iconData, color: KConstantColors.whiteColor), 52 | SizedBox(height: 10), 53 | if (isSelectedIndex) 54 | Container( 55 | width: 20, 56 | height: 2, 57 | decoration: BoxDecoration( 58 | borderRadius: BorderRadius.circular(12), 59 | color: KConstantColors.purpleColor), 60 | ) 61 | ], 62 | ), 63 | ), 64 | ), 65 | ); 66 | } 67 | 68 | return Row( 69 | children: [ 70 | miniTab(index: 0, iconData: Icons.home, title: "Home"), 71 | SizedBox(width: 10), 72 | miniTab(index: 1, iconData: Icons.wifi, title: "Wifi"), 73 | SizedBox(width: 10), 74 | miniTab(index: 2, iconData: Icons.label, title: "Tag"), 75 | ], 76 | ); 77 | } 78 | 79 | showPageContent() { 80 | _pageContent({required String title, required String data}) { 81 | return Column( 82 | mainAxisAlignment: MainAxisAlignment.start, 83 | crossAxisAlignment: CrossAxisAlignment.start, 84 | children: [ 85 | Text(title, style: KConstantTextstyles.bold(fontSize: 42)), 86 | Text(data, style: KConstantTextstyles.light(fontSize: 12)), 87 | ], 88 | ); 89 | } 90 | 91 | return SizedBox( 92 | height: 400, 93 | width: 500, 94 | child: PageView( 95 | controller: pageController, 96 | children: [ 97 | _pageContent(title: "Home", data: "Some data reguarding home view"), 98 | _pageContent(title: "Wifi", data: "Some data reguarding wifi view"), 99 | _pageContent(title: "Tag", data: "Some data reguarding tag view") 100 | ], 101 | ), 102 | ); 103 | } 104 | 105 | return Scaffold( 106 | backgroundColor: KConstantColors.bgColor, 107 | appBar: CustomAppBar(title: "Custom Tab Navigator"), 108 | body: Column( 109 | children: [ 110 | SizedBox(height: 50), 111 | showTabHolder(), 112 | SizedBox(height: 5), 113 | showPageContent() 114 | ], 115 | ), 116 | ); 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /36.flutter_share.dart: -------------------------------------------------------------------------------- 1 | import 'dart:math'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | import 'package:share_plus/share_plus.dart'; 6 | 7 | class RandomIdNotifier extends ChangeNotifier { 8 | String? genSerialNumber; 9 | 10 | void generateRandomID() { 11 | Random random = Random(); 12 | genSerialNumber = String.fromCharCodes( 13 | List.generate(8, (index) => random.nextInt(33) + 89)); 14 | notifyListeners(); 15 | } 16 | 17 | shareSerialNumber() async { 18 | if (genSerialNumber != null) { 19 | await Share.share(genSerialNumber!); 20 | } 21 | } 22 | } 23 | 24 | class ShareRandomIDView extends StatefulWidget { 25 | const ShareRandomIDView({super.key}); 26 | 27 | @override 28 | State createState() => _ShareRandomIDViewState(); 29 | } 30 | 31 | class _ShareRandomIDViewState extends State { 32 | RandomIdNotifier randomIdNotifier({required bool renderUI}) => 33 | Provider.of(context, listen: renderUI); 34 | 35 | @override 36 | Widget build(BuildContext context) { 37 | String? randomString = randomIdNotifier(renderUI: true).genSerialNumber; 38 | 39 | return Scaffold( 40 | backgroundColor: KConstantColors.bgColor, 41 | body: Center( 42 | child: Column( 43 | mainAxisAlignment: MainAxisAlignment.center, 44 | crossAxisAlignment: CrossAxisAlignment.center, 45 | children: [ 46 | Text("Serial number", 47 | style: KConstantTextstyles.bold(fontSize: 42)), 48 | Text("Press share icon to share the random serial number", 49 | style: KConstantTextstyles.light(fontSize: 12)), 50 | SizedBox(height: 40), 51 | if (randomString != null) 52 | Text(randomString, style: KConstantTextstyles.bold(fontSize: 30)), 53 | SizedBox(height: 20), 54 | GestureDetector( 55 | onTap: () { 56 | if (randomString == null) { 57 | randomIdNotifier(renderUI: false).generateRandomID(); 58 | } else { 59 | randomIdNotifier(renderUI: false).shareSerialNumber(); 60 | } 61 | }, 62 | child: Container( 63 | width: 100, 64 | height: 50, 65 | child: Center( 66 | child: Text(randomString != null ? "Share" : "Generate", 67 | style: KConstantTextstyles.light(fontSize: 12))), 68 | decoration: BoxDecoration( 69 | color: KConstantColors.blueColor, 70 | borderRadius: BorderRadius.circular(12))), 71 | ) 72 | ], 73 | ), 74 | ), 75 | ); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /37.flutter_google_maps_marker_mode.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:google_maps_flutter/google_maps_flutter.dart'; 4 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 5 | import 'package:ig_posts/utils/colors.dart'; 6 | import 'package:provider/provider.dart'; 7 | 8 | class MarkerNotifier extends ChangeNotifier { 9 | bool _singletonMarker = false; 10 | bool get singletonMarker => _singletonMarker; 11 | 12 | List _markers = []; 13 | List get markers => _markers; 14 | 15 | void setMarkerOnMap({required LatLng latLng}) { 16 | if (_singletonMarker) { 17 | _markers.clear(); 18 | } 19 | 20 | MarkerId markerId = MarkerId(latLng.toString()); 21 | Marker marker = Marker(markerId: markerId, position: latLng); 22 | _markers.add(marker); 23 | notifyListeners(); 24 | } 25 | 26 | void toggleMarkerMode() { 27 | _singletonMarker = !_singletonMarker; 28 | notifyListeners(); 29 | } 30 | } 31 | 32 | class FlutterMapsMarkerView extends StatefulWidget { 33 | @override 34 | State createState() => _FlutterMapsMarkerViewState(); 35 | } 36 | 37 | class _FlutterMapsMarkerViewState extends State { 38 | final Completer _controller = Completer(); 39 | late GoogleMapController googleMapController; 40 | 41 | MarkerNotifier markerNotifier({required bool renderUI}) => 42 | Provider.of(context, listen: renderUI); 43 | 44 | @override 45 | Widget build(BuildContext context) { 46 | bool isSingleMarkerMode = markerNotifier(renderUI: true).singletonMarker; 47 | 48 | return Scaffold( 49 | appBar: CustomAppBar(title: "Advanced markers"), 50 | floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, 51 | floatingActionButton: ActionChip( 52 | backgroundColor: isSingleMarkerMode 53 | ? KConstantColors.blueColor 54 | : KConstantColors.purpleColor, 55 | label: Text( 56 | !isSingleMarkerMode ? "Multiple mode" : "Single mode", 57 | style: KConstantTextstyles.light(fontSize: 12), 58 | ), 59 | onPressed: () { 60 | markerNotifier(renderUI: false).toggleMarkerMode(); 61 | }), 62 | backgroundColor: KConstantColors.bgColor, 63 | body: Padding( 64 | padding: const EdgeInsets.all(8.0), 65 | child: ClipRRect( 66 | child: Container( 67 | child: GoogleMap( 68 | onTap: (latLng) { 69 | markerNotifier(renderUI: false) 70 | .setMarkerOnMap(latLng: latLng); 71 | }, 72 | myLocationEnabled: true, 73 | markers: Set.from(markerNotifier(renderUI: true).markers), 74 | mapToolbarEnabled: true, 75 | initialCameraPosition: CameraPosition( 76 | target: LatLng(12.9716, 77.5946), zoom: 16), 77 | onMapCreated: (GoogleMapController controller) { 78 | _controller.complete(controller); 79 | googleMapController = controller; 80 | }), 81 | ), 82 | )), 83 | ); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /38.flutter_go_router_basics.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:go_router/go_router.dart'; 3 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 4 | import 'package:ig_posts/utils/colors.dart'; 5 | 6 | final GoRouter router = GoRouter( 7 | routes: [ 8 | GoRoute( 9 | path: '/', 10 | builder: (BuildContext context, GoRouterState state) { 11 | return const HomeView(); 12 | }, 13 | routes: [ 14 | GoRoute( 15 | path: 'details_1', 16 | builder: (BuildContext context, GoRouterState state) { 17 | return const Detail1View(); 18 | }, 19 | ), 20 | GoRoute( 21 | path: 'details_2', 22 | builder: (BuildContext context, GoRouterState state) { 23 | return const Detail2View(); 24 | }, 25 | ), 26 | ], 27 | ), 28 | ], 29 | ); 30 | 31 | class HomeView extends StatelessWidget { 32 | const HomeView({super.key}); 33 | 34 | @override 35 | Widget build(BuildContext context) { 36 | return Scaffold( 37 | appBar: CustomAppBar(title: "Flutter Go Router"), 38 | floatingActionButton: ActionChip( 39 | onPressed: () { 40 | context.go("/details_1"); 41 | }, 42 | backgroundColor: KConstantColors.bgColorFaint, 43 | label: Text("Go tot detail 1", 44 | style: KConstantTextstyles.light(fontSize: 12))), 45 | backgroundColor: KConstantColors.bgColor, 46 | body: Center( 47 | child: 48 | Text("Home View", style: KConstantTextstyles.bold(fontSize: 30))), 49 | ); 50 | } 51 | } 52 | 53 | class Detail1View extends StatelessWidget { 54 | const Detail1View({super.key}); 55 | 56 | @override 57 | Widget build(BuildContext context) { 58 | return Scaffold( 59 | appBar: CustomAppBar(title: "Flutter Go Router"), 60 | floatingActionButton: Column( 61 | mainAxisAlignment: MainAxisAlignment.end, 62 | children: [ 63 | ActionChip( 64 | onPressed: () { 65 | context.go("/details_2"); 66 | }, 67 | backgroundColor: KConstantColors.redColor, 68 | label: Text("Go tot detail 2", 69 | style: KConstantTextstyles.light(fontSize: 12))), 70 | SizedBox(height: 10), 71 | ActionChip( 72 | onPressed: () { 73 | context.go("/"); 74 | }, 75 | backgroundColor: KConstantColors.redColor, 76 | label: Text("Go to home", 77 | style: KConstantTextstyles.light(fontSize: 12))), 78 | ], 79 | ), 80 | backgroundColor: KConstantColors.bgColor, 81 | body: Center( 82 | child: Text("Detail 1 View", 83 | style: KConstantTextstyles.bold(fontSize: 30))), 84 | ); 85 | } 86 | } 87 | 88 | class Detail2View extends StatelessWidget { 89 | const Detail2View({super.key}); 90 | 91 | @override 92 | Widget build(BuildContext context) { 93 | return Scaffold( 94 | appBar: CustomAppBar(title: "Flutter Go Router"), 95 | floatingActionButton: Column( 96 | mainAxisAlignment: MainAxisAlignment.end, 97 | children: [ 98 | ActionChip( 99 | onPressed: () { 100 | context.go("/details_1"); 101 | }, 102 | backgroundColor: KConstantColors.redColor, 103 | label: Text("Go tot detail 1", 104 | style: KConstantTextstyles.light(fontSize: 12))), 105 | SizedBox(height: 10), 106 | ActionChip( 107 | onPressed: () { 108 | context.go("/"); 109 | }, 110 | backgroundColor: KConstantColors.redColor, 111 | label: Text("Go to home", 112 | style: KConstantTextstyles.light(fontSize: 12))), 113 | ], 114 | ), 115 | backgroundColor: KConstantColors.blueColor, 116 | body: Center( 117 | child: Text("Detail 2 View", 118 | style: KConstantTextstyles.bold(fontSize: 30))), 119 | ); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /39.flutter_maps_listview.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:google_maps_flutter/google_maps_flutter.dart'; 4 | import 'package:ig_posts/utils/colors.dart'; 5 | import 'package:provider/provider.dart'; 6 | 7 | class MapData { 8 | final int index; 9 | final String title; 10 | final String descripton; 11 | final LatLng latLng; 12 | 13 | const MapData( 14 | {required this.index, 15 | required this.title, 16 | required this.descripton, 17 | required this.latLng}); 18 | } 19 | 20 | class MapCameraListviewAnimationNotifier extends ChangeNotifier { 21 | MapData? selectedMapData; 22 | 23 | Marker? _selectedPlaceData; 24 | Marker? get selectedPlaceData => _selectedPlaceData; 25 | 26 | void setMarker({required LatLng latLng}) { 27 | MarkerId markerId = MarkerId(latLng.toString()); 28 | Marker marker = Marker(markerId: markerId, position: latLng); 29 | _selectedPlaceData = marker; 30 | notifyListeners(); 31 | } 32 | 33 | setListData({required MapData mapData}) { 34 | selectedMapData = mapData; 35 | notifyListeners(); 36 | } 37 | } 38 | 39 | class FlutterListviewAnimationOnMapView extends StatefulWidget { 40 | const FlutterListviewAnimationOnMapView({super.key}); 41 | 42 | @override 43 | State createState() => 44 | _FlutterListviewAnimationOnMapViewState(); 45 | } 46 | 47 | class _FlutterListviewAnimationOnMapViewState 48 | extends State { 49 | final Completer _controller = Completer(); 50 | 51 | MapCameraListviewAnimationNotifier markerNotifier({required bool renderUI}) => 52 | Provider.of(context, 53 | listen: renderUI); 54 | 55 | late GoogleMapController googleMapController; 56 | 57 | @override 58 | Widget build(BuildContext context) { 59 | List data = [ 60 | MapData( 61 | index: 0, 62 | title: "Haldirams", 63 | descripton: "Some demo description", 64 | latLng: LatLng(12.9721, 77.5961)), 65 | MapData( 66 | index: 1, 67 | title: "Kotha Kachori", 68 | descripton: "Some demo description", 69 | latLng: LatLng(12.9621, 77.6012)), 70 | MapData( 71 | index: 2, 72 | title: "Burger King", 73 | descripton: "Some demo description", 74 | latLng: LatLng(12.85, 77.57)), 75 | ]; 76 | 77 | showList() { 78 | return SizedBox( 79 | height: 100, 80 | width: 500, 81 | child: ListView.builder( 82 | scrollDirection: Axis.horizontal, 83 | itemCount: data.length, 84 | itemBuilder: (BuildContext context, int index) { 85 | MapData mapData = data[index]; 86 | bool isSelectedData = 87 | markerNotifier(renderUI: true).selectedMapData == mapData; 88 | return GestureDetector( 89 | onTap: () { 90 | markerNotifier(renderUI: false).setListData(mapData: mapData); 91 | markerNotifier(renderUI: false) 92 | .setMarker(latLng: mapData.latLng); 93 | googleMapController.animateCamera( 94 | CameraUpdate.newCameraPosition( 95 | CameraPosition(target: mapData.latLng, zoom: 14))); 96 | }, 97 | child: Padding( 98 | padding: const EdgeInsets.all(8.0), 99 | child: Container( 100 | decoration: BoxDecoration( 101 | color: KConstantColors.bgColor, 102 | borderRadius: BorderRadius.circular(12)), 103 | height: isSelectedData ? 100 : 120, 104 | width: 300, 105 | child: Row( 106 | children: [ 107 | Padding( 108 | padding: const EdgeInsets.all(8.0), 109 | child: Container( 110 | height: 100, 111 | child: Center(child: Icon(Icons.food_bank_sharp)), 112 | width: 100, 113 | decoration: BoxDecoration( 114 | color: KConstantColors.depthWiteColor, 115 | borderRadius: BorderRadius.circular(12))), 116 | ), 117 | Column( 118 | mainAxisAlignment: MainAxisAlignment.center, 119 | crossAxisAlignment: CrossAxisAlignment.start, 120 | children: [ 121 | Text(mapData.title, 122 | style: KConstantTextstyles.bold(fontSize: 12)), 123 | Text(mapData.descripton, 124 | style: KConstantTextstyles.light(fontSize: 10)), 125 | ], 126 | ) 127 | ], 128 | ), 129 | ), 130 | ), 131 | ); 132 | }, 133 | ), 134 | ); 135 | } 136 | 137 | return Scaffold( 138 | floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, 139 | floatingActionButton: showList(), 140 | backgroundColor: KConstantColors.bgColor, 141 | body: Container( 142 | child: GoogleMap( 143 | onTap: (latLng) { 144 | markerNotifier(renderUI: false).setMarker(latLng: latLng); 145 | googleMapController.animateCamera( 146 | CameraUpdate.newCameraPosition( 147 | CameraPosition(target: latLng, zoom: 12))); 148 | }, 149 | myLocationEnabled: true, 150 | markers: Set.from( 151 | markerNotifier(renderUI: true).selectedPlaceData != null 152 | ? [markerNotifier(renderUI: true).selectedPlaceData] 153 | : []), 154 | mapToolbarEnabled: true, 155 | initialCameraPosition: 156 | CameraPosition(target: LatLng(12.9716, 77.5946), zoom: 12), 157 | onMapCreated: (GoogleMapController controller) { 158 | _controller.complete(controller); 159 | googleMapController = controller; 160 | }), 161 | )); 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /40.flutter_double_slider.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | 7 | class DoubleSliderNotifier extends ChangeNotifier { 8 | RangeValues rangeValues = RangeValues(0, 1); 9 | 10 | void setSliderValue({required RangeValues value}) { 11 | rangeValues = value; 12 | notifyListeners(); 13 | debugPrint(rangeValues.toString()); 14 | } 15 | 16 | String renderEmoji() { 17 | if (rangeValues.start >= 0 && rangeValues.end <= 0.2) { 18 | return "🔥"; 19 | } else if (rangeValues.start >= 0.2 && rangeValues.end <= 0.4) { 20 | return "👀"; 21 | } else if (rangeValues.start >= 0.4 && rangeValues.end <= 0.6) { 22 | return "👋🏻"; 23 | } else if (rangeValues.start >= 0.6 && rangeValues.end <= 0.8) { 24 | return "✅"; 25 | } else if (rangeValues.start >= 0.8 && rangeValues.end <= 1) { 26 | return "🍕"; 27 | } 28 | return "🔗"; 29 | } 30 | } 31 | 32 | class FlutterDoubleSliderView extends StatelessWidget { 33 | const FlutterDoubleSliderView({super.key}); 34 | 35 | @override 36 | Widget build(BuildContext context) { 37 | DoubleSliderNotifier doubleSliderNotifier({required bool renderUI}) => 38 | Provider.of(context, listen: renderUI); 39 | 40 | return Scaffold( 41 | backgroundColor: KConstantColors.bgColor, 42 | appBar: CustomAppBar(title: "Double slider"), 43 | body: Column( 44 | mainAxisAlignment: MainAxisAlignment.center, 45 | crossAxisAlignment: CrossAxisAlignment.center, 46 | children: [ 47 | Text("Rate your experience in a partition", 48 | style: KConstantTextstyles.light(fontSize: 16)), 49 | SizedBox(height: 25), 50 | RangeSlider( 51 | activeColor: KConstantColors.whiteColor, 52 | divisions: 5, 53 | values: doubleSliderNotifier(renderUI: true).rangeValues, 54 | onChanged: (val) { 55 | doubleSliderNotifier(renderUI: false) 56 | .setSliderValue(value: val); 57 | }), 58 | SizedBox(height: 30), 59 | Text(doubleSliderNotifier(renderUI: true).renderEmoji(), 60 | style: KConstantTextstyles.bold(fontSize: 75)) 61 | ], 62 | ), 63 | ); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /41.flutter_payment_modes.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class PaymentPlan { 7 | final int index; 8 | final String title; 9 | final String description; 10 | final double price; 11 | final List features; 12 | final Color themeColor; 13 | 14 | const PaymentPlan({ 15 | required this.index, 16 | required this.title, 17 | required this.description, 18 | required this.price, 19 | required this.features, 20 | required this.themeColor, 21 | }); 22 | } 23 | 24 | class PaymentPlanNotifier extends ChangeNotifier { 25 | int selectedPaymentPlanIndex = 0; 26 | bool isVerticalMode = false; 27 | 28 | void setPaymentPlanIndex({required int value}) { 29 | selectedPaymentPlanIndex = value; 30 | notifyListeners(); 31 | } 32 | 33 | void toggleVericalMode() { 34 | isVerticalMode = !isVerticalMode; 35 | notifyListeners(); 36 | } 37 | } 38 | 39 | class FlutterPaymentPlanView extends StatelessWidget { 40 | const FlutterPaymentPlanView({super.key}); 41 | 42 | @override 43 | Widget build(BuildContext context) { 44 | PaymentPlanNotifier paymentPlanNotifier({required bool renderUI}) => 45 | Provider.of(context, listen: renderUI); 46 | 47 | List paymentPlans = [ 48 | PaymentPlan( 49 | themeColor: KConstantColors.redColor, 50 | index: 0, 51 | title: "Basic", 52 | description: "Demo description", 53 | price: 0, 54 | features: []), 55 | PaymentPlan( 56 | themeColor: KConstantColors.blueColor, 57 | index: 1, 58 | title: "Premium", 59 | description: "Demo description", 60 | price: 10, 61 | features: []), 62 | PaymentPlan( 63 | themeColor: KConstantColors.greyColor, 64 | index: 2, 65 | title: "Enterprise", 66 | description: "Demo description", 67 | price: 100, 68 | features: []), 69 | ]; 70 | 71 | paymentBlock({required PaymentPlan paymentPlan}) { 72 | bool isSelectedBlock = 73 | paymentPlanNotifier(renderUI: true).selectedPaymentPlanIndex == 74 | paymentPlan.index; 75 | 76 | return GestureDetector( 77 | onTap: () { 78 | paymentPlanNotifier(renderUI: false) 79 | .setPaymentPlanIndex(value: paymentPlan.index); 80 | }, 81 | child: Padding( 82 | padding: const EdgeInsets.all(8.0), 83 | child: Container( 84 | width: 150, 85 | child: Padding( 86 | padding: const EdgeInsets.all(8.0), 87 | child: Column( 88 | mainAxisAlignment: MainAxisAlignment.center, 89 | crossAxisAlignment: CrossAxisAlignment.center, 90 | children: [ 91 | SizedBox(height: 10), 92 | Text(paymentPlan.title, 93 | style: KConstantTextstyles.bold(fontSize: 12)), 94 | Text("${paymentPlan.price.toInt().toString()}\$", 95 | style: KConstantTextstyles.bold(fontSize: 30)), 96 | Text(paymentPlan.description, 97 | style: KConstantTextstyles.light(fontSize: 12)), 98 | SizedBox(height: 10), 99 | ], 100 | ), 101 | ), 102 | decoration: BoxDecoration( 103 | color: isSelectedBlock ? KConstantColors.bgColorFaint : null, 104 | border: Border.all( 105 | color: isSelectedBlock 106 | ? KConstantColors.blueColor 107 | : KConstantColors.greyColor), 108 | borderRadius: BorderRadius.circular(12)), 109 | ), 110 | ), 111 | ); 112 | } 113 | 114 | bool isVerticalMode = paymentPlanNotifier(renderUI: true).isVerticalMode; 115 | 116 | return Scaffold( 117 | appBar: CustomAppBar(title: "Flutter Payment Mode"), 118 | backgroundColor: KConstantColors.bgColor, 119 | body: Column( 120 | mainAxisAlignment: MainAxisAlignment.center, 121 | crossAxisAlignment: CrossAxisAlignment.center, 122 | children: [ 123 | IconButton( 124 | onPressed: () { 125 | paymentPlanNotifier(renderUI: false).toggleVericalMode(); 126 | }, 127 | icon: Icon( 128 | isVerticalMode ? Icons.rotate_right : Icons.rotate_left, 129 | color: KConstantColors.whiteColor)), 130 | SizedBox(height: 20), 131 | SizedBox( 132 | height: isVerticalMode ? 400 : 200, 133 | width: 500, 134 | child: MediaQuery.removePadding( 135 | context: context, 136 | removeTop: true, 137 | child: ListView.builder( 138 | shrinkWrap: true, 139 | scrollDirection: 140 | isVerticalMode ? Axis.vertical : Axis.horizontal, 141 | itemCount: paymentPlans.length, 142 | itemBuilder: (BuildContext context, int index) { 143 | return paymentBlock(paymentPlan: paymentPlans[index]); 144 | }, 145 | ), 146 | ), 147 | ), 148 | SizedBox(height: 40), 149 | Container( 150 | width: 200, 151 | height: 50, 152 | child: Center( 153 | child: Text("Continue", 154 | style: KConstantTextstyles.light(fontSize: 12))), 155 | decoration: BoxDecoration( 156 | gradient: LinearGradient(colors: [ 157 | KConstantColors.blueColor, 158 | KConstantColors.purpleColor 159 | ]), 160 | borderRadius: BorderRadius.circular(12)), 161 | ) 162 | ], 163 | ), 164 | ); 165 | } 166 | } 167 | -------------------------------------------------------------------------------- /42.flutter_listview_search.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class Item { 7 | final int itemId; 8 | final String itemTitle; 9 | 10 | const Item({ 11 | required this.itemId, 12 | required this.itemTitle, 13 | }); 14 | } 15 | 16 | class CustomSearchNotifier extends ChangeNotifier { 17 | final List items = [ 18 | Item(itemId: 0, itemTitle: "Apple"), 19 | Item(itemId: 1, itemTitle: "Banana"), 20 | Item(itemId: 2, itemTitle: "Pineapple"), 21 | Item(itemId: 3, itemTitle: "Zebra"), 22 | ]; 23 | 24 | final List queriedItems = []; 25 | 26 | String? query; 27 | 28 | void setQuery({required String value}) { 29 | query = value; 30 | notifyListeners(); 31 | } 32 | 33 | void queryData() { 34 | queriedItems.clear(); 35 | 36 | for (Item item in items) { 37 | if (query != null) { 38 | if (!queriedItems.contains(item)) { 39 | if (item.itemTitle.toLowerCase().contains(query!.toLowerCase())) { 40 | queriedItems.add(item); 41 | notifyListeners(); 42 | } 43 | } 44 | } 45 | } 46 | } 47 | 48 | void clearSearch() { 49 | queriedItems.clear(); 50 | query = null; 51 | notifyListeners(); 52 | } 53 | } 54 | 55 | class CustomFlutterSearchView extends StatefulWidget { 56 | const CustomFlutterSearchView({super.key}); 57 | 58 | @override 59 | State createState() => 60 | _CustomFlutterSearchViewState(); 61 | } 62 | 63 | class _CustomFlutterSearchViewState extends State { 64 | CustomSearchNotifier customSearchNotifier({required bool renderUI}) => 65 | Provider.of(context, listen: renderUI); 66 | 67 | final TextEditingController textEditingController = TextEditingController(); 68 | 69 | @override 70 | void dispose() { 71 | textEditingController.dispose(); 72 | super.dispose(); 73 | } 74 | 75 | @override 76 | Widget build(BuildContext context) { 77 | bool isQueryNull = customSearchNotifier(renderUI: true).query == null; 78 | 79 | List items = isQueryNull 80 | ? customSearchNotifier(renderUI: true).items 81 | : customSearchNotifier(renderUI: true).queriedItems; 82 | 83 | return Scaffold( 84 | backgroundColor: KConstantColors.bgColor, 85 | appBar: CustomAppBar(title: "Flutter Search"), 86 | body: Column( 87 | children: [ 88 | SizedBox(height: 20), 89 | TextField( 90 | onChanged: (val) { 91 | if (val != "") { 92 | customSearchNotifier(renderUI: false).setQuery(value: val); 93 | customSearchNotifier(renderUI: false).queryData(); 94 | } else { 95 | customSearchNotifier(renderUI: false).clearSearch(); 96 | } 97 | }, 98 | style: KConstantTextstyles.light(fontSize: 12), 99 | controller: textEditingController, 100 | decoration: InputDecoration( 101 | hintStyle: TextStyle(color: KConstantColors.whiteColor), 102 | hintText: "Search anything..."), 103 | ), 104 | SizedBox(height: 20), 105 | ListView.builder( 106 | shrinkWrap: true, 107 | itemCount: items.length, 108 | itemBuilder: (BuildContext context, int index) { 109 | Item item = items[index]; 110 | 111 | return ListTile( 112 | leading: CircleAvatar( 113 | backgroundColor: KConstantColors.bgColorFaint, 114 | child: Center( 115 | child: Text(item.itemId.toString(), 116 | style: KConstantTextstyles.light(fontSize: 12)), 117 | ), 118 | ), 119 | title: Text(item.itemTitle, 120 | style: KConstantTextstyles.light(fontSize: 12)), 121 | ); 122 | }, 123 | ), 124 | ], 125 | )); 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /43.flutter_color_pallete_generator.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class PalleteData { 7 | final palleteId; 8 | final String colorTitle; 9 | final String colorDescription; 10 | final Color color; 11 | final hexValue; 12 | 13 | const PalleteData( 14 | {required this.palleteId, 15 | required this.colorTitle, 16 | required this.colorDescription, 17 | required this.color, 18 | required this.hexValue}); 19 | } 20 | 21 | class ColorPalleteNotifier extends ChangeNotifier { 22 | PalleteData? selectedPalleteData = PalleteData( 23 | palleteId: 0, 24 | colorTitle: "Blue", 25 | colorDescription: "Demo description", 26 | color: Colors.blue, 27 | hexValue: "fb8500"); 28 | 29 | void setPalleteData({required PalleteData palleteData}) { 30 | selectedPalleteData = palleteData; 31 | notifyListeners(); 32 | debugPrint(selectedPalleteData?.colorTitle.toString()); 33 | } 34 | } 35 | 36 | class CustomColorPalletePickerView extends StatelessWidget { 37 | const CustomColorPalletePickerView({super.key}); 38 | 39 | @override 40 | Widget build(BuildContext context) { 41 | ColorPalleteNotifier colorPalleteNotifier({required bool renderUI}) => 42 | Provider.of(context, listen: renderUI); 43 | 44 | PalleteData? selectedPallete = 45 | colorPalleteNotifier(renderUI: true).selectedPalleteData; 46 | 47 | List data = [ 48 | PalleteData( 49 | palleteId: 0, 50 | colorTitle: "Blue", 51 | colorDescription: "Demo description", 52 | color: Colors.blue, 53 | hexValue: "fb8500"), 54 | PalleteData( 55 | palleteId: 1, 56 | colorTitle: "Red", 57 | colorDescription: "Demo description", 58 | color: Colors.red, 59 | hexValue: "219ebc"), 60 | PalleteData( 61 | palleteId: 2, 62 | colorTitle: "Yellow", 63 | colorDescription: "Demo description", 64 | color: Colors.yellow, 65 | hexValue: "ccd5ae"), 66 | PalleteData( 67 | palleteId: 3, 68 | colorTitle: "Green", 69 | colorDescription: "Demo description", 70 | color: Colors.green, 71 | hexValue: "ffc8dd"), 72 | PalleteData( 73 | palleteId: 4, 74 | colorTitle: "Orange", 75 | colorDescription: "Demo description", 76 | color: Colors.orange, 77 | hexValue: "ccd5ae"), 78 | ]; 79 | 80 | buildPalleteBlock({required List renderData}) { 81 | singlePallete({required PalleteData kData}) { 82 | bool isSelected = colorPalleteNotifier(renderUI: true) 83 | .selectedPalleteData! 84 | .palleteId == 85 | kData.palleteId; 86 | 87 | return GestureDetector( 88 | onTap: () { 89 | colorPalleteNotifier(renderUI: false) 90 | .setPalleteData(palleteData: kData); 91 | }, 92 | child: Container( 93 | width: isSelected ? 105 : 85, 94 | child: isSelected 95 | ? Center( 96 | child: Column( 97 | mainAxisAlignment: MainAxisAlignment.center, 98 | crossAxisAlignment: CrossAxisAlignment.center, 99 | children: [ 100 | Text(kData.colorTitle, 101 | style: KConstantTextstyles.bold(fontSize: 12)), 102 | Text(kData.hexValue, 103 | style: KConstantTextstyles.light(fontSize: 12)), 104 | ], 105 | )) 106 | : null, 107 | decoration: BoxDecoration( 108 | borderRadius: kData.palleteId == 0 109 | ? BorderRadius.only( 110 | topLeft: Radius.circular(12), 111 | bottomLeft: Radius.circular(12), 112 | ) 113 | : kData.palleteId == 4 114 | ? BorderRadius.only( 115 | bottomRight: Radius.circular(12), 116 | topRight: Radius.circular(12), 117 | ) 118 | : null, 119 | border: Border.all(), 120 | color: kData.color), 121 | ), 122 | ); 123 | } 124 | 125 | return Padding( 126 | padding: const EdgeInsets.all(8.0), 127 | child: Container( 128 | child: ListView.builder( 129 | itemCount: renderData.length, 130 | scrollDirection: Axis.horizontal, 131 | itemBuilder: (BuildContext context, int index) { 132 | return singlePallete(kData: renderData[index]); 133 | }, 134 | ), 135 | width: 400, 136 | height: 150, 137 | decoration: BoxDecoration( 138 | color: selectedPallete?.color, 139 | borderRadius: BorderRadius.circular(25)), 140 | ), 141 | ); 142 | } 143 | 144 | return Scaffold( 145 | backgroundColor: selectedPallete?.color ?? KConstantColors.bgColor, 146 | appBar: CustomAppBar( 147 | color: selectedPallete?.color ?? KConstantColors.bgColor, 148 | title: "Custom Pallete"), 149 | body: Center(child: buildPalleteBlock(renderData: data))); 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /44.flutter_dropdown_search.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class DropDownSearchNotifier extends ChangeNotifier { 7 | bool isExpanded = false; 8 | void toggleExpansion() { 9 | isExpanded = !isExpanded; 10 | notifyListeners(); 11 | } 12 | 13 | List queriedItems = []; 14 | List defaultOptions = ["Apple", "Cat", "Dog", "Puppy", "Coffee"]; 15 | 16 | String? query; 17 | void setQuery({required String value}) { 18 | query = value; 19 | notifyListeners(); 20 | debugPrint(query); 21 | } 22 | 23 | clearSearch() { 24 | query = null; 25 | queriedItems.clear(); 26 | notifyListeners(); 27 | } 28 | 29 | void queryData() { 30 | queriedItems.clear(); 31 | 32 | for (String item in defaultOptions) { 33 | if (query != null) { 34 | if (!queriedItems.contains(item)) { 35 | if (item.toLowerCase().contains(query!.toLowerCase())) { 36 | queriedItems.add(item); 37 | notifyListeners(); 38 | } 39 | } 40 | } 41 | } 42 | } 43 | 44 | String? selectedOption; 45 | 46 | void setOption({required String value}) { 47 | selectedOption = value; 48 | isExpanded = false; 49 | queriedItems.clear(); 50 | query = null; 51 | notifyListeners(); 52 | } 53 | } 54 | 55 | class FlutteCustomDropdownSearchWidget extends StatefulWidget { 56 | const FlutteCustomDropdownSearchWidget({super.key}); 57 | 58 | @override 59 | State createState() => 60 | _FlutteCustomDropdownSearchWidgetState(); 61 | } 62 | 63 | class _FlutteCustomDropdownSearchWidgetState 64 | extends State { 65 | TextEditingController textEditingController = TextEditingController(); 66 | 67 | @override 68 | Widget build(BuildContext context) { 69 | DropDownSearchNotifier dropDownSearchNotifier({required bool renderUI}) => 70 | Provider.of(context, listen: renderUI); 71 | 72 | bool isExpanded = dropDownSearchNotifier(renderUI: true).isExpanded; 73 | String? selectedOption = 74 | dropDownSearchNotifier(renderUI: true).selectedOption; 75 | 76 | bool isQueryAdded = dropDownSearchNotifier(renderUI: true).query != null; 77 | 78 | List items = isQueryAdded 79 | ? dropDownSearchNotifier(renderUI: true).queriedItems 80 | : dropDownSearchNotifier(renderUI: true).defaultOptions; 81 | 82 | expandedMenu() { 83 | return Column( 84 | children: [ 85 | Padding( 86 | padding: const EdgeInsets.all(8.0), 87 | child: TextField( 88 | style: KConstantTextstyles.light(fontSize: 12), 89 | onChanged: (val) { 90 | if (val != "") { 91 | dropDownSearchNotifier(renderUI: false).setQuery(value: val); 92 | dropDownSearchNotifier(renderUI: false).queryData(); 93 | } else { 94 | dropDownSearchNotifier(renderUI: false).clearSearch(); 95 | } 96 | }, 97 | decoration: InputDecoration( 98 | hintStyle: KConstantTextstyles.light(fontSize: 12), 99 | hintText: "Search anything"), 100 | controller: textEditingController, 101 | ), 102 | ), 103 | ListView.builder( 104 | shrinkWrap: true, 105 | itemCount: items.length, 106 | itemBuilder: (BuildContext context, int index) { 107 | return ListTile( 108 | onTap: () { 109 | dropDownSearchNotifier(renderUI: false) 110 | .setOption(value: items[index]); 111 | }, 112 | title: Text(items[index], 113 | style: KConstantTextstyles.light(fontSize: 12)), 114 | ); 115 | }, 116 | ), 117 | ], 118 | ); 119 | } 120 | 121 | return Scaffold( 122 | backgroundColor: KConstantColors.bgColor, 123 | appBar: CustomAppBar(title: "Flutter Custom Dropdown search"), 124 | body: Center( 125 | child: Align( 126 | child: Padding( 127 | padding: const EdgeInsets.symmetric(horizontal: 8), 128 | child: Container( 129 | width: 400, 130 | child: SingleChildScrollView( 131 | child: Column( 132 | children: [ 133 | Row( 134 | mainAxisAlignment: MainAxisAlignment.center, 135 | children: [ 136 | const SizedBox(width: 10), 137 | Text(selectedOption ?? "Select option", 138 | style: isExpanded 139 | ? KConstantTextstyles.bold(fontSize: 14) 140 | : KConstantTextstyles.light(fontSize: 12)), 141 | const Spacer(), 142 | IconButton( 143 | onPressed: () { 144 | dropDownSearchNotifier(renderUI: false) 145 | .toggleExpansion(); 146 | }, 147 | icon: Icon( 148 | isExpanded 149 | ? Icons.arrow_drop_up_outlined 150 | : Icons.arrow_drop_down_outlined, 151 | color: KConstantColors.whiteColor)) 152 | ], 153 | ), 154 | if (isExpanded) expandedMenu() 155 | ], 156 | ), 157 | ), 158 | decoration: BoxDecoration( 159 | borderRadius: BorderRadius.circular(12), 160 | color: KConstantColors.bgColorFaint, 161 | ), 162 | ), 163 | ), 164 | ), 165 | ), 166 | ); 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /45.flutter_checkbox_dark_theme.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class CheckboxNotifier extends ChangeNotifier { 7 | bool isChecked = true; 8 | 9 | void toggleCheckmark() { 10 | isChecked = !isChecked; 11 | notifyListeners(); 12 | } 13 | } 14 | 15 | class FlutterCheckboxDemoView extends StatelessWidget { 16 | const FlutterCheckboxDemoView({super.key}); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | CheckboxNotifier checkboxNotifier({required bool renderUI}) => 21 | Provider.of(context, listen: renderUI); 22 | 23 | bool isDark = checkboxNotifier(renderUI: true).isChecked; 24 | 25 | return Scaffold( 26 | backgroundColor: 27 | isDark ? KConstantColors.whiteColor : KConstantColors.bgColorFaint, 28 | appBar: CustomAppBar(title: "Flutter Checkbox"), 29 | body: Column( 30 | mainAxisAlignment: MainAxisAlignment.center, 31 | crossAxisAlignment: CrossAxisAlignment.center, 32 | children: [ 33 | ListTile( 34 | title: Text("Dark theme 🧛🏻‍♀️", 35 | style: KConstantTextstyles.bold( 36 | fontSize: 14, 37 | color: isDark 38 | ? KConstantColors.bgColor 39 | : KConstantColors.whiteColor)), 40 | subtitle: Text("Changes theme of app to dark version", 41 | style: KConstantTextstyles.light( 42 | fontSize: 12, 43 | color: isDark 44 | ? KConstantColors.bgColor 45 | : KConstantColors.whiteColor)), 46 | leading: Checkbox( 47 | value: !checkboxNotifier(renderUI: true).isChecked, 48 | onChanged: (val) { 49 | checkboxNotifier(renderUI: false).toggleCheckmark(); 50 | }), 51 | ) 52 | ], 53 | )); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /46.flutter_ios_calender_picker.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/cupertino.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 4 | import 'package:ig_posts/utils/colors.dart'; 5 | import 'package:intl/intl.dart'; 6 | import 'package:provider/provider.dart'; 7 | 8 | class CalenderNotifier extends ChangeNotifier { 9 | DateTime? pickedDate = DateTime.now(); 10 | 11 | void setPickedDate({required DateTime dateTime}) { 12 | pickedDate = dateTime; 13 | notifyListeners(); 14 | } 15 | } 16 | 17 | class FlutteCalenderPickerView extends StatelessWidget { 18 | const FlutteCalenderPickerView({super.key}); 19 | 20 | @override 21 | Widget build(BuildContext context) { 22 | CalenderNotifier calenderNotifier({required bool renderUI}) => 23 | Provider.of(context, listen: renderUI); 24 | 25 | String renderValue() { 26 | var format = DateFormat.yMd(); 27 | var dateString = 28 | format.format(calenderNotifier(renderUI: true).pickedDate!); 29 | return dateString; 30 | } 31 | 32 | return Scaffold( 33 | backgroundColor: KConstantColors.bgColor, 34 | appBar: CustomAppBar(title: "Flutter Calender Picker"), 35 | body: Column( 36 | mainAxisAlignment: MainAxisAlignment.center, 37 | crossAxisAlignment: CrossAxisAlignment.center, 38 | children: [ 39 | Text("Flutter 3 IOS date picker", 40 | style: KConstantTextstyles.bold(fontSize: 32)), 41 | SizedBox(height: 20), 42 | SizedBox( 43 | height: 200, 44 | width: 400, 45 | child: CupertinoTheme( 46 | data: CupertinoThemeData( 47 | textTheme: CupertinoTextThemeData( 48 | dateTimePickerTextStyle: TextStyle( 49 | color: KConstantColors.whiteColor, 50 | fontSize: 16)), 51 | ), 52 | child: CupertinoDatePicker( 53 | mode: CupertinoDatePickerMode.date, 54 | onDateTimeChanged: (val) { 55 | debugPrint(val.toString()); 56 | calenderNotifier(renderUI: false) 57 | .setPickedDate(dateTime: val); 58 | }, 59 | ))), 60 | SizedBox(height: 50), 61 | Container( 62 | child: Padding( 63 | padding: const EdgeInsets.all(8.0), 64 | child: Text(renderValue(), 65 | style: KConstantTextstyles.bold(fontSize: 32)), 66 | ), 67 | decoration: BoxDecoration( 68 | color: KConstantColors.bgColorFaint, 69 | borderRadius: BorderRadius.circular(12)), 70 | ) 71 | ])); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /47.flutter_navigation_rail_example.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class NavigationRailNotifier extends ChangeNotifier { 7 | int selectedIndex = 0; 8 | 9 | setNewIndex({required int value}) { 10 | selectedIndex = value; 11 | notifyListeners(); 12 | } 13 | } 14 | 15 | class FlutterNavigationRailView extends StatelessWidget { 16 | const FlutterNavigationRailView({super.key}); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | NavigationRailNotifier navigationRailNotifier({required bool renderUI}) => 21 | Provider.of(context, listen: renderUI); 22 | 23 | renderRailItem( 24 | {required IconData defIcon, 25 | required IconData selectedIcon, 26 | required String label}) { 27 | return NavigationRailDestination( 28 | icon: Icon(defIcon, color: KConstantColors.whiteColor), 29 | selectedIcon: Icon( 30 | selectedIcon, 31 | color: KConstantColors.blueColor, 32 | ), 33 | label: Text(label)); 34 | } 35 | 36 | renderHomeView() { 37 | int selectedIndex = navigationRailNotifier(renderUI: true).selectedIndex; 38 | 39 | buildContent({required String value}) { 40 | return Text("Render $value", 41 | style: KConstantTextstyles.bold(fontSize: 28)); 42 | } 43 | 44 | switch (selectedIndex) { 45 | case 0: 46 | { 47 | return buildContent(value: "Home View"); 48 | } 49 | 50 | case 1: 51 | { 52 | return buildContent(value: "Profile View"); 53 | } 54 | 55 | default: 56 | { 57 | return buildContent(value: "Settings View"); 58 | } 59 | } 60 | } 61 | 62 | return Scaffold( 63 | backgroundColor: KConstantColors.bgColor, 64 | appBar: CustomAppBar(title: "Navigation Rail"), 65 | body: Row( 66 | children: [ 67 | NavigationRail( 68 | backgroundColor: KConstantColors.bgColor, 69 | destinations: [ 70 | renderRailItem( 71 | defIcon: Icons.home, 72 | selectedIcon: Icons.home_filled, 73 | label: "Home"), 74 | renderRailItem( 75 | defIcon: Icons.person_2_outlined, 76 | selectedIcon: Icons.person, 77 | label: "Home"), 78 | renderRailItem( 79 | defIcon: Icons.settings, 80 | selectedIcon: Icons.settings, 81 | label: "Home"), 82 | ], 83 | onDestinationSelected: (val) { 84 | navigationRailNotifier(renderUI: false) 85 | .setNewIndex(value: val); 86 | }, 87 | selectedIndex: 88 | navigationRailNotifier(renderUI: true).selectedIndex), 89 | VerticalDivider(color: KConstantColors.whiteColor), 90 | SizedBox(width: 30), 91 | renderHomeView() 92 | ], 93 | )); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /48.flutter_spiderman_slider.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/utils/colors.dart'; 3 | import 'package:provider/provider.dart'; 4 | 5 | class SpiderManNotifier extends ChangeNotifier { 6 | double spidySense = 0; 7 | 8 | void setSpidySense({required double value}) { 9 | spidySense = value; 10 | notifyListeners(); 11 | debugPrint(spidySense.toString()); 12 | } 13 | } 14 | 15 | class FlutterSpidermanSliderView extends StatelessWidget { 16 | const FlutterSpidermanSliderView({super.key}); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | SpiderManNotifier spiderManNotifier({required bool renderUI}) => 21 | Provider.of(context, listen: renderUI); 22 | 23 | String renderSpiderman() { 24 | double value = spiderManNotifier(renderUI: true).spidySense; 25 | 26 | if (value == 0) { 27 | return "assets/spider.png"; 28 | } else if (value == 2.5) { 29 | return "assets/gwen.png"; 30 | } else if (value == 5) { 31 | return "assets/spiderman.png"; 32 | } else if (value == 7.5) { 33 | return "assets/peter.png"; 34 | } else { 35 | return "assets/miguel.png"; 36 | } 37 | } 38 | 39 | return Scaffold( 40 | backgroundColor: KConstantColors.bgColor, 41 | body: Column( 42 | mainAxisAlignment: MainAxisAlignment.center, 43 | crossAxisAlignment: CrossAxisAlignment.center, 44 | children: [ 45 | Text("Set spidy sense level", 46 | style: KConstantTextstyles.bold(fontSize: 26)), 47 | Text("Start the game with your favorite character", 48 | style: KConstantTextstyles.light( 49 | fontSize: 14, color: KConstantColors.textColor)), 50 | SizedBox(height: 15), 51 | Slider( 52 | activeColor: KConstantColors.redColor, 53 | min: 0, 54 | max: 10, 55 | divisions: 4, 56 | value: spiderManNotifier(renderUI: true).spidySense, 57 | onChanged: (val) { 58 | spiderManNotifier(renderUI: false).setSpidySense(value: val); 59 | }), 60 | SizedBox(height: 20), 61 | SizedBox( 62 | child: Image.asset(renderSpiderman()), 63 | height: 200, 64 | width: 500, 65 | ), 66 | SizedBox(height: 40), 67 | Container( 68 | height: 70, 69 | width: 200, 70 | child: Center( 71 | child: Text( 72 | spiderManNotifier(renderUI: true).spidySense == 0 73 | ? "Select level" 74 | : "Start game", 75 | style: KConstantTextstyles.light(fontSize: 12))), 76 | decoration: BoxDecoration( 77 | borderRadius: BorderRadius.circular(12), 78 | color: spiderManNotifier(renderUI: true).spidySense == 0 79 | ? KConstantColors.bgColorFaint 80 | : KConstantColors.redColor), 81 | ) 82 | ], 83 | ), 84 | ); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /49.flutter_color_drag_drop.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class ColorDragNotifier extends ChangeNotifier { 7 | Color defColor = KConstantColors.bgColorFaint; 8 | 9 | void setDraggedColor({required Color value}) { 10 | defColor = value; 11 | notifyListeners(); 12 | } 13 | } 14 | 15 | class FlutterColorDragAndDropView extends StatelessWidget { 16 | const FlutterColorDragAndDropView({super.key}); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | ColorDragNotifier colorDragNotifier({required bool renderUI}) => 21 | Provider.of(context, listen: renderUI); 22 | 23 | renderDragTarget() { 24 | return DragTarget( 25 | onAccept: (val) { 26 | colorDragNotifier(renderUI: false).setDraggedColor(value: val); 27 | }, 28 | builder: (context, candidateItems, rejectedItems) { 29 | return Container( 30 | height: 300, 31 | width: 400, 32 | decoration: BoxDecoration( 33 | color: colorDragNotifier(renderUI: true).defColor, 34 | borderRadius: BorderRadius.circular(12)), 35 | ); 36 | }, 37 | ); 38 | } 39 | 40 | renderColorToDrop() { 41 | _colorBlock({required Color color}) { 42 | return LongPressDraggable( 43 | data: color, 44 | dragAnchorStrategy: pointerDragAnchorStrategy, 45 | child: Container( 46 | height: 100, 47 | width: 100, 48 | decoration: BoxDecoration( 49 | color: color, borderRadius: BorderRadius.circular(12))), 50 | feedback: SizedBox( 51 | height: 100, 52 | width: 100, 53 | child: Image.asset("assets/brush.png"), 54 | )); 55 | } 56 | 57 | return Row( 58 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 59 | children: [ 60 | _colorBlock(color: KConstantColors.redColor), 61 | _colorBlock(color: KConstantColors.blueColor), 62 | _colorBlock(color: KConstantColors.whiteColor), 63 | _colorBlock(color: KConstantColors.textFieldTextColor), 64 | ], 65 | ); 66 | } 67 | 68 | return Scaffold( 69 | backgroundColor: KConstantColors.bgColor, 70 | appBar: CustomAppBar(title: "Flutter Custom Color Dropper"), 71 | body: Center( 72 | child: Column( 73 | mainAxisAlignment: MainAxisAlignment.center, 74 | crossAxisAlignment: CrossAxisAlignment.center, 75 | children: [ 76 | renderDragTarget(), 77 | SizedBox(height: 50), 78 | renderColorToDrop() 79 | ], 80 | ), 81 | ), 82 | ); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /50.flutter_modern_item_section.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class BrowseSectionNotifier extends ChangeNotifier { 7 | bool expandMore = false; 8 | 9 | void toggleExpansion() { 10 | expandMore = !expandMore; 11 | notifyListeners(); 12 | } 13 | } 14 | 15 | class ModernBrowseSectionView extends StatelessWidget { 16 | const ModernBrowseSectionView({super.key}); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | BrowseSectionNotifier browseSectionNotifier({required bool renderUI}) => 21 | Provider.of(context, listen: renderUI); 22 | 23 | renderSmallItems() { 24 | smallItemBlock() { 25 | return Padding( 26 | padding: const EdgeInsets.all(8.0), 27 | child: Container( 28 | child: Column( 29 | mainAxisAlignment: MainAxisAlignment.center, 30 | children: [ 31 | SizedBox( 32 | width: 120, 33 | height: 100, 34 | child: Image.asset("assets/drink_2.png")), 35 | SizedBox(height: 10), 36 | Text("Data", style: KConstantTextstyles.light(fontSize: 12)) 37 | ], 38 | ), 39 | decoration: BoxDecoration( 40 | color: KConstantColors.bgColorFaint, 41 | borderRadius: BorderRadius.circular(12)), 42 | ), 43 | ); 44 | } 45 | 46 | return SizedBox( 47 | width: 500, 48 | height: 180, 49 | child: ListView.builder( 50 | scrollDirection: Axis.horizontal, 51 | itemCount: 5, 52 | itemBuilder: (BuildContext context, int index) { 53 | return smallItemBlock(); 54 | }, 55 | ), 56 | ); 57 | } 58 | 59 | renderLargeItems() { 60 | largeItemBlock() { 61 | return Padding( 62 | padding: const EdgeInsets.all(8.0), 63 | child: Container( 64 | child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [ 65 | Padding( 66 | padding: const EdgeInsets.all(8.0), 67 | child: SizedBox( 68 | width: 120, 69 | height: 80, 70 | child: Image.asset("assets/drink_2.png")), 71 | ), 72 | SizedBox(height: 10), 73 | Column( 74 | mainAxisAlignment: MainAxisAlignment.start, 75 | crossAxisAlignment: CrossAxisAlignment.start, 76 | children: [ 77 | Text("Data", style: KConstantTextstyles.bold(fontSize: 12)), 78 | Text("Some more data", 79 | style: KConstantTextstyles.light(fontSize: 12)) 80 | ], 81 | ) 82 | ]), 83 | decoration: BoxDecoration( 84 | color: KConstantColors.bgColorFaint, 85 | borderRadius: BorderRadius.circular(12))), 86 | ); 87 | } 88 | 89 | return ListView.builder( 90 | itemCount: 5, 91 | shrinkWrap: true, 92 | itemBuilder: (BuildContext context, int index) { 93 | return largeItemBlock(); 94 | }, 95 | ); 96 | } 97 | 98 | return Scaffold( 99 | backgroundColor: KConstantColors.bgColor, 100 | appBar: CustomAppBar(title: "Modern Browse Section"), 101 | body: Column( 102 | children: [ 103 | ListTile( 104 | title: 105 | Text("Products", style: KConstantTextstyles.bold(fontSize: 28)), 106 | subtitle: Text("Checkout items from our store", 107 | style: KConstantTextstyles.light(fontSize: 16)), 108 | trailing: TextButton( 109 | child: Text( 110 | !browseSectionNotifier(renderUI: true).expandMore 111 | ? "Show less" 112 | : "Browse more", 113 | style: KConstantTextstyles.light(fontSize: 12)), 114 | onPressed: () { 115 | browseSectionNotifier(renderUI: false).toggleExpansion(); 116 | }, 117 | ), 118 | ), 119 | SizedBox(height: 10), 120 | AnimatedCrossFade( 121 | firstChild: renderSmallItems(), 122 | secondChild: renderLargeItems(), 123 | crossFadeState: browseSectionNotifier(renderUI: true).expandMore 124 | ? CrossFadeState.showFirst 125 | : CrossFadeState.showSecond, 126 | duration: Duration(seconds: 1)) 127 | ], 128 | ), 129 | ); 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /51.flutter_advanced_social_media_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:font_awesome_flutter/font_awesome_flutter.dart'; 3 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 4 | import 'package:ig_posts/utils/colors.dart'; 5 | import 'package:provider/provider.dart'; 6 | 7 | class ButtonNotifier extends ChangeNotifier { 8 | bool isExpanded = false; 9 | 10 | void toggleButtonExapnsion() { 11 | isExpanded = !isExpanded; 12 | notifyListeners(); 13 | } 14 | } 15 | 16 | class FlutterSocialMediaButtonView extends StatelessWidget { 17 | const FlutterSocialMediaButtonView({super.key}); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | ButtonNotifier buttonNotifier({required bool renderUI}) => 22 | Provider.of(context, listen: renderUI); 23 | 24 | showDefaultButton() { 25 | return GestureDetector( 26 | onTap: () { 27 | buttonNotifier(renderUI: false).toggleButtonExapnsion(); 28 | }, 29 | child: Container( 30 | height: 70, 31 | width: 220, 32 | child: Center( 33 | child: Text("Checkout my socials 🚀", 34 | style: KConstantTextstyles.bold(fontSize: 14))), 35 | decoration: BoxDecoration( 36 | color: KConstantColors.bgColorFaint, 37 | borderRadius: BorderRadius.circular(12)), 38 | ), 39 | ); 40 | } 41 | 42 | showExpandedButton() { 43 | return GestureDetector( 44 | onTap: () { 45 | buttonNotifier(renderUI: false).toggleButtonExapnsion(); 46 | }, 47 | child: Container( 48 | height: 70, 49 | width: 260, 50 | child: Center( 51 | child: Row( 52 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 53 | children: [ 54 | Icon(FontAwesomeIcons.twitter, color: KConstantColors.whiteColor), 55 | Icon(FontAwesomeIcons.facebook, 56 | color: KConstantColors.whiteColor), 57 | Icon(FontAwesomeIcons.instagram, 58 | color: KConstantColors.whiteColor), 59 | Icon(FontAwesomeIcons.linkedin, color: KConstantColors.whiteColor) 60 | ], 61 | )), 62 | decoration: BoxDecoration( 63 | color: KConstantColors.bgColorFaint, 64 | borderRadius: BorderRadius.circular(12)), 65 | ), 66 | ); 67 | } 68 | 69 | return Scaffold( 70 | backgroundColor: KConstantColors.bgColor, 71 | appBar: CustomAppBar(title: "Custom Social Media Button"), 72 | body: Center( 73 | child: AnimatedCrossFade( 74 | secondCurve: Curves.easeInExpo, 75 | firstCurve: Curves.easeInCubic, 76 | firstChild: showDefaultButton(), 77 | secondChild: showExpandedButton(), 78 | crossFadeState: buttonNotifier(renderUI: true).isExpanded 79 | ? CrossFadeState.showSecond 80 | : CrossFadeState.showFirst, 81 | duration: Duration(seconds: 1)), 82 | )); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /53.flutter_quick_data_selector.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:provider/provider.dart'; 5 | 6 | class SelectorNotifier extends ChangeNotifier { 7 | String? selectedItem; 8 | void setSelectedItem(String item) { 9 | selectedItem = item; 10 | notifyListeners(); 11 | } 12 | } 13 | 14 | class ModernDataSelectorView extends StatelessWidget { 15 | const ModernDataSelectorView({super.key}); 16 | 17 | @override 18 | Widget build(BuildContext context) { 19 | const kColor = Color.fromRGBO(106, 0, 244, 1); 20 | 21 | SelectorNotifier selectorNotifier({required bool renderUI}) => 22 | Provider.of(context, listen: renderUI); 23 | 24 | List menuItems = ['Swap', 'Liquidity', 'Discover']; 25 | 26 | Center renderHorizontalSelector() { 27 | createItem({required String itemTitle}) { 28 | bool isSelected = 29 | selectorNotifier(renderUI: true).selectedItem == itemTitle; 30 | 31 | return GestureDetector( 32 | onTap: () { 33 | selectorNotifier(renderUI: false).setSelectedItem(itemTitle); 34 | }, 35 | child: Padding( 36 | padding: const EdgeInsets.all(8.0) 37 | .add(EdgeInsetsDirectional.only(end: 10)), 38 | child: Container( 39 | width: 100, 40 | decoration: BoxDecoration( 41 | color: isSelected ? kColor : KConstantColors.bgColorFaint, 42 | borderRadius: BorderRadius.circular(10)), 43 | child: Center( 44 | child: Padding( 45 | padding: const EdgeInsets.all(8.0), 46 | child: Text(itemTitle, 47 | style: KConstantTextstyles.light(fontSize: 12)), 48 | ), 49 | ), 50 | ), 51 | ), 52 | ); 53 | } 54 | 55 | return Center( 56 | child: Container( 57 | child: SizedBox( 58 | width: 370, 59 | child: ListView.builder( 60 | scrollDirection: Axis.horizontal, 61 | itemCount: menuItems.length, 62 | itemBuilder: (BuildContext context, int index) { 63 | return createItem(itemTitle: menuItems[index]); 64 | }, 65 | ), 66 | ), 67 | height: 50, 68 | decoration: BoxDecoration( 69 | color: KConstantColors.bgColorFaint, 70 | borderRadius: BorderRadius.circular(12)), 71 | ), 72 | ); 73 | } 74 | 75 | return Scaffold( 76 | backgroundColor: KConstantColors.bgColor, 77 | appBar: CustomAppBar(color: kColor, title: "Quick Data Selector"), 78 | body: Column( 79 | mainAxisAlignment: MainAxisAlignment.start, 80 | crossAxisAlignment: CrossAxisAlignment.start, 81 | children: [ 82 | SizedBox(height: 30), 83 | renderHorizontalSelector(), 84 | SizedBox(height: 30), 85 | Text(selectorNotifier(renderUI: true).selectedItem ?? "", 86 | style: KConstantTextstyles.bold(fontSize: 30)), 87 | SizedBox(height: 10), 88 | Text( 89 | "Lorem ipsum dolor sit amet. Et impedit molestiae rem voluptatem perspiciatis et quia voluptatum? 33 saepe quas ab quam doloremque non magnam enim et magnam accusantium et dolore ipsam vel neque necessitatibus in dolore temporibus. Qui vitae iure et facere asperiores est perspiciatis eaque. Ut voluptates omnis vel tempora pariatur vel velit suscipit et labore iusto sed nulla porro. A internos vero 33 consequatur pariatur quo laboriosam enim ut consectetur sequi. Et reiciendis quod sed tempore delectus est iste officiis et labore sint ut quia magni eos nesciunt autem et dignissimos autem. Qui assumenda possimus id quidem voluptas et molestiae natus ut maxime corrupti. Ea enim reprehenderit sit obcaecati numquam a nostrum voluptatem qui consectetur cupiditate qui dignissimos architecto non fugit quis. Qui illum quibusdam est illo corrupti quo tenetur nihil.", 90 | style: KConstantTextstyles.light(fontSize: 14)) 91 | ], 92 | ), 93 | ); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /54.dribble_dropdown_menu.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:ig_posts/season_2/63.transperant_design_pattern.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:ig_posts/utils/dimensions.dart'; 5 | import 'package:provider/provider.dart'; 6 | import 'package:sizer/sizer.dart'; 7 | import 'package:ig_posts/utils/font_size.widget.dart'; 8 | 9 | class MenuOption { 10 | final String title; 11 | final String description; 12 | 13 | const MenuOption({required this.title, required this.description}); 14 | } 15 | 16 | List options = [ 17 | MenuOption(title: "Pictures", description: "Please add some more data"), 18 | MenuOption(title: "Videos", description: "Please add some more data"), 19 | MenuOption(title: "Audio", description: "Please add some more data"), 20 | MenuOption(title: "Other", description: "Please add some more data"), 21 | ]; 22 | 23 | class DribbleDropdownMenuNotifier extends ChangeNotifier { 24 | bool isExpanded = false; 25 | void toggleMenuExpansion() { 26 | isExpanded = !isExpanded; 27 | notifyListeners(); 28 | } 29 | } 30 | 31 | class FlutterDribbleMenuDropDownView extends StatelessWidget { 32 | const FlutterDribbleMenuDropDownView({super.key}); 33 | 34 | @override 35 | Widget build(BuildContext context) { 36 | DribbleDropdownMenuNotifier dribbleDropdownMenuNotifier( 37 | {required bool renderUI}) => 38 | Provider.of(context, listen: renderUI); 39 | 40 | bool isExpanded = dribbleDropdownMenuNotifier(renderUI: true).isExpanded; 41 | 42 | baseMenuButton() { 43 | return GestureDetector( 44 | onTap: () { 45 | dribbleDropdownMenuNotifier(renderUI: false).toggleMenuExpansion(); 46 | }, 47 | child: Padding( 48 | padding: const EdgeInsets.all(0.0), 49 | child: Container( 50 | height: 8.h, 51 | width: 40.w, 52 | child: Center( 53 | child: Row( 54 | mainAxisAlignment: MainAxisAlignment.center, 55 | children: [ 56 | Text("Content", 57 | style: KConstantTextstyles.bold( 58 | fontSize: FontSize.kMedium + 8, 59 | color: KConstantColors.bgColor)), 60 | hSizedBox2, 61 | Icon(!isExpanded ? Icons.arrow_drop_down : Icons.arrow_drop_up, 62 | size: 30) 63 | ], 64 | )), 65 | decoration: BoxDecoration( 66 | border: isExpanded 67 | ? Border.all(width: 5, color: KConstantColors.blueColor) 68 | : null, 69 | color: KConstantColors.whiteColor, 70 | borderRadius: BorderRadius.circular(12)), 71 | ), 72 | ), 73 | ); 74 | } 75 | 76 | showMenuOptions() { 77 | optionBlock({required MenuOption menuOption}) { 78 | return Container( 79 | child: Padding( 80 | padding: const EdgeInsets.all(8.0), 81 | child: Column( 82 | mainAxisAlignment: MainAxisAlignment.start, 83 | crossAxisAlignment: CrossAxisAlignment.start, 84 | children: [ 85 | Text(menuOption.title, 86 | style: KConstantTextstyles.bold( 87 | fontSize: FontSize.kMedium + 8, 88 | color: KConstantColors.bgColor)), 89 | Text(menuOption.description, 90 | style: KConstantTextstyles.light( 91 | fontSize: FontSize.kMedium + 4, 92 | color: KConstantColors.bgColor)) 93 | ], 94 | ), 95 | ), 96 | ); 97 | } 98 | 99 | return AnimatedOpacity( 100 | opacity: isExpanded ? 1 : 0, 101 | curve: Curves.ease, 102 | duration: const Duration(seconds: 1), 103 | child: Container( 104 | width: 70.w, 105 | child: MediaQuery.removePadding( 106 | context: context, 107 | removeBottom: true, 108 | removeTop: true, 109 | child: ListView.builder( 110 | itemCount: options.length, 111 | shrinkWrap: true, 112 | itemBuilder: (BuildContext context, int index) { 113 | return optionBlock(menuOption: options[index]); 114 | })), 115 | decoration: BoxDecoration( 116 | color: KConstantColors.whiteColor, 117 | borderRadius: BorderRadius.circular(12)), 118 | ), 119 | ); 120 | } 121 | 122 | return Scaffold( 123 | backgroundColor: KConstantColors.bgColor, 124 | appBar: CustomAppBar(color: Colors.pink, title: "Dribble DropDown Menu"), 125 | body: Container( 126 | width: 100.w, 127 | child: Padding( 128 | padding: const EdgeInsets.all(8.0), 129 | child: Column( 130 | mainAxisAlignment: MainAxisAlignment.start, 131 | crossAxisAlignment: CrossAxisAlignment.center, 132 | children: [ 133 | vSizedBox3, 134 | baseMenuButton(), 135 | vSizedBox1, 136 | showMenuOptions() 137 | ], 138 | ), 139 | ), 140 | ), 141 | ); 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /57. flutter_blur_background.dart: -------------------------------------------------------------------------------- 1 | import 'dart:ui'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:ig_posts/utils/colors.dart'; 4 | import 'package:ig_posts/utils/custom_buttons.dart'; 5 | import 'package:ig_posts/utils/dimensions.dart'; 6 | import 'package:ig_posts/utils/font_size.widget.dart'; 7 | import 'package:ig_posts/utils/text_styles.dart'; 8 | 9 | showBlurDialogBox( 10 | {required String title, 11 | String? description, 12 | required Function() actionTap, 13 | required BuildContext context}) { 14 | return showDialog( 15 | context: context, 16 | builder: (context) { 17 | return BackdropFilter( 18 | filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), 19 | child: AlertDialog( 20 | actions: [ 21 | Row( 22 | mainAxisAlignment: MainAxisAlignment.end, 23 | children: [ 24 | CustomRoundedButton( 25 | radius: 50, 26 | backgroundColor: KConstantColors.bgColorFaint, 27 | width: 30, 28 | onTap: () { 29 | Navigator.pop(context); 30 | }, 31 | label: "No"), 32 | hSizedBox2, 33 | CustomRoundedButton( 34 | backgroundColor: KConstantColors.redColor, 35 | width: 30, 36 | radius: 50, 37 | onTap: () { 38 | actionTap(); 39 | }, 40 | label: "Yes") 41 | ], 42 | ) 43 | ], 44 | backgroundColor: KConstantColors.bgColor, 45 | shape: RoundedRectangleBorder( 46 | borderRadius: BorderRadius.circular(25)), 47 | title: Text(title, 48 | style: KCustomTextStyle.kBold(context, FontSize.kMedium + 2)), 49 | content: Text(description ?? "This action cannot be undone.👀", 50 | style: KCustomTextStyle.kMedium(context, FontSize.kMedium)), 51 | )); 52 | }); 53 | } 54 | 55 | class FlutterShowBlurBackgroundView extends StatelessWidget { 56 | const FlutterShowBlurBackgroundView({super.key}); 57 | 58 | @override 59 | Widget build(BuildContext context) { 60 | return Scaffold( 61 | floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, 62 | floatingActionButton: Text("Content by @abhishvek", 63 | style: KConstantTextstyles.light(fontSize: 12)), 64 | backgroundColor: KConstantColors.bgColor, 65 | body: Center( 66 | child: Column( 67 | children: [ 68 | Image.network( 69 | "https://img.freepik.com/free-photo/forest-landscape_71767-127.jpg"), 70 | vSizedBox1, 71 | PrimaryActionButton( 72 | radius: 25, 73 | onTap: () { 74 | showBlurDialogBox( 75 | title: "Exit Flamingo?", 76 | actionTap: () {}, 77 | context: context); 78 | }, 79 | label: "Tap here"), 80 | ], 81 | ), 82 | ), 83 | ); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /58. custom_theme_onboarding.dart: -------------------------------------------------------------------------------- 1 | import 'package:awesome_widgets/awesome_widgets.dart'; 2 | import 'package:flutter/gestures.dart'; 3 | import 'package:flutter/material.dart'; 4 | import 'package:font_awesome_flutter/font_awesome_flutter.dart'; 5 | import 'package:provider/provider.dart'; 6 | import 'package:sizer/sizer.dart'; 7 | 8 | // 1. PLEASE ADD A STAR TO THIS REPOSITORY 9 | // 2. FOLLOW ME ON INSTAGRAM : https://www.instagram.com/abhishvek/ 10 | // 3. SUBSCRIBE MY YOUTUBE CHANNEL : https://www.youtube.com/channel/UCIxJGxcB4pSrIvuv8FyuqUA 11 | 12 | class OnboardNotifier extends ChangeNotifier { 13 | String authType = "login"; 14 | 15 | setAuthType({required String kValue}) { 16 | authType = kValue; 17 | notifyListeners(); 18 | } 19 | } 20 | 21 | class OnBoardUI extends StatelessWidget { 22 | const OnBoardUI({Key? key}) : super(key: key); 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | ThemeNotifier themeNotifier = 27 | Provider.of(context, listen: true); 28 | Color dark = KConstantColors.bgColor; 29 | Color light = KConstantColors.whiteColor; 30 | OnboardNotifier onboardNotifier({required bool renderUI}) => 31 | Provider.of(context, listen: renderUI); 32 | return Sizer(builder: ((context, orientation, deviceType) { 33 | return MaterialApp( 34 | theme: 35 | ThemeData(backgroundColor: themeNotifier.isDark ? dark : light), 36 | debugShowCheckedModeBanner: false, 37 | home: Scaffold( 38 | floatingActionButton: FloatingActionButton( 39 | onPressed: null, 40 | backgroundColor: Colors.deepPurpleAccent, 41 | child: Icon( 42 | Icons.arrow_forward_ios, 43 | color: KConstantColors.inverseConditionalColor( 44 | context: context), 45 | )), 46 | body: Column( 47 | children: [ 48 | AwesomeDimensions.vSizedBox3, 49 | Padding( 50 | padding: const EdgeInsets.all(8.0), 51 | child: GestureDetector( 52 | onTap: () { 53 | themeNotifier.toggleTheme(); 54 | }, 55 | child: ClipRRect( 56 | child: Container( 57 | decoration: BoxDecoration( 58 | color: Colors.deepPurpleAccent, 59 | borderRadius: BorderRadius.circular(16)), 60 | child: Image.asset("assets/images/onboard.png"))), 61 | ), 62 | ), 63 | AwesomeDimensions.vSizedBox3, 64 | Text("Discover your\n dream job here!", 65 | textAlign: TextAlign.center, 66 | style: KCustomTextStyle.kBold( 67 | context, 68 | 30, 69 | KConstantColors.inverseConditionalColor( 70 | context: context))), 71 | AwesomeDimensions.vSizedBox2, 72 | Text( 73 | "Explore the most demanding jobs\n out there from the entire technology world!", 74 | textAlign: TextAlign.center, 75 | style: KCustomTextStyle.kMedium( 76 | context, 77 | 12, 78 | KConstantColors.inverseConditionalColor( 79 | context: context))), 80 | AwesomeDimensions.vSizedBox3, 81 | AwesomeDimensions.vSizedBox1, 82 | Container( 83 | width: 400, 84 | height: 50, 85 | child: Row( 86 | children: [ 87 | AwesomeButton.roundedIconButton( 88 | titleTextstyle: KCustomTextStyle.kMedium( 89 | context, 90 | 10, 91 | KConstantColors.conditionalColor( 92 | context: context)), 93 | onTap: () { 94 | onboardNotifier(renderUI: false) 95 | .setAuthType(kValue: "login"); 96 | }, 97 | width: 200, 98 | radius: 15, 99 | backgroundColor: 100 | onboardNotifier(renderUI: true) 101 | .authType == 102 | "login" 103 | ? Colors.deepPurpleAccent 104 | : KConstantColors.inverseConditionalColor( 105 | context: context), 106 | title: "Login"), 107 | AwesomeButton.roundedIconButton( 108 | titleTextstyle: KCustomTextStyle.kMedium( 109 | context, 110 | 10, 111 | KConstantColors.conditionalColor( 112 | context: context)), 113 | onTap: () { 114 | onboardNotifier(renderUI: false) 115 | .setAuthType(kValue: "signup"); 116 | }, 117 | width: 200, 118 | radius: 15, 119 | backgroundColor: 120 | onboardNotifier(renderUI: true) 121 | .authType == 122 | "signup" 123 | ? Colors.deepPurpleAccent 124 | : KConstantColors.inverseConditionalColor( 125 | context: context), 126 | title: "Signup"), 127 | ], 128 | ), 129 | decoration: BoxDecoration( 130 | color: KConstantColors.inverseConditionalColor( 131 | context: context), 132 | borderRadius: BorderRadius.circular(15)), 133 | ), 134 | AwesomeDimensions.vSizedBox3, 135 | ], 136 | ), 137 | backgroundColor: 138 | KConstantColors.conditionalColor(context: context))); 139 | })); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /59. flutter_parallax_effect.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:sensors_plus/sensors_plus.dart'; 4 | 5 | class FlutterParallaxCardEffectView extends StatelessWidget { 6 | const FlutterParallaxCardEffectView({Key? key}) : super(key: key); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return const Scaffold(body: ParallaxCardWidget()); 11 | } 12 | } 13 | 14 | class ParallaxCardWidget extends StatefulWidget { 15 | const ParallaxCardWidget({Key? key}) : super(key: key); 16 | 17 | @override 18 | State createState() => _ParallaxCardWidgetState(); 19 | } 20 | 21 | class _ParallaxCardWidgetState extends State { 22 | double? _accelerometerXAxis; 23 | late final StreamSubscription _streamSubscription; 24 | 25 | @override 26 | void initState() { 27 | super.initState(); 28 | _streamSubscription = accelerometerEvents.listen( 29 | (AccelerometerEvent event) { 30 | setState(() { 31 | _accelerometerXAxis = event.x; 32 | }); 33 | }, 34 | ); 35 | } 36 | 37 | @override 38 | void dispose() { 39 | super.dispose(); 40 | _streamSubscription.cancel(); 41 | } 42 | 43 | @override 44 | Widget build(BuildContext context) { 45 | return Builder( 46 | builder: (BuildContext context) { 47 | return ClipRRect( 48 | borderRadius: BorderRadius.circular(10), 49 | child: Stack( 50 | alignment: Alignment.center, 51 | children: [ 52 | AnimatedPositioned( 53 | curve: Curves.easeIn, 54 | duration: const Duration(milliseconds: 100), 55 | left: 0, 56 | right: _accelerometerXAxis != null 57 | ? (-320 + _accelerometerXAxis! * 30) 58 | : -320, 59 | child: Image.asset( 60 | 'assets/space4.jpg', 61 | fit: BoxFit.contain, 62 | )), 63 | const Center( 64 | child: SizedBox( 65 | height: 200, 66 | width: 200, 67 | child: CircleAvatar( 68 | backgroundImage: AssetImage('assets/profile.png')), 69 | ), 70 | ), 71 | const Positioned( 72 | top: 250, 73 | child: Text("Hey there!", 74 | style: 75 | TextStyle(fontWeight: FontWeight.bold, fontSize: 40))) 76 | ], 77 | ), 78 | ); 79 | }, 80 | ); 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Source code of my instagram posts 2 | 3 | 4 | --------------------------------------------------------------------------------