Making images more responsive

README.md

@@ -4,7 +4,9 @@
 
 We can type `stless` and `stful` and we get Autocomplete Suggestion to generate Stateless Flutter Widget or Stateful Flutter Widget Respectively.
 
-![statful](assets/01stlesstful.gif)
+
+
+<img src="assets/01stlesstful.gif" height ="600" width = "850">
 
 ## #Day2 `If Null` Operator (`??`)
 
@@ -16,33 +18,41 @@ It also has shorthand assignment when it's null.
 
 `abc??=5 //assigns 5 to abc if it's null`
 
-![null](assets/02ifnull.png)
+
+
+<img src="assets/02ifnull.png" height = "900">
 
 ## #Day3 Inner Function
 
 We can define a function inside another function.
 
 This is to encapsulate the inner function from everything else outside the outer function.
 
-![functions](assets/03functions.png)
+
+<img src="assets/03functions.png" height = "500">
 
 ## #Day4 ..Cascade..Chaining..Fluent API
 
 We can chain method/member calls without returning `this` from **method(), getter() and setter()** using cascade operator (..)
 
 try in [Dartpad](https://dartpad.dartlang.org/290e17306b745ed83b9242653ca55041)
 
-![cascade](assets/04cascadebefore.png)
+
+<img src="assets/04cascadebefore.png" height = "900">
 
 Can be replaced with
 
-![cascadeafter](assets/04cascadeafter.png)
+
+
+<img src="assets/04cascadeafter.png" height = "600">
 
 ## #Day5 Dart `data class`
 
 Dart does not support data class by default, but with plugins, we can simply generate data class (`copyWith()`,`fromMap()`, `toMap()`, `Named Constructor`, `toString()`,`hashCode()` & `equals()` methods implemented by the tool).
 
-### `🚨❗️Caution❗️🚨` : **Your cursor should be inside the class that you want to generate data class.**
+### `🚨❗️Caution❗️🚨` 
+
+**Your cursor should be inside the class that you want to generate data class.**
 
 ![dataclass](assets/05dataclass.gif)
 

week03.md

@@ -14,7 +14,9 @@ but, Flexible uses `fit :FlexFit.loose` by default.
 
 **flex** = The factor of space taken from parent. Mostly not fully used if `flex: FlexFit.loose` used i.e. `Flexible`.
 
-![flex](assets/15flexibleexpanded.png)
+
+<img src="assets/15flexibleexpanded.png" height ="800">
+
 
 If you fully read the following image, you will fully understand the difference between `Flexible` and `Expanded`
 ![expanded](assets/15expandedvsflexible.png)
@@ -51,7 +53,9 @@ You can play with values of snap, floating, pinned etc to get desired effect
 
 ## #Day18 What the Key
 
-![keys](assets/18keys.gif)
+
+
+<img src="assets/18keys.gif" height ="600">
 
 Ever wondered why we need GlobalKey(children : GlobalObjectKey, LabeledGlobalKey), LocalKey(children: ObjectKey, ValueKey & UniqueKey) right?
 

week04.md

@@ -58,7 +58,7 @@ Ever wanted rectangular/stadium Fab with Notch?
 
 [try this code on your editor](https://gist.github.com/erluxman/fd442639bcaf84e14b31f70b00c48fe9)
 
-![rectangular notch](assets/24rectangularnotch.png)
+<img src="assets/24rectangularnotch.png" height ="600">
 
 ## #Day25 Google Fonts in flutter
 

week05.md

@@ -15,8 +15,11 @@ Use Wrap like you use Column or Row just give it's direction (either vertical or
         spacing: 20, //space between previous and next item
         runSpacing: 20, //space between new row or column
         );
+
 [try in codepen](https://codepen.io/erluxman/pen/YzyENpR)
-![wrap](assets/29wrap.gif)
+
+<img src="assets/29wrap.gif" height ="600">
+
 
 ## #Day30 Blur a Widget in Flutter
 
@@ -40,7 +43,9 @@ To blur a widget, put it below a BackdropFilter widget in stack.
 
 You will a blur like this.
 [play in codepen](https://codepen.io/erluxman/pen/xxwPJrY)
-![blur](assets/30blur.png)
+
+<img src="assets/30blur.png" height ="600">
+
 
 ## #Day31 Changing Theme Dynamically
 
@@ -197,10 +202,14 @@ VSCode: typing Open Dev Tools in command Pallet.
 
 Learining to use Dart Dev tool  is very 🚨important skill🚨 to have as a Flutter/dart developer.
 
-![Opening in Android Studio](assets/35as.png)
+
+<img src="assets/35as.png" height ="400">
+
 _Opening in Android Stuido_
 
-![vscode](assets/35vscode.png)
+
+<img src="assets/35vscode.png" height ="400">
+
 _Opening in VSCode_
 
 ![as](assets/35devtools.png)

week06.md

@@ -68,7 +68,10 @@ Then, Flutter will handle the rest.
           )
 [try in codepen](https://codepen.io/erluxman/pen/xxwJRBQ)
 
-![animatedswitcher](assets/37animatedswitcher.gif)
+
+
+
+<img src="assets/37animatedswitcher.gif" height ="750">
 
 ## #Day38 GestureDetector widget
 
@@ -103,7 +106,9 @@ All those callbacks behave like `onClick(){}` on Button.
 
 [try on codepen](https://codepen.io/erluxman/pen/wvKxVrE)
 
-![gesture](assets/38gesture.gif)
+
+
+<img src="assets/38gesture.gif" height ="750">
 
 ## #Day39 Package Animated Text Kit
 
@@ -124,7 +129,11 @@ animated_text_kit provides some cool ways to animate text appearences.
 
 [animated_text_kit package](https://pub.dev/packages/animated_text_kit#-installing-tab-)
 
-![animatedtext](assets/39animatetext.gif)
+
+
+
+
+<img src="assets/39animatetext.gif" height ="750">
 
 ## #Day40  5 Steps of AnimatedIcon
 
@@ -138,7 +147,9 @@ We can use AnimatedIcon in 5 simple steps.
 
 [play on codepen](https://codepen.io/erluxman/pen/PoPyNrM)
 
-![animatedicon](assets/40animatedicon.gif)
+
+
+<img src="assets/40animatedicon.gif" height ="750">
 
 ## #Day41 Path Provider( `path_provider package`) (common file locations in iOS and Android)
 
@@ -189,8 +200,12 @@ We can use ShapeBorder to give outline to widgets or Clip them on it's shape. Th
 
 [try in codepen](https://codepen.io/erluxman/pen/vYNQLPx)
 
-![shapeborder](assets/41shapeborder1.png)
-![shapeborder](assets/41shapeborder2.png)
+
+
+<img src="assets/41shapeborder1.png" height ="750">
+
+<img src="assets/41shapeborder2.png" height ="750">
+
 
 [___`Tips 1-7`___](README.md)
 [__`Tips 08-14`__](week02.md)

week07.md

@@ -105,7 +105,9 @@ From dart 2.3 onwards, we can use `collection if` and `collection for` operators
 
 [try on codepen](https://codepen.io/erluxman/pen/yLYGbdy)
 
-![collectionif](assets/44collectioniffor.png)
+
+
+ <img src="assets/44collectioniffor.png" height ="800">
 
 ## #Day45 tear-off vs lambda vs function call
 
@@ -118,6 +120,8 @@ From dart 2.3 onwards, we can use `collection if` and `collection for` operators
 2. ___`A lambda.`___
 
  ![lambda](assets/45lambda.png)
+
+
 
 ## #Day46 ColorFiltered Widget
 
@@ -134,7 +138,9 @@ ColorFiltered works with any widgets as child not just Image.
 
 [get the code](https://gist.github.com/erluxman/7b5c1dfec4461b147d9b00a86d080bb5)
 
-![filters](assets/46colorfiltered.gif)
+
+
+ <img src="assets/46colorfiltered.gif" height ="650">
 
 ## #Day47 ShaderMask Widget
 
@@ -161,7 +167,9 @@ Gradients can be easily converted to Shader with createShader() method.
         )
 [get the code](https://gist.github.com/erluxman/b6f1166ac19b7b2654ee2102c58a8837)
 
-![mask](assets/47mask.png)
+
+
+ <img src="assets/47mask.png" height ="650">
 
 ## #Day48 `synchronized` in dart
 
@@ -231,7 +239,8 @@ ___`Widget/Image()`___ -Inside-> ___`ClipRRect()`___ -Inside-> ___`Container()`_
         ),
 
 [try in codepen](https://codepen.io/erluxman/pen/abvxvOz)
-![circularimage](assets/49circularImage.png)
+
+ <img src="assets/49circularImage.png" height ="650">
 
 [___`Tips 1-7`___](README.md)
 [__`Tips 08-14`__](week02.md)

week08.md

@@ -1,5 +1,3 @@
-# Tips 50-56
-
 ## #Day 50 Use `a is! A` instead of `!(a is A)`
 
 Flutter has special keyword to check if an instance ___`is not a type`___.
@@ -57,7 +55,9 @@ ___`hide :`___ Hide only certain class & show everything else from it.
 
 `import 'dart:core' hide String;`
 
-![importsonsteroid](assets/52importonsteroid.png)
+
+
+<img src="assets/52importonsteroid.png" height ="800">
 
 ## #Day53 final vs const
 

week09.md

@@ -1,3 +1,4 @@
+
 # Tips 57 - 63
 
 ## #Day57 typedef
@@ -82,7 +83,9 @@ Even though flutter doesn't support any vector graphics out of the box, the pack
 
 [visit flutter_svg](https://pub.dev/packages/flutter_svg#-readme-tab-)
 
-![a](assets/60svg.png)
+<img src="assets/60svg.png" height ="800">
+
+
 
 ## #Day61 Using Flare Animations
 
@@ -110,7 +113,9 @@ Similar to vector graphics, Flutter doesn't support vector animation natively. [
 
 [Visit Flare and SVG sample](https://github.com/erluxman/FlutterSVGFlareDemo)
 
-![a](assets/61flare.gif)
+
+
+<img src="assets/61flare.gif" height ="800">
 
 ## #Day62 pubspec autocomplete
 
@@ -122,6 +127,8 @@ __`For VS code`__ : [Pubspec Assist](https://marketplace.visualstudio.com/items?
 :-------------------------:|:-------------------------:
 ![a](assets/62pubspectassist.gif)  |  ![a](assets/62FlutterEnhancement.gif)
 
+
+
 P.S. Flutter Enhancement Suite comes with a lot of other great features.
 
 ## #Day63 cached_network_image
@@ -149,7 +156,10 @@ It will make app feel faster and save network bandwidth.
 
 Image.network            |  CachedNetworkImage
 :-------------------------:|:-------------------------:
-![a](assets/63imagenetwork.gif)  |  ![a](assets/63cachednetworkimage.gif)
+<img src="assets/63imagenetwork.gif" height ="800"> | <img src="assets/63cachednetworkimage.gif" height ="800"> 
+
+
+
 
 [___`Tips 1-7`___](README.md)
 [__`Tips 08-14`__](week02.md)
@@ -168,3 +178,4 @@ Image.network            |  CachedNetworkImage
 [__`Tips 78-84`__](week12.md)
 [__`Tips 85-91`__](week13.md)
 [__`Tips 92-98`__](week14.md)
+

week10.md

@@ -44,6 +44,9 @@ __`To setup lint in Flutter :`__
 2. Add `analysis_options.yaml` in project root directory.
 ![lint](assets/65lint.png)
 
+
+
+
 3. Include `package:lint/analysis_options.yaml` inside `analysis_options.yaml` and add your custom rules.
 
         include: package:lint/analysis_options.yaml
@@ -180,7 +183,9 @@ Just give the animation `duration` & the updated `TextStyle`. `AnimatedDefaultTe
 
 [try in codepen](https://codepen.io/erluxman/pen/XWXKBJP)
 
-![animatedtext](assets/70textanim.gif)
+
+
+<img src="assets/70textanim.gif" height ="650">
 
 [___`Tips 1-7`___](README.md)
 [__`Tips 08-14`__](week02.md)

week11.md

@@ -5,7 +5,9 @@
 `MediaQuery` gives the information about screen like `height`, `width`, `pixels`, `notch size`, **Device scale factor & text scale factor set on setting**, `device theme light/dark` , system animation `enabled/disabled` etc.
 [try on codepen](https://codepen.io/erluxman/pen/xxZEZGG)
 
-![snapshot](assets/71mediaquery.png)
+
+
+<img src="assets/71mediaquery.png" height ="650">
 
 ## #Day72 Decimal points
 
@@ -17,7 +19,8 @@ Want to get desired number of digits after decimal?
 For convenience we can use extension functions.
 [try on dartpad](https://dartpad.dartlang.org/3bdfd6923d1e8788ed81eaae9e77655f)
 
-![decimal](assets/72decimal.png)
+
+<img src="assets/72decimal.png" height ="650">
 
 ## #Day73 String multiplication
 
@@ -26,7 +29,10 @@ You can multiply String like numbers.
     "Foo"*2 //Foo
     "Bar "*5 //Bar Bar Bar Bar Bar
 
-![stringmultiplication](assets/73stringmultiplication.png)
+
+
+<img src="assets/73stringmultiplication.png" height ="650">
+
 
 ## #Day74 enum values
 
@@ -71,6 +77,7 @@ A mixin cannot use another mixin.
 
 #### Conclusion : Use `mixin` if you want to reuse the behaviour and state of multiple classes
 
+
 ## #Day76 CustomPainter
 
 CustomPainter provides canvs to draw different shapes.
@@ -79,12 +86,16 @@ CustomPainter provides canvs to draw different shapes.
 2. Override paint(canvas,size) method and draw various shapes(circle,arc,rectangle,line etc) inside it.
 3. Add a CustomPaint widget  on screen and pass the CustomPainter as paint and it's size.
 
-![code ](assets/76paints.png)
+
+<img src="assets/76paints.png" height ="900">
 
 Output
 
-![emoji ](assets/76emoji.png)
-![emoji ](assets/76emojis.png)
+
+<img src="assets/76emoji.png" height ="600">
+
+<img src="assets/76emojis.png" height ="600">
+
 
 [try on codepen](https://codepen.io/erluxman/pen/YzwZpba)