Andrea Bizzotto 🇺🇦

@codewithandrea.com

917 Followers 210 Following

Flutter GDE ❖ I share tips about Dart & Flutter app development. Wanna learn Flutter? 👉 https://codewithandrea.com/

Preview of the charts screen on my currency converter app

Effort to code vs Effort to Prompt: my 2x2 matrix

1. Low prompt, Low code
- Small UI/animation tweaks
- Pull to refresh
- Codegen
- Simple refactors
2. High prompt, Low code
- Line-level instructions
- Dense business logic
- One-line bug fixes
- Layout errors (overflows, unbounded heights, etc)
3. Low prompt, High code
- Boilerplate (crash reporting, analytics setup)
- Writing tests
- Localization
- Theming system
- Big refactors (AI usually does this in multiple steps + run analyzer ... can be slow)
4. High prompt, High code
- Offline caching + syncing
- Full-stack features
- Background tasks + iOS/Android specific
- Complex charting solutions
- IAP + entitlements

For 1 and 2, use Autocomplete and IDE assists.
For 3 and 4, use AI agents for planning, implement in stages, consider verification effort.

The PR description includes the complete status, implementation details, testing checklist, and next steps. Ready for review!

⏵⏵ accept edits on (shift+tab to cycle) Context left until auto-compact: 0%

Top 3 Folders for Agentic AI coding in Flutter

ai_???

ai_specs

ai_docs

If you copy-paste Dart files to a new project, your imports will fail:
import 'package:old_app/src/constants/layout_breakpoints.dart';

You can Find & Replace package:old_app with package:new_app to fix them (annoying and not very scalable)

Alternatives

Relative imports:

import '../../constants/layout_breakpoints.dart';

Absolute imports:

import '/src/constants/layout_breakpoints.dart';

Absolute imports are handy for files that always live in the same location across multiple projects (e.g. /src/constants)

Consider this as a temporary solution. Reusable files should be moved into a common package (works best with monorepo setups).

$// Before Flutter 3.35 Matrix4 deprecated(double x, double y, double scale) { return Matrix4.identity() ..translate(x, y) ..scale(scale, scale, 1.0); } // Since Flutter 3.35 // ignore: depend_on_referenced_packages import 'package:vector_math/vector_math_64.dart'; Matrix4 updated(double x, double y, double scale) { return Matrix4.identity() ..translateByVector3(Vector3(x, y, 0)) ..scaleByVector3(Vector3(scale, scale, 1.0)); }$

Goal
Replace the current image caching implementation with a built-in solution that is based on SQLite/Drift.

Context
Currently, the app caches images using the CustomCachedNetworkImage widget which is based on CachedNetworkImage from the cached_network_image package.

With CachedNetworkImage, images are automatically cached for 7 days and always deleted afterwards, requiring a new fetch. This can lead to a poor UX because if the app is offline after a cached image has been deleted, the fetch will fail.

Since images very rarely change, they should never be deleted.

Proposed solution
Update the implementation of CustomCachedNetworkImage so it no longer uses CachedNetworkImage. Instead, it should do the following:

if the imageUrl is not already cached
show a placeholder UI (same as currently implemented)
fetch the imageUrl and store it in the database
if fetch is successful
replace the placeholder UI with the rendered image
else
show the error UI (same as currently implemented)
else
retrieve the image from the DB and show it in the UI
Database implementation details
Update app_database.dart by adding a new ImagesCache table that will be used to store all the fetched images
The table should have the following fields:
imageUrl (String)
imageData (blob representing the fetched image)
checksum (useful for updates)
updatedAt (when the data was written)
Run build_runner after defining the table, so it can be imported and it compiles successfully.

1. **Find Project Root and Setup Working Directory**
2. **Extract Complete Project Structure**
3. **Extract Core Code Elements**
4. **Discover Project Patterns**
5. **Analyze Architecture Patterns**
6. **Create Intelligent Groupings**
7. **Generate Fact Sheet**
8. **Generate Documentation Prompt**
9. **Generate Final Documentation**
10. **Cleanup**

➜ ~ npx ccusage@latest monthly

WARN Fetching latest model pricing from LiteLLM... ccusage 08:35:02

ℹ Loaded pricing for 1140 models ccusage 08:35:02

╭────────────────────────────────────────────╮
│ │
│ Claude Code Token Usage Report - Monthly │
│ │
╰────────────────────────────────────────────╯

┌──────────┬──────────────────┬──────────┬──────────┬──────────────┬────────────┬──────────────┬────────────┐
│ Month │ Models │ Input │ Output │ Cache Create │ Cache Read │ Total Tokens │ Cost (USD) │
├──────────┼──────────────────┼──────────┼──────────┼──────────────┼────────────┼──────────────┼────────────┤
│ 2025-06 │ - opus-4 │ 45,657 │ 166,255 │ 6,333,383 │ 68,195,460 │ 74,740,755 │ $118.82 │
│ │ - sonnet-4 │ │ │ │ │ │ │
├──────────┼──────────────────┼──────────┼──────────┼──────────────┼────────────┼──────────────┼────────────┤
│ Total │ │ 45,657 │ 166,255 │ 6,333,383 │ 68,195,460 │ 74,740,755 │ $118.82 │
└──────────┴──────────────────┴──────────┴──────────┴──────────────┴────────────┴──────────────┴────────────┘

A simple illustration of who’s who in AI

AI-Hype Bros

- VCs
- Big CEOs
- Leading AI Startups
- Influencers (who don’t know how to code)

“AI will replace all developers”

“AI will benefit all of humankind... proceeds to layoff 10K employees”

Realists

- Pragmatists
- Andrej Karpathy
- Gary Marcus
- Me

“AI is a powerful assistant, requires human verification”

“Partial autonomy, keep AI on the leash”

Contrarians

- People with strong ego
- Fossilized developers

“AI is useless, makes too many mistakes”

“I’m better than that, I’d rather do all the work myself”

Different groups of people → different motives and narratives

Be mindful of who you listen to

Preview thumbnail of my latest YouTube video about building Flutter apps faster with Claude Code.

Video editor showing the status of my upcoming video about Claude Code.

Preview of my Voice Timer app in App Store Connect

- Install multiple Flutter versions
- Easily switch between them
- Automatically configure your IDE

Example commands:

- `puro ls`: lists environments
- `puro use <version>`: switch to environment
- `puro flutter <args>`: run flutter CLI from active environment

$# New formatting option # analysis_options.yaml formatter: trailing_commas: preserve # Available in Dart 3.8 # pubspec.yaml environment: sdk: ^3.8.0 Enable this to override the default formatter behaviour, which removes trailing commas when parameter lists fit within the max page width. Example: adding trailing comma + dart format Default behavior: remove trailing comma, inline if it fits within page width const WelcomeAppIntro({super.key, this.onNewApp}); New option: preserve trailing comma and format over multiple lines const WelcomeAppIntro({ super.key, this.onNewApp, });$

// Example 1
String? lunch = isTuesday ? 'tacos!' : null;

// before
var withoutNullAwareElements = [
if (lunch != null) lunch,
if (lunch?.length != null) lunch!.length,
if (lunch?.length case var length?) length,
];

// after
var withNullAwareElements = [
?lunch,
?lunch.length,
?lunch.length,
];

// Example 2
Stack(
fit: StackFit.expand,
children: [
const AbsorbPointer(),
// before
if (widget.child != null) widget.child!,
// after
?widget.child,
],
)

void logName(String? first, String? middle, String? last) {
// Before Dart 3.8
final fullName = [
if (first != null) first,
if (middle != null) middle,
if (last != null) last,
];

// Since Dart 3.8
final fullName = [
?first,
?middle,
?last,
];
log(fullName.join(' '));
}

logName('Andrea', null, 'Bizzotto');
// [log] Andrea Bizzotto

Screenshot of a 3000-line Dart file from a popular open-source app (won't tell you which one 😅).

Landing page for the Flutter Tips app (now with Flutter web button)

Video demo of my Flutter Tips app on the web, showcasing URL navigation.

$/// Helper variable for retrieving the GoRouter delegate late final routerDelegate = ref.read(goRouterProvider).routerDelegate; @override void initState() { super.initState(); routerDelegate.addListener(_listener); } @override void dispose() { routerDelegate.removeListener(_listener); super.dispose(); } void _listener() { final config = routerDelegate.currentConfiguration; final screenName = config.last.route.name; if (screenName != null) { final pathParams = config.pathParameters; // TODO: Add your own logging or analytics screen tracking code log('screenName: $screenName, pathParams: $pathParams'); } }$

SQL query showing average rating: 4.84 from 820 reviews

Material 3 supports 5 types of buttons.

Here are the corresponding widgets in Flutter:

Column(
spacing: 8,
children: <Widget>[
ElevatedButton(onPressed: () {}, child: Text('Elevated')),
FilledButton(onPressed: () {}, child: Text('Filled')),
FilledButton.tonal(onPressed: () {}, child: Text('Filled Tonal')),
OutlinedButton(onPressed: () {}, child: Text('Outlined')),
TextButton(onPressed: () {}, child: Text('Text')),
],
)

Flutter App Release Checklist (made with Notion)

// If your app has platform-specific UI code like this
final platform = Theme.of(context).platform;
if (platform != TargetPlatform.iOS && platform != TargetPlatform.macOS) {
// Use Material
return TextButton(onPressed: onPressed, child: child);
} else {
// Use Cupertino
return CupertinoDialogAction(onPressed: onPressed, child: child);
}

// Then you can update the ThemeData.platform inside MaterialApp and hot reload to quickly test the UI

MaterialApp(
// Set to TargetPlatform.android to see the difference
theme: ThemeData(platform: TargetPlatform.iOS),
home: ...
)

// Much faster than choosing a different emulator/device and running again 👍

Preview of how I control force updates remotely for my Flutter Tips app using Firebase Remote Config

/// Helper function for showing an adaptive alert dialog
/// Returns:
/// - true if the default action was selected
/// - false if the cancel action was selected
/// - null if the dialog was dismissed
Future<bool?> showAlertDialog({
required BuildContext context,
required String title,
required String content,
String? cancelActionText,
required String defaultActionText,
bool isDestructive = false,
bool barrierDismissible = true,
}) { ... }

// Example usage
final success = await showAlertDialog(
context: context,
title: "Are you sure?",
content: "This action cannot be undone.",
defaultActionText: "Yes",
cancelActionText: "No",
);
if (success == true) { ... }

Flutter in Production is 50% off during my spring sale.

$@Riverpod(keepAlive: true) Future<FirebaseRemoteConfig> firebaseRemoteConfig(Ref ref) async { final minimumFetchIntervalMinutes = appFlavor == 'prod' ? 12 : 1; final remoteConfig = FirebaseRemoteConfig.instance; await remoteConfig.setConfigSettings(RemoteConfigSettings( fetchTimeout: const Duration(minutes: 1), minimumFetchInterval: Duration(minutes: minimumFetchIntervalMinutes), )); await remoteConfig.setDefaults({ 'required_version': '0.1.0', }); await remoteConfig.activate(); unawaited(remoteConfig.fetch()); StreamSubscription<RemoteConfigUpdate>? sub; if (!kIsWeb) { sub = remoteConfig.onConfigUpdated.listen((event) { log('Updated keys: ${event.updatedKeys}', name: 'Remote Config'); }); } if (sub != null) { ref.onDispose(sub.cancel); } return remoteConfig; }$

$To disable Impeller for all builds (debug, profile, release) on Android, add the following tag in your AndroidManifest.xml: <manifest xmlns:android="http://schemas.android.com/apk/res/android"> <application android:label="test_3_29" android:name="${applicationName}" android:icon="@mipmap/ic_launcher"> <meta-data android:name="io.flutter.embedding.android.EnableImpeller" android:value="false" /> To disable Impeller only during development, use this flag: flutter run --no-enable-impeller$