Wednesday, 8 April 2020

DateField in Flutter Made Easy

What you probably did if you already have a DateField in your Flutter project is to create it from scratch! But did you know that you could use this package to simplify your life a lot?

First, as usual, just add it to your pubspec.yaml file.
dependencies:
   date_field: ^0.1.2
   ...

Now after a little pub get you should be able to access the package content!
First, let’s just try to display a simple DateField in our view. There are two important parameters:
  1. onDateSelected which is triggered whenever the user picks a date!
  2. selectedDate which will be the date displayed in the field, if it is null, it will display a placeholder.
So a simple implementation would give us the following:
DateTime selectedData;...Widget buid(...) {
...return DateField(
    onDateSelected: (DateTime value) {
      setState(() {
        selectedData = value;
      });
     },
     selectedDate: selectedData,
  );
And the result should look like:


DateField in FlutterDateField in Flutter

Now that we saw the basis,
If you want your user to pick a date within a specified range, you should make use of the firstDate and lastDate parameters.
Example :
DateTime selectedData;...Widget buid(...) {
...return DateField(
    onDateSelected: (DateTime value) {
      setState(() {
        selectedData = value;
      });
     },
     firstDate: DateTime(2020, 3, 8),
     lastDate: DateTime(2020, 3, 20),
     selectedDate: selectedData,
  );
And now when the user picks a date, the dialog will look like that:

and even more further…
Now let’s see how we can customize this DateField, for that we have three interesting parameters:
  1. decoration: which allows us to completely customize the field decoration.
  2. label: which can be used to rename the field.
  3. dateFormat: which can be used to change the way the date is shown.
Long story short, here is an example of how to combine those three parameters:
DateTime selectedData;...Widget buid(...) {
...return DateField(
    onDateSelected: (DateTime value) {
      setState(() {
        selectedData = value;
      });
     },
     decoration: InputDecoration(
       border: OutlineInputBorder()
     ),
     label: 'My date field',
     dateFormat: DateFormat.yMd(),
     selectedDate: selectedData,
  );
And the result is a field in a different style:

DateField in Flutter










Wednesday, 11 September 2019

LearnFlutter

Here is the List available for Learn Flutter very Easily.

you can get all types flutter tutorials from this links.
The list of links are very useful for the flutter beginners.
Come on, Just open this Website.the flutter tutorial is quite complete.Here are Some tutorials that i have summarized


The links are given below


  1. Introduction Flutter : https://fluttertutorial.in/introduction/
  2. Install Flutter : https://fluttertutorial.in/installation/
  3. Coding Style : https://fluttertutorial.in/flutter-coding-style/
  4. Login With Validation : https://fluttertutorial.in/flutter-login-with-validation/
  5. Sign Up With Validation : https://fluttertutorial.in/flutter-sign-up-with-validation/
  6. Profile Design : https://fluttertutorial.in/flutter-profile-design/
  7. Widget : https://fluttertutorial.in/flutter-widgets/
  8. State Ful & State Less : https://fluttertutorial.in/stateful-widget-stateless-widget-for-flutter/
  9. Camera & Image Gallery : https://fluttertutorial.in/select-image-galary-or-camera-in-flutter/
  10. ListView : https://fluttertutorial.in/list-view-in-flutter/
  11. Dropdown : https://fluttertutorial.in/drop-down-in-flutter/
  12. Tab : https://fluttertutorial.in/tab-in-flutter/
  13. Radio List Title : https://fluttertutorial.in/radiolisttitle-in-flutter/
  14. Tab Bottom Slider : https://fluttertutorial.in/tabbottomslider-in-flutter/
  15. Drawer : https://fluttertutorial.in/commondrawer-upload-in-flutter/
  16. Popup Menu : https://fluttertutorial.in/popupmenu-in-flutter/
  17. Popup Menu Radio List : https://fluttertutorial.in/popupmenu-radiolist-in-flutter/
  18. Create First Flutter : https://fluttertutorial.in/how-to-create-first-flutter-app/
  19. Interview Question : https://fluttertutorial.in/flutter-interview-questions/
  20. Grid View : https://fluttertutorial.in/gridview-in-flutter/
  21. List View With Checkbox : https://fluttertutorial.in/listview-with-checkbox-in-flutter/
  22. List View With Like : https://fluttertutorial.in/listview-with-like-unlike-in-flutter/
  23. List View With Flip Card : https://fluttertutorial.in/listview-with-flipcard-in-flutter/
  24. List View Using Card : https://fluttertutorial.in/listview-using-card-in-flutter/
  25. Remove Extra Space In AppBar : https://fluttertutorial.in/removing-extra-space-appbar-in-flutter/
  26. Expansion List : https://fluttertutorial.in/expansionlist-in-flutter/
  27. Bottom Layout : https://fluttertutorial.in/bottom-layout-in-flutter/
  28. Local Database : https://fluttertutorial.in/local-database-in-flutter/
  29. Curved Bar Navigation : https://fluttertutorial.in/curved-bar-navigation-in-flutter/
  30. Default Tab Indivator : https://fluttertutorial.in/defaulttabindicator-in-flutter/
  31. Vertical Tab : https://fluttertutorial.in/verticaltab-in-flutter/
  32. RxDart : https://fluttertutorial.in/rxdart-in-flutter/
  33. Stream Builder : https://fluttertutorial.in/streambuilder-in-flutter/
  34. Bottom Navigation Bar : https://fluttertutorial.in/bottom-navigation-bar-in-flutter/
  35. Popup Menu : https://fluttertutorial.in/popup-menu-in-flutter/
  36. Bottom Sheet : https://fluttertutorial.in/bottomsheet-in-flutter/
  37. CheckBox List Title : https://fluttertutorial.in/checkboxlisttitle-using-list-in-flutter/
  38. Round Button Shape : https://fluttertutorial.in/round-button-shape-in-flutter/
  39. Year Month Picker : https://fluttertutorial.in/year-month-picker-in-flutter/
  40. Base64 To Circle ImageView : https://fluttertutorial.in/base64-to-circle-imageview-in-flutter/
  41. Counter Event : https://fluttertutorial.in/counter-event-in-flutter/
  42. Bloc Event Login : https://fluttertutorial.in/bloc-event-login-and-list-api-call/
  43. ListView Inside ListView : https://fluttertutorial.in/listview-inside-listview-in-flutter/
  44. DataTable : https://fluttertutorial.in/datatable-in-flutter/
  45. Multiple Image Upload With MultiPart : https://fluttertutorial.in/multiple-image-upload-using-multipart-in-flutter/
  46. Material App : https://fluttertutorial.in/material-app-in-flutter/
  47. Toast Equinox : https://fluttertutorial.in/toast-flutter-equinox/
  48. Dialog Design : https://fluttertutorial.in/dialog-design-in-flutter/
  49. List View Search : https://fluttertutorial.in/listview-serch-in-flutter/
  50. Notification Structure In Firebase : https://fluttertutorial.in/notification-structure-in-firebase/
  51. Sticky Header : https://fluttertutorial.in/stickyheader-in-flutter/
  52. Pagination : https://fluttertutorial.in/pagination-in-flutter/
  53. List : https://fluttertutorial.in/list-in-flutter/
  54. Stream Controller : https://fluttertutorial.in/stream-controller-in-flutter/
  55. Get Data From API : https://fluttertutorial.in/get-data-from-api/
  56. How To Succes Mobile App Dev : https://fluttertutorial.in/how-to-success-mobile-app-development/
  57. Shared Preferences : https://fluttertutorial.in/flutter-shared-preferences/
  58. Listview Animation : https://fluttertutorial.in/listview-animation-in-flutter/
  59. Flexible Weight Sum : https://fluttertutorial.in/flexible-weight-sum-in-flutter/
  60. Animated List : https://fluttertutorial.in/animatedlist-flutter/
  61. Progress Bar : https://fluttertutorial.in/flutter-progressbar/
  62. Animated Stram List : https://fluttertutorial.in/animated-stram-list-in-flutter/
  63. List View Click Animation : https://fluttertutorial.in/listview-click-animation-in-flutter/
  64. Button Bar : https://fluttertutorial.in/buttonbar-in-flutter/
  65. Absorb Pointer : https://fluttertutorial.in/absorbpointer-flutter/
  66. Listview Swipe : https://fluttertutorial.in/listview-dismissible-listview-swipe-in-flutter/
  67. Sign & Release APK : https://fluttertutorial.in/flutter-sign-or-release-apk-android/
  68. Tab Dynamic : https://fluttertutorial.in/tab-dynamic-in-flutter/
  69. Animated Page View : https://fluttertutorial.in/animated-pageview-controller-in-flutter/
  70. Image Slider Page View : https://fluttertutorial.in/image-slider-pageview-in-flutter/
  71. Slider Page : https://fluttertutorial.in/slider-page-in-flutter/
  72. Hydrated Bloc : https://fluttertutorial.in/hydrated-bloc-in-flutter/
  73. Bloc Pattern Event : https://fluttertutorial.in/bloc-pattern-event-in-flutter/
  74. Video URL Thumnail : https://fluttertutorial.in/video-url-thumbnail-in-flutter/
  75. Chat Bubble : https://fluttertutorial.in/chat-bubble-in-flutter/
  76. Shared Preferences Util : https://fluttertutorial.in/flutter-shared-preferences-util/
  77. Search In App Bar : https://fluttertutorial.in/search-in-appbar-in-flutter/
  78. Bottom Tab Bar : https://fluttertutorial.in/bottom-tab-bar-in-flutter/
  79. Calendar : https://fluttertutorial.in/calendar-in-flutter/
  80. Image Blur : https://fluttertutorial.in/image-colorfilter-or-image-blur-in-flutter/
  81. Animation Zoom : https://fluttertutorial.in/animation-zoom-in-zoom-out-continue-in-flutter/
  82. Date Picker Horizontal : https://fluttertutorial.in/datepicker-horizontal-current-date-to-next-7-days-in-flutter/
  83. Quiz UI : https://fluttertutorial.in/quiz-ui-in-flutter/
  84. Search UI : https://fluttertutorial.in/search-ui-in-flutter/
  85. Shoping App : https://fluttertutorial.in/how-to-create-flutter-shopping-app/
  86. Bottom Bar Custom : https://fluttertutorial.in/naviagtion-bar-bottom-bar-custom-in-flutter/
  87. Category Dialog : https://fluttertutorial.in/category-dialog-in-flutter/
  88. Scroll View Custom : https://fluttertutorial.in/custom-scrollview-in-flutter/
  89. List View Click Option Animation : https://fluttertutorial.in/flutter-listview-click-option-animation/
  90. List View Timer : https://fluttertutorial.in/flutter-listview-timer-update-every-second/
  91. Multi Select Chip : https://fluttertutorial.in/multi-select-chip-in-flutter/
  92. Back Page Get Result : https://fluttertutorial.in/flutter-back-page-get-result/
  93. Click : https://fluttertutorial.in/flutter-click/
  94. Visibility : https://fluttertutorial.in/flutter-visibility/
  95. SH1 Get Key : SH1 Get Key in Flutter
  96. Google Sign In : https://fluttertutorial.in/google-sign-in-flutter/
  97. Silver Grid & Silver List : https://fluttertutorial.in/slivergrid-and-silverlist-in-flutter/
  98. Fancy Bottom Bar : https://fluttertutorial.in/fancy-bottom-bar-in-flutter/
  99. Bottom Animation : https://fluttertutorial.in/button-animation-in-flutter/
  100. Search Layout : https://fluttertutorial.in/search-layout-in-flutter/
  101. UI Design : https://fluttertutorial.in/ui-design-in-flutter/
  102. Geo Locator : https://fluttertutorial.in/geolocator-in-flutter/
  103. Page View Indicator : https://fluttertutorial.in/pageview-indicator-in-flutter/
  104. Bottom Navigation Dot : https://fluttertutorial.in/bottom-navigation-dot-in-flutter/
  105. Group List View : https://fluttertutorial.in/grouplistview-in-flutter/
  106. Floating Ribbon : https://fluttertutorial.in/floating-ribbon-in-flutter/
  107. Text Form Field : https://fluttertutorial.in/textformfield-clear-and-set-text-value-in-flutter/
  108. Side Bar : https://fluttertutorial.in/sidebar-in-flutter/
  109. Multiple Line : https://fluttertutorial.in/multiple-line-in-flutter/
  110. Row & Column Map : https://fluttertutorial.in/row-and-column-map-use-in-flutter/
  111. Bloc Pattern : https://fluttertutorial.in/bloc-pattern-in-flutter/
  112. BloC Pattern Event : https://fluttertutorial.in/bloc-pattern-event-in-flutter-2/
  113. Flury Drawer : https://fluttertutorial.in/flurry-drawer-in-flutter/
  114. Scroll Shadow : https://fluttertutorial.in/scroll-shadow-in-flutter/
  115. Story View : https://fluttertutorial.in/story-view-in-flutter/
  116. BSEV Pattern : https://fluttertutorial.in/bsev-pattern-in-flutter/
  117. Toast : https://fluttertutorial.in/toast-in-flutter/
  118. Dialog : https://fluttertutorial.in/dialog-in-flutter/
  119. Text Widget : https://fluttertutorial.in/text-widget-in-flutter/
  120. Text Field : https://fluttertutorial.in/textfield-in-flutter/
  121. Rotated Box : https://fluttertutorial.in/rotatedbox-in-flutter/
  122. User Interface : https://fluttertutorial.in/flutter-ui/
  123. User Interface 2 : https://fluttertutorial.in/flutter-ui-2/
  124. Circular Backgroud Painter : https://fluttertutorial.in/circular-background-painter-in-flutter/
  125. Qr Code : https://fluttertutorial.in/qr-code-in-flutter/
  126. Barcode Scan : https://fluttertutorial.in/barcode-scan-in-flutter/
  127. Form Builder : https://fluttertutorial.in/form-builder-in-flutter/
  128. Hidden Drawer : https://fluttertutorial.in/hidden-drawer-in-flutter/
  129. QR Scan & Generate : https://fluttertutorial.in/qr-scan-and-generate-in-flutter/
  130. Fab Circular Menu : https://fluttertutorial.in/fab-circular-menu-in-flutter/
  131. List View Animation : https://fluttertutorial.in/listview-animation-in-flutter-2/
  132. Local Database SameBase : https://fluttertutorial.in/local-database-samebase-in-flutter/
  133. Date Picker Horizontal : https://fluttertutorial.in/datepicker-horizontal-in-flutter/
  134. Floating Menu : https://fluttertutorial.in/floating-menu-in-flutter/
  135. GraphQL : https://fluttertutorial.in/graphql-in-flutter/
  136. Stack Layout : https://fluttertutorial.in/stack-layout-in-flutter/
  137. Bottom Navigation : https://fluttertutorial.in/bottom-navigation-in-flutter/

Friday, 6 September 2019

Pretty QR code with round edges



pretty_qr_code

Pretty QR code for Flutter. You can round the edges with parameter or use the standard view.





Features

Created with QR dart

Example

import 'package:flutter/material.dart';
import 'package:pretty_qr_code/pretty_qr_code.dart';
import 'package:qr/qr.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: PrettyQr(
                size: 200,
                data: '12423577',
                errorCorrectLevel: QrErrorCorrectLevel.M,
                roundEdges: true)),
      ),
    );
  }
}
Dart

GitHub

Pretty QR code with round edges. — Read More
Latest commit to the master branch on 9-5-2019
Download as zip




Flutter Material Color Picker



Flutter Material Color Picker

Material Color picker is a Flutter widget, that can be customizable.
By default, it's Material Colors, but you can define your own colors.
You can also use CircleColor widget to display color in your app. Example, you can set the color picker in a dialog and display the selected color in a ListTile, for settings.

How to use it

These examples use a static color for 'selectedColor', but you can use a variable (state)

Add to your Flutter project

You just need to add flutter_material_color_picker as a dependency in your pubspec.yaml file.
flutter_material_color_picker: ^1.0.3
YAML

Import

import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';
Dart

Basic

MaterialColorPicker(
    onColorChange: (Color color) {
        // Handle color changes
    },
    selectedColor: Colors.red
)
Dart

Listen main color changes

MaterialColorPicker(
    onColorChange: (Color color) {
        // Handle color changes
    },
    onMainColorChange: (ColorSwatch color) {
        // Handle main color changes
    },
    selectedColor: Colors.red
)
Dart

Disallow Shades

MaterialColorPicker(
    allowShades: false, // default true
    onMainColorChange: (ColorSwatch color) {
        // Handle main color changes
    },
    selectedColor: Colors.red
)
Dart
If allowShades is set to false then only main colors will be shown and allowed to be selected.
onColorChange will not be called, use onMainColorChange instead.

Custom colors

In this example, custom colors are a list of Material Colors (class who extend of ColorSwatch).
But you can create your own list of ColorSwatch.
MaterialColorPicker(
    onColorChange: (Color color) {
        // Handle color changes
    },
    selectedColor: Colors.red,
    colors: [
        Colors.red,
        Colors.deepOrange,
        Colors.yellow,
        Colors.lightGreen
    ],
)
Dart

Screenshot

Color selection

There is two step, first choose the main color, and when you press it, you have to choose a shade of the main color.
By default it's all Material Colors, but you can define custom colors, a list of ColorSwatch.



Example of usages

You can insert the color picker into a Dialog



Display color

You can use CircleColor widget, to display the selected color into your settings for example.


GitHub

Material color picker, you can customize colors. Selection in two step, first main color and after shades. — Read More
Latest commit to the master branch on 9-5-2019
Download as zip