-
Notifications
You must be signed in to change notification settings - Fork 253
Making images more responsive #38
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 33 commits
210a631
1b18915
8545650
656a969
5ba9e73
e363e17
3606828
78c68d2
1ac4002
b3b38e7
33fbf4d
0d250fe
94ddd44
e4dd489
505f504
7ae4f82
3621892
5e3d3c5
6f96618
f591836
afbcfc6
0e95532
fbfbb10
09c9c2c
bb5e998
b9f4f9d
ea1a655
acb1021
47bffc9
6a289fd
b7971f5
0d068b6
ede64e9
5f298b4
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,8 +15,10 @@ 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) | ||
|  | ||
|
|
||
| <img src="assets/29wrap.gif" height ="600"> | ||
|
|
||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 2 Empty line below |
||
| ## #Day30 Blur a Widget in Flutter | ||
|
|
||
|
|
@@ -40,7 +42,8 @@ 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) | ||
|  | ||
|
|
||
| <img src="assets/30blur.png" height ="600"> | ||
|
|
||
| ## #Day31 Changing Theme Dynamically | ||
|
|
||
|
|
@@ -197,10 +200,12 @@ 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. | ||
|
|
||
|  | ||
| <img src="assets/35as.png" height ="400"> | ||
|
|
||
| _Opening in Android Stuido_ | ||
|
|
||
|  | ||
| <img src="assets/35vscode.png" height ="400"> | ||
|
|
||
| _Opening in VSCode_ | ||
|
|
||
|  | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -68,7 +68,7 @@ Then, Flutter will handle the rest. | |
| ) | ||
| [try in codepen](https://codepen.io/erluxman/pen/xxwJRBQ) | ||
|
|
||
|  | ||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is perfect |
||
| <img src="assets/37animatedswitcher.gif" height ="750"> | ||
|
|
||
| ## #Day38 GestureDetector widget | ||
|
|
||
|
|
@@ -103,7 +103,7 @@ All those callbacks behave like `onClick(){}` on Button. | |
|
|
||
| [try on codepen](https://codepen.io/erluxman/pen/wvKxVrE) | ||
|
|
||
|  | ||
| <img src="assets/38gesture.gif" height ="750"> | ||
|
|
||
| ## #Day39 Package Animated Text Kit | ||
|
|
||
|
|
@@ -124,7 +124,7 @@ animated_text_kit provides some cool ways to animate text appearences. | |
|
|
||
| [animated_text_kit package](https://pub.dev/packages/animated_text_kit#-installing-tab-) | ||
|
|
||
|  | ||
| <img src="assets/39animatetext.gif" height ="750"> | ||
|
|
||
| ## #Day40 5 Steps of AnimatedIcon | ||
|
|
||
|
|
@@ -138,7 +138,7 @@ We can use AnimatedIcon in 5 simple steps. | |
|
|
||
| [play on codepen](https://codepen.io/erluxman/pen/PoPyNrM) | ||
|
|
||
|  | ||
| <img src="assets/40animatedicon.gif" height ="750"> | ||
|
|
||
| ## #Day41 Path Provider( `path_provider package`) (common file locations in iOS and Android) | ||
|
|
||
|
|
@@ -189,8 +189,9 @@ 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) | ||
|
|
||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 4 empty lines here, 3 extra |
||
|  | ||
|  | ||
| <img src="assets/41shapeborder1.png" height ="750"> | ||
|
|
||
| <img src="assets/41shapeborder2.png" height ="750"> | ||
|
|
||
| [___`Tips 1-7`___](README.md) | ||
| [__`Tips 08-14`__](week02.md) | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -105,7 +105,7 @@ From dart 2.3 onwards, we can use `collection if` and `collection for` operators | |
|
|
||
| [try on codepen](https://codepen.io/erluxman/pen/yLYGbdy) | ||
|
|
||
|  | ||
| <img src="assets/44collectioniffor.png" height ="800"> | ||
|
|
||
| ## #Day45 tear-off vs lambda vs function call | ||
|
|
||
|
|
@@ -118,7 +118,7 @@ From dart 2.3 onwards, we can use `collection if` and `collection for` operators | |
| 2. ___`A lambda.`___ | ||
|
|
||
|  | ||
|
|
||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. May be it should be changed as well?
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Are you referring to the image size?
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah..
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I meant extra empty lines |
||
| ## #Day46 ColorFiltered Widget | ||
|
|
||
| Want to apply filter to image or any widget? Use ColorFiltered widget like this. | ||
|
|
@@ -134,7 +134,7 @@ ColorFiltered works with any widgets as child not just Image. | |
|
|
||
| [get the code](https://gist.github.com/erluxman/7b5c1dfec4461b147d9b00a86d080bb5) | ||
|
|
||
|  | ||
| <img src="assets/46colorfiltered.gif" height ="650"> | ||
|
|
||
| ## #Day47 ShaderMask Widget | ||
|
|
||
|
|
@@ -161,7 +161,7 @@ Gradients can be easily converted to Shader with createShader() method. | |
| ) | ||
| [get the code](https://gist.github.com/erluxman/b6f1166ac19b7b2654ee2102c58a8837) | ||
|
|
||
|  | ||
| <img src="assets/47mask.png" height ="650"> | ||
|
|
||
| ## #Day48 `synchronized` in dart | ||
|
|
||
|
|
@@ -231,7 +231,8 @@ ___`Widget/Image()`___ -Inside-> ___`ClipRRect()`___ -Inside-> ___`Container()`_ | |
| ), | ||
|
|
||
| [try in codepen](https://codepen.io/erluxman/pen/abvxvOz) | ||
|  | ||
|
|
||
| <img src="assets/49circularImage.png" height ="650"> | ||
|
|
||
| [___`Tips 1-7`___](README.md) | ||
| [__`Tips 08-14`__](week02.md) | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -87,7 +87,7 @@ Using Flutter snippets helps gain speed and become productive by eliminating the | |
|
|
||
| [for vscode](https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets) | ||
|
|
||
|  | ||
| <img src="assets/87snippets.gif" height ="650"> | ||
|
|
||
| ## #Day88 Create Emoji FloatingActionButton | ||
|
|
||
|
|
@@ -107,7 +107,7 @@ FloatingActionButton( | |
|
|
||
| [try in codepen](https://codepen.io/erluxman/pen/vYLpgBo) | ||
|
|
||
|  | ||
| <img src="assets/88emojifab.gif" height ="800"> | ||
|
|
||
| ## #Day89 Run any task in a periodic interval with `Timer.periodic()` | ||
|
|
||
|
|
@@ -124,7 +124,7 @@ Timer.periodic(const Duration(seconds: 1), (Timer time) { | |
|
|
||
| [try on codepen](https://codepen.io/erluxman/pen/pogpqxX) | ||
|
|
||
|  | ||
| <img src="assets/89periodic.gif" height ="650"> | ||
|
|
||
| ## #Day90 Launcher Icon with ease | ||
|
|
||
|
|
@@ -189,7 +189,7 @@ PressableDough( | |
|
|
||
| [visit dough](https://pub.dev/packages/dough#-installing-tab-) | ||
|
|
||
|  | ||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I like this change if it looks good in real..
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I am sorry but I didn't understand what you meant.
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just replacing the md image tag with HTML image tag and not adding any extra empty lines or spaces. |
||
| <img src="assets/91doughh.gif" height ="800"> | ||
|
|
||
| [___`Tips 1-7`___](README.md) | ||
| [__`Tips 08-14`__](week02.md) | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the way I like it, perfect 👍🏻