Shamelessly stealing an idea from
@jacksonfall
and prompting GPT-4 to help me build a profitable business.
I'm going to start with the same prompt and do whatever it asks me to.
Let's goooooooo
I gave GPT-4 a budget of $100 and told it to make as much money as possible.
I'm acting as its human liaison, buying anything it says to.
Do you think it'll be able to make smart investments and build an online business?
Follow along 👀
#Flutter
Architect v1 is out!
I built a developer tool using
#GithubCopilot
to make Flutter development even faster.
- Quickly build nested widgets
- Click to copy common snippets
- Create multi-child layouts
The new SwiftUI-in-Flutter build is up!
✅ CupertinoApp
✅ CupertinoPageScaffold
✅ CupertinoDynamicColor
✅ CupertinoTextThemeData
✅ CupertinoListSection.insetGrouped
I was completely unaware of the depth of Cupertino support in
#Flutter
...it's pretty cool!
#Flutter
Tip:
You can add shadows to your UI using the PhysicalModel widget.
The PhysicalModel widget "creates a layer underneath your widget that represents the object casting the shadow"
@Fitzface
#Flutter
Tip:
When your device's keyboard is open, FloatingActionButtons are better doors🚪than windows🪟
Use this simple trick to hide you FABs whenever the keyboard is open so that it doesn't block the view of your TextFields.
#FlutterDev
#Mobile
Hi everyone!
Since the
#HustleGPT
movement is taking off 🚀 I decided to create a public repo to track everyone's progress.
Let me know if you're participating and I'll add you!
I've added a few to get started:
@jacksonfall
@xnuonux
@FollowRobJ
Daily
#Flutter
Tip 🚀
You can use anonymous functions (){} to programmatically determine which widget to show.
Here, I use a switch statement inside an anonymous function to react to changes in the loading state
I've been using
#Flutter
for over 2 years and I just now discovered the Stepper widget.
It's perfect for setting up sequential onboarding flows or features that require certain questions to be answered before others.
#FlutterDev
#FlutterCommunity
Daily
#Flutter
Tip 📏
You can use the FractionallySizedBox widget to create containers that take up a fraction of the total available space.
Just set a widthFactor and heightFactor and you're good to go! I use this a lot with showModalBottomSheet to keep the dialog short.
#Flutter
Efficiency Tip 🍃
Just had my mind blown for a second time today.
Each of the new Material buttons comes with an convenient .icon(...) constructor for creating buttons with a leading icon and label.
#FlutterDev
#FlutterPuzzleHack
Here's the constants.dart file I include in every Flutter project I work on.
It takes a little inspo from
@tailwindcss
and it makes life a whole lot easier 👏👏
#Flutter
Performance Tip:
Create a reusables.dart file to hold components that are constant everywhere.
- Padding and margin values
- Border values
- Spacers
...
I started learning
@FlutterDev
at the beginning of 2020 and have been 100% focused on
#Flutter
since then.
It was honestly worth the time investment.
But in the name of continuous improvement, I'm branching out!
Chapter 2: DevOps
Language:
@golang
Deploying a
#Flutter
app to Google Play or the Apple App Store can be stressful, even if its been rigorously tested. Why?
Because it's basically impossible to perform a hot fix
🔥🫠
A pessimistic thread on a problem I'd like a solution to 🧵
#Flutter
Gotcha 💥
How many users have you unknowingly trapped?
If you weren't already aware, number keyboards on iOS do NOT include a "Done" or "Close" button.
You can (kind of) work around this by setting the keyboardType to TextInputType.numbersWithOptions 👇
#FlutterDev
Daily
#Flutter
Tip ♺
You can use the RefreshIndicator widget to add a swipe-to-refresh feature to scrollable lists.
Just wrap the List in a RefreshIndicator and set the onRefresh callback.
Bonus: You can programmatically show the refresher using a GlobalKey 🤯
Hey
#Flutter
Devs, I've got some big news 🚀
As of this morning, the flutter_fast_cli is now
#opensource
and available on pub. dev!
This goal of this project is twofold:
1. Help you launch fast
2. Make experimenting with Flutter-friendly tech easier
I have a lot more
It would be cool if we could opt in to notifications from our favorite packages on .
I guess you could always subscribe to the individual repos but it'd be better to manage my
#Flutter
notifications all in one place.
@FlutterDev
@FlutterComm
The squadron package on pub. dev is an absolute gold mine of multithreading knowledge in Dart and Flutter 💙 🤯
I was struggling to set up a web worker for handling a giant, on-device calculation and this got me over the finish line.
#Flutter
Tip 🛠️
You can listen to multiple ValueNotifiers at the same time using Listenable.merge.
1. Create your ValueNotifiers as usual
2. Add a ListenableBuilder to your widget tree
3. Merge the ValueNotifiers
In this example, numOne and numTwo will both trigger a rebuild
#Flutter
Tip:
Use the AnimatedSwitcher widget to cross-fade between two different child widgets.
The animation defaults to a FadeTransition which simply fades the old widget out while fading the new one in.
#FlutterCommunity
#FlutterDev
Daily
#Flutter
Tip # 53💙
Use the Future.wait method to wait for multiple futures to complete 🕦🕝🕑
The response from Future.wait is a list of the results in the order you specified them. This is useful for cases when your UI depends on several backend calls.
#FlutterDev
#Flutter
Tip:
You can use the Tooltip widget to show instructional messages to your users.
Tooltips shown this way will dynamically position themselves so they stay on screen.
#FlutterDev
#Accessibility
Daily
#Flutter
Tip # 55
You can create a ColorScheme from an image using the .fromImageProvider constructor 🖌️
This constructor "extracts the dominant color" from your image and creates a ColorScheme with "harmnonious colors that meet contrast requirements for accessibility"
Daily
#Flutter
Tip 💙
You can control how imported libraries are seen by your code using the "as", "show", and "hide" keywords.
"as" gives the library an alias.
"show" imports specific parts of a library.
"hide" prevents parts of the library from being imported.
#FlutterDev
ValueNotifiers are extremely useful for managing state in your
#Flutter
application but they might not work how you'd expect them to.
From the docs 📘
"Because this class only notifies listeners when the value's identity changes, listeners will not be notified when mutable
#Flutter
Tip:
If you want more control over shadows in your UI, you can use a DecoratedBox with a BoxDecoration.
Inside the BoxDecoration, you can provide a list of BoxShadows that will appear behind your widget.
#FlutterDev
#FlutterCommunity
Daily
#Flutter
Tip
You can implement fine control over the appearance of some material widgets using MaterialStateProperty.
For buttons, you can update their color when:
1️⃣ Pressed
2️⃣ Hovered
3️⃣ Disabled
4️⃣ Focused
There are multiple ways to set this up as shown here 🪄
#Flutter
Package Highlight:
The shimmer package lets you add a cool shimmer effect to any widget.
This can be used to create a sleek loading "skeleton". Simply wrap your widget with Shimmer and specify the colors you want.
#flutterDev
#dartLang
#Flutter
Package Highlight:
The timeago package can be used to create fuzzy timestamps.
30 seconds ago -> "A moment ago"
57 mins ago -> "About an hour ago"
4.8 days ago -> "5 days ago"
It's great for timestamping social posts or chat messages!
Used the image and file_picker packages to let users pick which image they want to play with.
It was a little tricky figuring out how to crop out sections of the original image since I was using BoxFit.cover...but it's working!
#FlutterPuzzleHack
#FlutterDev
#Flutter
Knocked this out in 15mins with
#ChatGPT
and
#flutter
I think we will start playing "prompt golf" instead of "code golf". This took me 8 prompts to get something close.
🚀🚀🚀
Feature-first > Layer-first
#Flutter
🧠It's easier on the brain.
🧮It's more logical for teams.
📦It allows app modules to be extracted into packages.
“Flutter Project Structure: Feature-first or Layer-first?” via
@biz84
I got a little bored during my lunch today and wanted to play around with an hourglass animation in
#Flutter
Implicit animations can really make an effect come to life ⏳
#Flutter
Tip:
Want to change the colors of your date picker?
Use the builder field to wrap the picker widget with a Theme. Then use the colorScheme in that theme to set the all of the colors.
#FlutterDev
@FlutterDev
#Flutter
Tip:
Use the ToggleButtons widget to offer your app users an intuitive UI for making choices.
The main components ⚙️
- children = List of widgets representing options
- isSelected = Array of boolean values representing selections
New loading screen?
This is just a GridView.builder with children that are animated using flutter_animate.
Just set a delay for each child based on the index and voilà!
#flutter
#mobiledev
#ui
I've updated the SwiftUI-in-Flutter demo with most of the basic accessibility features (and yes, you can exit the date picker now!)
@timsneath
#flutter
#swiftui
Daily
#Flutter
Tips 1️⃣2️⃣3️⃣
You can drastically improve the accessibility of your application using a few simple widgets.
1. Wrap unlabeled parts of your UI with the Semantics widget to give users more information about its purpose.
2. Use MergedSemantics to group widgets in
I discovered a hidden gem in the Flutter ecosystem this week 💎
Monarch is a developer tool for building Flutter widgets in isolation and its incredibly easy to start using.
1. Write your stories (just widgets)
2. Run Monarch
3. Tweak and debug
Add your onboarding pages, error
#Flutter
Tip of the Day 🔧
You can rebuild the contents in a Modal Bottom Sheet or a Dialog using the StatefulBuilder widget.
The StatefulBuilder provides its child with a setState method it can call to trigger the rebuild.
#FlutterDev
#FlutterCommunity
#DartLang
#MobileDev
I gave the SwiftUI challenge by
@timsneath
a go in Flutter and ended up learning that there is a ListTile.divideTiles constructor 😮🤯
TBH I am tempted to try SwiftUI for the comparison
Daily
#Flutter
Tip 🪄
You can store a JSON object using shared_preferences.
1. Convert your JSON object to a string
2. Save the serialized string
3. Fetch the string and convert it back to a JSON object
Use dart:convert's jsonEncode and jsonDecode functions for (1) and (3).
#Flutter
Widget Tip:
If you've ever been frustrated with fitting a DropdownButton into your UI, check this out.
There's an "isExpanded" field in DropdownButton that will force the button to fill the horizontal space.
#flutterDev
#FlutterCommunity
#Flutter
Tip:
The DropdownButton widget defaults to underling its current value. In a lot of
#design
layouts, that little underline feels out of place.
To remove it, wrap your DropdownButton with a DropdownButtonHideUnderline widget.
If you're a
#Flutter
dev wondering what the difference between onSubmitted and onEditingComplete is in a TextField....
Check out this answer on SO. Long story short they both get fired but onSumitted gives you the text to work with.
Daily
#Flutter
Tip 🌠
The Transform widget is your go-to for applying graphical transformations to its child.
↔️Translate: Slide your widget around.
⬆️Scale: Resize your widget.
↩️Rotate: Give your widget a spin.
#Flutter
Tip
The DateTime class has a static integer property for each day of the week, starting at 1 (Monday) and ending at 7 (Sunday).
Each DateTime object also has a weekday property. This is useful for checking if a given day is on the weekend 📆
It's a work in progress but I just published a new
#Flutter
package 🚀
📦pwa_install📦
In short, it lets you prompt users to install your web app as a progressive web app (PWA).
Daily
#Flutter
Tip # 50 💙👀
One of the oldest UI tricks in the book is to stagger your animations so components pop in one after the other.
You can accomplish this with the flutter_animate package and the "delay" property on the Animate widget:
Daily
#Flutter
Tip 🔵
The FloatingActionButton comes in 3 sizes:
1. Small (or mini)
2. Regular degular
3. Large (do people use this?)
🪄 If you're using multiple FABs on a page, don't forget to add a heroTag.
#FlutterDev
#Flutter
Tip:
You can easily format your TimeOfDay objects using the format(context) method.
As mentioned in the docs, this method "is a chortcut for MaterialLocalizations.formatTimeOfDay"
#FlutterDev
#FlutterCommunity
All small mobile app development teams should be incredibly excited about the new FlutterFire UI package announced with
#Flutter
2.8.
Combine this powerful package with a code generator like Mason by
@felangelov
and OOF! You can be building an app a day.
There are 3 types of programming languages:
📦Object-oriented
🪜Procedural
🧮Functional
If you're curious about
#DartLang
, I found this snippet in the Effective Dart doc👇
Question for my fellow
#Flutter
Devs: Bad idea or what?
I like using the TextStyles from the app Theme and I dislike having to type "!.copyWith(color: myColor)" a 1000 times.
With these 2 extensions, I get TextStyles in any color FAST 🏎️🔥
Ex. "context.titleLarge.tertiary"
#Flutter
Tip of the Day 🎨 (x2)
You can determine if a background color is considered "light" or "dark" by:
1. Calling the computeLuminance() method on a Color object
2. Using ThemeData's static estimateBrightnessForColor() method
Daily
#Dart
Tip 🎯
You can find the max value in a List several different ways:
1. Use the built-in reduce() method on List
2. Use the maxBy() function from the Collection package
3. Use reduce() with max from the math library
#Flutter
#FlutterDev
#Flutter
Gotcha 🍎
CupertinoApp does not introduce a Theme widget to the widget tree so Theme.of(context).brightness won't tell you much.
Instead, it introduces a CupertinoTheme which you can use to check if the app is running in light or dark mode.
#Swiftui
#FlutterDev
Just updated ye olde Twitter banner so I figured I'd reintroduce myself
My name is Joe and I've been working with Flutter for almost 4 years. I created a little dev agency, Code on the Rocks, a few months ago to formalize some of the work I do in the space.
Things I post about:
#Flutter
Reminder:
The AlertDialog widget is intended to "inform the user about a situation that requires acknowledgement".
Typically this widget appears in the form of a popup and presents the users with a list of actions (in my case, TextButtons)
This is a great video for
#Flutter
devs to rewatch every few months.
Widget Tree = CONFIGURE
Element Tree = LIFE CYCLE
RenderObject Tree = PAINT
#FlutterCommunity
#MobileApps
The many faces of SizedBox 🎭
I recently started using the .shrink() constructor everywhere as per the
#Flutter
docs:
"The simplest way to hide a child is just to not include it, or, if a child must be given (e.g. because the parent is a StatelessWidget) then to use
Daily
#Flutter
Tip ➡️
You can listen to the onDrawerChanged callback of your Scaffold to update your UI when the drawer is opened or closed.
There is an equivalent callback for the end drawer (onEndDrawerChanged)
#FlutterDev
Daily
#Flutter
Tip ↕️
The OrientationBuilder widget provides an Orientation value to its children based on the dimensions of the available space.
‼️This is NOT the device orientation ‼️
maxWidth > maxHeight = landscape
maxWidth <= maxHeight = portrait
#Flutter
+
#Firebase
Tip 💙🔥
You can add toJson and fromJson methods to the @ JsonKey annotations to convert DateTimes to Timestamps and vice versa.
The to/fromJson methods need to be top-level functions that return exactly the type your looking for
flutter_fast_cli v1.1.0 is up!
✅ Appwrite Support
✅ Shorebird Fastlanes
✅ `fast build` command
The goal is to build fully-featured Flutter apps in less than 24 hours. What else should we add?
Daily
#Flutter
/Dart Tip ☀️
You can update a single key in a Map using the update() method. This fails if the key doesn't exist ("Key not in map")
To prevent this, provide an ifAbsent function inside of update(). If a key doesn't exist, this lets you can add it
#flutterDev
TIL in
#Flutter
3.10 there are new IconButton constructors. These only have an effect when your theme's useMaterial3 property is set to true.
Thanks
@RydMike
for calling this out in the Themes Playground!
Friendly reminder for
#Flutter
devs 🪃
Your domain layer should be written in pure dart (see 20:24 onward)
This makes testing and maintaining your code a whole lot easier than if your UI and domain code were tangled.