• Stars
    star
    431
  • Rank 97,477 (Top 2 %)
  • Language
    Dart
  • License
    MIT License
  • Created over 2 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Introduction to flutter widgets: This repo will teach you some of the common widgets that are available in flutter SDK, & how to use them for UI design.

           

Widget of The Day

Introduction to flutter widgets: This repo will teach you some of the common widgets that are available in flutter SDK, & shows you how to use them for your UI design.
Playlist URL:

  1. YouTube
  2. YouTube [LinearGradient]
  3. YouTube [Card]
  4. YouTube [Clipper]
  5. YouTube [CustomPaint]
  6. YouTube [DataTable]
  7. YouTube [Hero_Animation]
  8. YouTube [Stepper_To_SelectableText]
  9. YouTube [ClipPath (Bezier Curves)]
  10. YouTube [InheritedWidget]

Widgets List:

  1. Container > Simple intro > Neumorphic design
  2. Expanded > flux > layout change inside Column & Row
  3. Column > mainAxisAlignment & crossAxisAlignment
    Row > alignment
  4. ListView > Builder > Instagram UI design
  5. SingleChildScrollView > scrollDirection > padding > physics
  6. Image.Asset > fit (BoxFit.cover) > place it inside a Container widget for rounded corners
  7. Gridview > Builder > crossAxisCount (no. of box in the horizontal)
  8. GestureDetector > onTap:()=>{'action'} > Keep functional logic separated from UI
  9. BottomNavBar > StateStatefulWidget > type: BottomNavigationBarType.fixed > List of pages
  10. AppBar > backgroundColor: Colors.transparent > leading (left positioned)> actions (right positioned)
  11. Drawer > Always in ListView > DrawerHeader > ListTile > endDrawer (drawer on right side)
  12. SliverAppBar > CustomScrollView > SliverAppBar > expandedHeight > SliverToBoxAdapter
    Property of SliverAppBar: flexibleSpace > floating (default 'false') > pinned (default 'false')
  13. TabBar > wrap Scaffold with 'DefaultTabController' > length (no. of items) > TabBar
    TabBarView > Container > wrap TabBarView with 'Expanded' for Container size
  14. AnimatedContainer > GestureDetector > onTap (activate animation) > duration (time to execute animation in 'second') > Container > Alignment
  15. MediaQuery > Height > Width > Aspect Ratio > Orientation
  16. AlertDialog > MaterialButton > onPressed:_showDialog > AlertDialog(title, content, actions) > CupertinoAlertDialog (for iOS device)
  17. Text > style > TextStyle > fontStyle: FontStyle.italic > fontWeight > theme (for setting a default style)
  18. RichText > TextSpan > default style > children > multiple 'TextSpan' widgets
  19. Timer > StatefulWidget > Text > MaterialButton > onPressed: _startCountDown > Timer.periodic
  20. PageView > controller > scrollDirection: Axis.vertical > different Post pages
  21. Stack > alignment: Alignment.center (default Alignment.topLeft)
  22. TextField > StatefulWidget > _textController > TextField > controller: _textController > decoration > onPressed > suffixIcon > _textController.clear() > Expanded > userPost
  23. AnimatedIcon > StatefulWidget > with SingleTickerProviderStateMixin > late AnimationController _animationController > Read the code
  24. Slider > StatefulWidget > Slider(value: value, onChanged: onChanged) > Many color parameters of the Slider widget
  25. DatePicker > StatefulWidget > DateTime variable > _showDatePicker > Read the code
  26. TimePicker > StatefulWidget > TimeOfDay variable > _showTimePicker > Read the code
  27. ListWheelScrollView > StatefulWidget > itemExtent > perspective > diameterRatio > physics: const FixedExtentScrollPhysics() > onSelectedItemChanged > Read the code
  28. LinearGradient > Container > decoration > BoxDecoration > gradient > LinearGradient
  29. ElevatedButton > style > ElevatedButton.styleFrom > primary: Colors.blue
    OutlinedButton
  30. FloatingActionButton
  31. RawMaterialButton > Use for custom fancy button
  32. IconButton
  33. Navigator > initialRoute > ElevatedButton > Navigator.pushNamed(context, '/first') > Navigator.pop(context)
  34. Card > shape: RoundedRectangleBorder > borderRadius: BorderRadius.circular(20) > Column > children[] > shadowColor > elevation
  35. Clipper > Custom Clipper > Quadratic Bezier Curve
  36. RotatedBox > quarterTurns: 3 > Each quarterTurns is ≡ 90°
  37. Transform > origin > transform
  38. Positioned > Stack > alignment > Positioned > 2 properties at a time
  39. CustomPaint > Watch the video
  40. ClipOval > Image.asset > height & width should be same > fit: BoxFit.cover
  41. ClipRRect > borderRadius > Image.asset
  42. ClipRect > Image.asset
  43. ClipPath > ClipPath > clipper: CustomClipPath() > Path getClip(Size size){} > shouldReclip(CustomClipper< Path> oldClipper)
  44. Radial & Sweep Gradient > Container > decoration > gradient> RadialGradient / SweepGradient
  45. StatefulWidget > createState() > initState() > didChangeDependencies() > didUpdateWidget() > deactivate() > dispose() > setState((){'actions'})
  46. Table > border > columnWidths > textDirection > children > TableRow > children
  47. DataTable > border > columnSpacing > onSelectAll > sortColumnIndex > sortAscending > columns > rows
  48. Placeholder > fallbackHeight > strokeWidth > color > strokeWidth
  49. GestureDetector & InkWell > GestureDetector > onTap | InkWell > OnTap
  50. Material > It can manipulate some properties of it's child widget
  51. Switches > ListTile > leading > Switch / Checkbox / Radio > value > onChanged > groupValue (only for Radio)
  52. DropDown&Popup > See the code
  53. HeroAnimation > tag: item in both pages
  54. AboutDialog > ElevatedButton > onPressed > showAboutDialog
  55. Stepper > int _currentStep = 0 > Stepper > Step (with title: & content:) > onStepTapped > currentStep: _currentStep > onStepContinue > onStepCancel
  56. FittedBox > Fit text inside a container
  57. show Search > AppBar > actions > IconButton > onPressed: () {showSearch()}
  58. .adaptive > Slider.adaptive > SwitchListTile.adaptive > Switch.adaptive > Icon(Icons.adaptive.share) > CircularProgressIndicator.adaptive()
  59. Scrollbar > isAlwaysShown: true > thickness: 10 > ListView.builder / GridView.builder
  60. ChoiceChip > ChoiceChip > avatar > label > selected > onSelected
  61. Wrap > Wrap > children:
  62. ExpansionTile > title > children: > ListTile
  63. RangeSlider > values > divisions > labels > onChanged:
  64. showModelBottomSheet > showModalBottomSheet > context: context, > builder: (BuildContext context) > return > SizedBox
  65. AnimatedCrossFade > firstChild > secondChild > crossFadeState > duration
  66. Flexible > flex > fit
  67. Spacer > flex: 1
  68. GridPaper > color: Colors.deepPurple
  69. InteractiveViewer > maxScale > child: Image.asset()
  70. CheckboxListTile > title > subtitle > value
  71. SelectableText > SelectableText > see code
  72. AnimatedPadding > padding: EdgeInsets.all(padValue) > duration
  73. RefreshIndicator > color > backgroundColor > onRefresh
  74. ImageFiltered > import 'dart:ui'; > ImageFiltered > imageFilter: ImageFilter.blur(sigmaX: 8),
  75. AspectRatio > aspectRatio: 3 / 2 > child
  76. ToggleButton > children:[] > isSelected > onPressed
  77. Physical Model > color > elevation
  78. Align > Container > child: > Align > alignment: Alignment(0.60, -0.80)
  79. SafeArea > Scaffold > body: > SafeArea
  80. PagerouteBuilder > check code
  81. Draggable > DragTarget > onAccept > builder
  82. BackdropFilter > Stack > Image.asset > Positioned > BackdropFilter > ImageFilter.blur()
  83. ReorderableListView > itemCount > onReorder > itemBuilder
  84. FadeTransition > FadeTransition > opacity: _animation!
  85. CircleAvatar > radius: > backgroundImage: AssetImage()
  86. Tooltip > message: > verticalOffset: > height: > Child:
  87. Visibility > visible: isVisible > child: Image.asset('')
  88. IndexedStack > index: index > children:
  89. Navigator 2.0 > See code
  90. Null Aware Operators > See code
  91. Cascade Operator > See code
  92. Inherited Widget > See code
  93. Fractionally Sizedbox
  94. Constrained Box > See code
  95. Cupertino Search > late TextEditingController textController > CupertinoSearchTextField > placeholder > controller
  96. Stateful Builder > builder: (context, internalState) > internalState(() { counter++;})
  97. Layout Builder > builder: (BuildContext context, BoxConstraints constraints){ return }
  98. Orientation Builder > builder: (context, orientation){}
  99. Platform Detect > import 'dart:io' show Platform;
  100. FutureBuilder > FutureBuilder > future: getData() > builder
  101. StreamBuilder > StreamBuilder > stream > initialData > builder
  102. ChangeNotifier > CNController extends ChangeNotifier > notifyListeners()
  103. ValueNotifier > final ValueNotifier< int> count = ValueNotifier< int>(0) > ValueListenableBuilder()
  104. InheritedNotifier > Read code
  105. Listener > Read code
  106. Builder > Read code
  107. PageView.builder > Read code
  108. AnimationBuilder > Read code
  109. SnackBar > Read code

Screenshots:

Row

More Repositories

1

package_of_the_day

Introduction to flutter packages: This repo will teach you some of the popular packages that are available in pub.dev, & how to use them for UI design.
Dart
401
star
2

getx_clean_architecture

This repo is an example of clean architecture using the GetX state-management solution.
Dart
158
star
3

scalable_app_architecture

This is a modular app architecture that can be scalable as the time passes. I will be using the BLoC state-management package.
C++
128
star
4

bloc_architecture_app

This is going to serve as a startup project for every app that I'll build on by using the BLoC state-management package
Dart
68
star
5

flutter_puzzle_hack

This game is for the "Flutter Puzzle Hack" contest, 2022. It is a simple slide puzzle game, where the player has to arrange the squares into sorted order.
Dart
59
star
6

kid_starter

This is an application for kids who want to learn the English alphabet, Numbers, and Colors names with accurate pronunciation.
Dart
39
star
7

sensor_packages

Introduction to sensor packages: This repo will teach you some of the popular sensor related packages that are available in pub.dev
Dart
22
star
8

bloc_concept

This repository is for understanding the core concepts of BLoC pattern in flutter.
Dart
15
star
9

zombieland

Instead of a simple counter app, the @FlutterDev team can provide a simple game like the one below. Thanks to the @rive_app team for their easy-to-use animation kit.
Dart
13
star
10

taja_khobor

It's a mobile application that will use the machine learning algorithm to personalize news according to individual tastes. In addition to that, it will provide comfort to your eyes by reading aloud newspaper in both Bangla & English.
Dart
8
star
11

flutter_multithreading

This repo is for understanding multithreading implementation in flutter ecosystem. Flutter, in its core, is a single-threaded SDK. But there is an option of multithreading for developers.
Dart
7
star
12

softcent_app

Your task is to create the app same as the UI given in the figma. For the images, use the mock API given below. Deadline: 4th April, 2022
Dart
7
star
13

Hackintosh_EliteBook_Folio_9470m

This is a tutorial for running macOS Mojave on Hp EliteBook Folio 9470m.
6
star
14

nilam

This is an auction application just like eBay. Using firebase as the backend for signup & sign-in functionality. In addition to that, it's a two pages application with user bid in input and count down view.
Dart
6
star
15

getx_tutorial

It's an introduction to one of the famous flutter package called "GetX": https://pub.dev/packages/get
Dart
6
star
16

tip_calculator

It's a UI challenge from "Frontend Mentor". This 'Tip Calculator' app can calculate the exact tip amount and the total amount shared per person in a group. It's two `Listener` widgets for calculating tip automatically in the background.
Dart
6
star
17

Real-Time-Water-Quality-Monitoring-and-Contamination-event-Detection-using-Machine-Learning

This was my final year project. It was a group project, with a total of three members. Here we implemented four sensors to detect the water quality of a storage tank. The user can see the real-time reading of the sensors using the Website & through the Android app.
JavaScript
6
star
18

Hackintosh-Legion-Y730_Y740

If you are a windows user and require macOS to learn XCode, then you can transform your windows machine into hackintosh machine. Remember, this tutorial is for educational purpose. I will be not responsible for any damage done to your device while installing macOS. Do at your own risk. This tutorial is only for Lenovo legion Y730/Y740. Back up your important files before starting. All files, that you require for macOS installation, are available in my GitHub page. So, let’s begin…
5
star
19

md-siam

4
star
20

Hackintosh_EliteBook_840_G5

This is a tutorial for running macOS Big Sur on Hp EliteBook 840 G5
4
star
21

flutter_adaptive_widgets

Adaptive widgets are a great way to keep the UI uniform in both Android & iOS platforms. This repo contains few of the adaptive widgets. But there are more to implement like: date picker, time picker, bottom tab bar etc.
Dart
4
star
22

hive_crud

This repo will teach you how to use hive package for storing data locally in your device. Hive is a lightweight and blazing fast key-value database written in pure Dart.
Dart
3
star
23

react_conf

This is the repository for the assessment task for the Mid_Level Flutter Developer role at Lemon Hive.
Dart
3
star
24

riverpod_concept

This repository is for learning different types of State management widgets found in flutter_riverpod
Dart
3
star
25

dhaka_stocks_price

This app uses 'cheerio' npm package to web scrap the official site of Dhaka Stock Exchange. In addition, it is connected to ParseServer for storing the scripted values.
JavaScript
3
star
26

provider_tutorial

It's an introduction to one of the famous flutter package called "provider" :https://pub.dev/packages/provider/install
Dart
3
star
27

flutter_localization

Localization in flutter using the intl package: https://pub.dev/packages/intl
Dart
3
star
28

bn_calculator

Bengali Numeric, in short, BN Calculator is designed with a custom neumorphic button class, with a custom button press sound. In addition to that, it has a beautiful dark theme, and a user can turn On/Off the dark theme using a custom animated button on the AppBar.
Dart
3
star
29

flutter_fonts

This repo will teach you how to use custom fronts that are available on the internet.
Dart
2
star
30

recipe_app

This is the repository for the assessment task for the Flutter Developer role at Battery Low Interactive Ltd.
Dart
2
star
31

flutter_tester

Introduction to flutter testing: This repo will teach you about testing in a flutter. It includes unit testing, widget testing & integration testing.
Dart
2
star
32

flutter_responsive_ui_design

This is a must know for every Flutter developer! Since Flutter is a cross platform framework, dealing with different screen sizes smoothly is essential
Dart
2
star
33

flutter_widget_lifecycle

Introduction to how the Stateful Widget Lifecycle works in detail and how to react to changes of widgets in Flutter.
Dart
2
star
34

easybank_landing_page

It's an UI challenge from "Frontend Mentor". URL https://www.frontendmentor.io/challenges/easybank-landing-page-WaUhkoDN
Dart
2
star
35

Legion_Y730_running_BigSur

If you are a windows user and require macOS to learn XCode, then you can transform your windows machine into the Hackintosh machine. Remember, this tutorial is for educational purpose. I will be not responsible for any damage done to your device while installing macOS. Do at your own risk. This tutorial is only for Lenovo legion Y730/Y740. Back up your important files before starting.
2
star
36

sqflite_crud

It is a simple journal application that stores user input into the device's storage using the package sqflite package: https://pub.dev/packages/sqflite
Dart
2
star
37

Legion_Y730_running_Catalina

If you are a windows user and require macOS to learn XCode, then you can transform your windows machine into the Hackintosh machine. Remember, this tutorial is for educational purpose. I will be not responsible for any damage done to your laptop while installing macOS. Do at your own risk.
2
star
38

FlutterUI---Emojis

Dart
1
star
39

High-Quality-PDF

People need high quality (no compresses) PDF file for research paper submission. This tutorial will teach you to create high quality PDF files using Acrobat Pro DC.
1
star
40

node_express_api

Making an API using NodeJS
JavaScript
1
star
41

Clima-Flutter

Dart
1
star
42

quizzler-flutter

Dart
1
star
43

online_shoppe_getx_tutorial

Dart
1
star
44

COVID19_data_scraping

This will scrap covid19 data from https://www.worldometers.info/coronavirus/
JavaScript
1
star
45

flash-chat-flutter

Dart
1
star
46

isar_crud

Isar is for local database storage in a Flutter application. Isar is No-SQL relational database.
Dart
1
star
47

new_ui_design_in_flutter

This repo will teach you the complex UI design using flutter. These designs are new and trending.
Dart
1
star
48

Prison-Management-System

It was a database management system, where we had to manage information of all the prisoners in a prison.
HTML
1
star
49

BullsEye_iOS

It is an iOS game using Swift 5, and SwiftUI framework
Swift
1
star
50

flutter_theme_shared_preferences

Storing theme data to local storage using Shared Preferences.
C++
1
star
51

bangladesh_map

It is an interactive map of Bangladesh. As you all know, Google Maps requires money to use, but my map is completely free of charge. You can use this map on your website to display information.
HTML
1
star
52

Mini-Drone-using-Arduino-mini-micro-controller-unit

A low cost drone using Arduino mini, DC motors, and a mobile battery. It can be controlled by an android application. The connection between the drone & the application is done by the Bluetooth module present in the Arduino mini
C++
1
star