Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Vladimir Romashkin💙 Profile picture
@romashkin_dev
Aug 29, 2021 • 23 tweets • 21 min read • Read on X
Scrolly
#Flutter #Dart #CSS
CSS vs Flutter.
Flutter the containers with shadows.
How to create BoxShadow with CSS box-shadow?
21 amazing containers with CSS box-shadow in Flutter for the next app.
🧵👇
1⃣ #CSS vs #Flutter
CSS box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
2⃣ #CSS vs #Flutter
CSS box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
3⃣ #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
4⃣ #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5⃣ #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
6⃣ #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
7⃣ #CSS vs #Flutter
CSS box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
8⃣ #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
9⃣ #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
🔟 #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
1⃣1⃣ #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
rgba(0, 0, 0, 0.12) 0px -12px 30px,
rgba(0, 0, 0, 0.12) 0px 4px 6px,
rgba(0, 0, 0, 0.17) 0px 12px 13px,
rgba(0, 0, 0, 0.09) 0px -3px 5px;
1⃣2⃣ #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
1⃣3⃣ #CSS vs #Flutter
CSS box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
1⃣4⃣ #CSS vs #Flutter
CSS box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
1⃣5⃣ #CSS vs #Flutter
CSS box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
1⃣6⃣ #CSS vs #Flutter
CSS box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
1⃣7⃣ #CSS vs #Flutter
CSS box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
1⃣8⃣ #CSS vs #Flutter
CSS box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
1⃣9⃣ #CSS vs #Flutter
CSS box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
2⃣0⃣ #CSS vs #Flutter
CSS box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
2⃣1⃣ #CSS vs #Flutter
CSS box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
#CSS vs #Flutter
If you love CSS and Flutter, follow me and get smarter.
twitter.com/intent/follow?…

Retweet this tweet.
Write the number of the container you like below.
Gist with source code 👇
gist.github.com/fladago/96e0e0…

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Vladimir Romashkin💙

Vladimir Romashkin💙 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @romashkin_dev

Vladimir Romashkin💙 Profile picture
Sep 4, 2021
The best books for app development with #Dart and #Flutter.
English, German, Russian, Italian, French
1
Dart Apprentice by Jonathan Sande @Suragch1 & Matt Galloway @mattjgalloway
Published by raywenderlich.com @rwenderlich
Version: First Edition
Language: Dart 2.12.2
Editor: VS Code 1.54
English | 2021 | ISBN: 978-1950325320 | 295 Pages
raywenderlich.com/books/dart-app…
2
Flutter Cookbook by Simone Alessandria (github.com/simoales), Brian Kayfitz @bkayfitz
English | 2021 | ISBN: 9781838823382 | 646 Pages
Publication date: June 2021
Publisher Packt @PacktPub
packtpub.com/product/flutte…
Read 31 tweets
Vladimir Romashkin💙 Profile picture
Sep 2, 2021
#Flutter #Dart #CSS
CSS vs Flutter.
How to embed CSS examples in the text widget.
My success story.
Of course, you can find 15 awesome examples below.
🧵👇 Image
1 #Flutter #Dart #CSS
When I found an example, I thought, why not?
Shadows in CSS has this syntax:
// text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];
// text-shadow: 0 2px 1px #747474,
// rgbo: 0px -4px 10px rgba(255,255,255,0.3);
2 #Flutter #Dart #CSS
Each shadow in the Text widget has 5 lines of code.
Shadow(
color: Color(0xFFFFFFFF),
offset: Offset(1.0, 1.0),
blurRadius: 1.0,
),
It's all good, but I broke my head when I found the example with 26 shadows.
WTF... 🤯🤯🤯
Read 21 tweets
Vladimir Romashkin💙 Profile picture
Aug 20, 2021
Let's study #Flutter.
How to remember new buttons in Flutter?
Old RaisedButton >>> ElevatedButton
Old FlatButton >>> TextButton
Old OutlinedButton >>> OutlinedButton
Three examples below & in DartPad🧵👇
1
ElevatedButton(
onPressed: () {},
child: const Text('ElevatedButton'),
style: ElevatedButton.styleFrom(
primary: Colors.yellow, //background button color
onPrimary: Colors.green, //text color
),
),
2
TextButton(
onPressed: () {},
child: const Text('TextButton'),
style: TextButton.styleFrom(
backgroundColor: Colors.yellow,
primary: Colors.deepOrangeAccent,
padding: const EdgeInsets.all(10),
),
),
Read 5 tweets
Vladimir Romashkin💙 Profile picture
Aug 20, 2021
#flutter
Let's study #Dart.
final, const & late in 3+ steps.
🧵👇
1/1
 What is the difference between final and const?
A constant variable must be initialized at the time of declaration. It's a compile-time constant. A final variable can be initialized later, but only once when the first time it’s used.
1/2
 void main() {
final int x;
const int y = 1;
x = 8; // ok
y = 2; // error: Constant variables can't be assigned a value.
x = 9; // error: The final variable 'a' can only be set once.
}
Read 9 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(