1626943978

# Explore TypeDef In Dart & Fluter for Beginners

In this blog, we will Explore TypeDef In Dart &Fluter. It tells you the best way to make and utilize typedef in Dart. It likewise works in Flutter and thereโs a utilization example in your flutter applications. This article discloses how to make typedefs for function and non-function and how to utilize the made typedefs.

How to Using `typedef` for Functions:

``````typedef IntOperation<int> = int Function(int a, int b);

int processTwoInts (IntOperation<int> intOperation, int a, int b) {
return intOperation(a, b);
}

class MyClass {

IntOperation<int> intOperation;

MyClass(this.intOperation);

int doIntOperation(int a, int b) {
return this.intOperation(a, b);
}
}

void main() {
IntOperation<int> sumTwoNumbers = (int a, int b) => a + b;
print(sumTwoNumbers(2, 2));

print(processTwoInts(sumTwoNumbers, 2, 1));

MyClass myClass = MyClass(sumTwoNumbers);
print(myClass.doIntOperation(4, 4));
}``````

Output:

``````4
3
8``````

``````typedef Compare<T> = bool Function(T a, T b);
bool compareAsc(int a, int b) => a < b;
int compareAsc2(int a, int b) => a - b;

bool doComparison<T>(Compare<T> compare, T a, T b) {
assert(compare is Compare<T>);
return compare(a, b);
}

void main() {
print(compareAsc is Compare<int>);
print(compareAsc2 is Compare<int>);

doComparison(compareAsc, 1, 2);
doComparison(compareAsc2, 1, 2);
}``````

Output:

``````true
false
true``````

``````int processTwoInts (int Function(int a, int b) intOperation, int a, int b) {
return intOperation(a, b);
}

class MyClass {

int Function(int a, int b) intOperation;

MyClass(this.intOperation);

int doIntOperation(int a, int b) {
return this.intOperation(a, b);
}
}

void main() {
int Function(int a, int b) sumTwoNumbers = (int a, int b) => a + b;
print(sumTwoNumbers(2, 2));

print(processTwoInts(sumTwoNumbers, 2, 1));

MyClass myClass = MyClass(sumTwoNumbers);
print(myClass.doIntOperation(4, 4));
}``````

## Using `typedef` for Non-Functions:

``````environment:
sdk: '>=2.13.0 <3.0.0'``````
``````typedef DataList = List<int>;

void main() {
DataList data = [50, 60];
print('length: \${data.length}');
print('values: \$data');
print('type: \${data.runtimeType}');
}``````
``````length: 3
values: [50,60,100]
type: List<int>``````
``````typedef DataList = List<int>;

class MyClass {

DataList currentData;

MyClass({required this.currentData});

set data(DataList currentData) {
this.currentData = currentData;
}

ScoreList getMultipliedData(int multiplyFactor) {
DataList result = [];

currentData.forEach((element) {
});

return result;
}
}

void main() {
MyClass myClass = MyClass(currentData: [50, 60, 70]);

myClass.data = [60, 70];
print(myClass.currentData);

print(myClass.getMultipliedData(3));
}``````

Output:

``````[70, 90]
[180, 210]``````

``````typedef RequestBody = Map<String, dynamic>;

void main() {
final RequestBody requestBody1 = {
'itemId': 2,
'amount': 200,
};
final RequestBody requestBody2 = {
'orderId': '04567835',
};

print(requestBody1);
print(requestBody2);
}``````

Output:

``````{type: BUY, itemId: 2, amount: 200}

``````typedef NumberList<T> = List<T>;

void main() {
NumberList<String> numbers = ['1', '2', '3'];
print('length: \${numbers.length}');
print('numbers: \$numbers');
print('type: \${numbers.runtimeType}');
}``````

Output:

``````length: 4
numbers: [1, 2, 3, 4]
type: List<String>``````

## Usage in Flutter:

``````import 'package:flutter/material.dart';

typedef WidgetList = List<Widget>;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: TypedefExample(),
debugShowCheckedModeBanner: false,
);
}
}

class TypedefExample extends StatelessWidget {

WidgetList buildMethod() {
return <Widget>[
const FlutterLogo(size: 60),
const Text('FlutterDevs.com', style: const TextStyle(color:  Colors.blue, fontSize: 24)),
];
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo'),
),
body: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: buildMethod(),
),
),
);
}
}``````

1648873833

## A Collection of Flutter and Dart Tips and Tricks

• `LazyStream` in Flutter and Dart
• Cancelable APIs in Flutter
• Asset Data in Flutter
• API Caching in Flutter
• `FutureGroup` in Dart
• Flatten `Iterable<bool>` in Dart
• Caching Temp Files in Flutter
• Custom Lists in Dart
• Optional Chaining in Dart
• MapList in Flutter
• `Future<bool>` in Flutter
• Async Bloc Init in Flutter
• Firebase Auth Errors in Flutter
• Debug Strings in Flutter
• Keyboard Appearance in Flutter
• Get `String` Data in Dart
• `Stream.startWith` in Flutter
• Optional Functions in Dart
• `AnnotatedRegion` in Flutter
• Unordered `Map` Equality in Dart
• `Iterable` to `ListView` in Flutter
• Fast `Object.toString()` in Dart
• Copying Bloc State in Flutter
• `Iterable` Subscripts in Dart
• `useState` in Flutter Hooks
• Folding Iterables in Dart
• Custom Iterables in Dart
• Class Clusters in Dart
• `Iterable` +/- in Dart
• Periodic Streams in Dart
• `EmptyOnError` in Dart
• `Stream<T>` Initial Value in Flutter
• `Double.normalize` in Dart
• Hide Sensitive Information in Flutter
• `Iterable.compactMap` in Dart
• `useEffect` in Flutter Hooks
• Merging Streams in Dart
• `Isolate` Stream in Dart
• Network Image Retry in Flutter
• Reusable APIs in Flutter
• `ListTile` Shadow in Flutter
• Transparent AppBar in Flutter
• Constructors on Abstract Classes in Dart
• `@useResult` in Dart
• `@mustCallSuper` in Dart
• `Object.hash` in Dart
• Expanded Equally in Flutter
• Random Iterable Value in Dart
• Hardcoded Strings in Flutter
• Manually Scroll in List View in Flutter
• `AsyncSnapshot` to `Widget` in Flutter
• Unique `Map` Values in Dart
• Smart Quotes/Dashes in Flutter
• Haptic Feedback in Flutter
• Localization Delegates in Flutter
• Extending Functions in Dart
• Paginated `ListView` in Flutter
• Immutable Classes in Dart
• Card Widget in Flutter
• List Equality Ignoring Ordering in Dart
• Shorten GitHub URLs in Dart
• Time Picker in Flutter
• Throttled Print in Flutter
• Map Equality in Dart
• Unique Maps in Dart
• Raw Auto Complete in Flutter
• Title on `Object` in Dart
• Compute in Flutter
• Filter on `Map` in Dart
• Type Alias in Dart
• `ValueNotifier` in Flutter
• Object to Integer in Dart
• Image Opacity in Flutter
• Covariant in Dart
• Custom Errors in Streams in Dart
• Shake Animation in Flutter
• Throw Enums in Dart
• `Future` Error Test in Flutter
• Generic URL Retrieval in Dart
• Custom Error Widget in Flutter
• Handle Multiple `Future` Errors in Dart
• `Future` Error Handling in Dart
• String to Toast in Flutter
• Waiting in Dart
• Compact Map on `Map<K,V>` in Dart
• Query Parameters in Dart
• Multiple Gradients in Container in Flutter
• Filter on `Stream<List<T>>` in Dart
• Generic Route Arguments in Flutter
• GitHub API in Flutter
• `ChangeNotifier` in Flutter
• Refresh Indicator in Flutter
• FlatMap in Dart
• `OrientationBuilder` in Flutter
• Bloc Text Editing Controller in Flutter
• Blurred TabBar in Flutter
• ListView Background in Flutter
• Integer to Binary in Dart
• Split String by Length in Dart
• Image Tint in Flutter
• SlideTransition in Flutter
• Expansion Panels and Lists in Flutter
• Complete CRUD App in Flutter
• SQLite Storage in Flutter
• Circular Progress with Percentage in Flutter
• Opening URLs in Flutter
• Commodore 64 Screen in Flutter
• Animated Lists in Flutter
• `CheckboxListTile` in Flutter
• `-` Operator on `String` in Dart
• Dart Progress for `Future<T>`
• Move Widget Shadows with Animation
• Gallery with Blurred Backgrounds in Flutter
• Custom Path Clippers in Flutter
• Frost Effect on Images in Flutter
• Custom Clippers in Flutter
• Check if Website is Up or Down in Dart
• Section Titles on ListView in Flutter
• Circular Progress in Flutter
• Displaying Scroll Wheels in Flutter
• Post Messages to Slack with Dart
• Unwrap `List<T?>?` in Dart
• Avoiding UI Jitters When Switching Widgets in Flutter
• Detect Redirects in Dart
• Proportional Constraints in Flutter
• Displaying Cupertino Action Sheets in Flutter
• Rotating `List<T>` in Dart
• Displaying SnackBars in Flutter
• Custom Tab Bar Using ToggleButtons in Flutter
• Hashable Mixins in Dart
• Flutter Tips and Tricks in Terminal
• Searching `List<List<T>>` in Dart
• Cloning Objects in Dart
• Color Filters in Flutter
• Flattening Lists in Dart
• Managing Duplicates in `List<T>` in Dart
• FlatMap and CompactMap in Dart
• Equality of `List<T>` in Dart
• Constants in Dart
• Displaying Scrollable Bottom Sheets in Flutter
• Fade Between Widgets in Flutter
• Sort Descriptors in Dart
• User Sortable Columns and Tables in Flutter
• Content-Length of `List<Uri>` in Dart
• Recursive Dot Notation on Maps in Dart
• Allow User Selection of Text in Flutter
• Placing Constraints on Widgets in Flutter
• Animating Position Changes in Flutter
• Transitioning Between Widgets in Flutter
• Doubly Linked Lists in Dart
• Reordering Items Inside List Views in Flutter
• Custom Stream Transformers in Dart
• Expanding Stream Elements in Dart
• Consume Streams for a Duration in Dart
• Shortening URLs in Dart
• LimitedBox Widget as ListView Items in Flutter
• Generically Convert Anything to Int in Dart
• Validating URL Certificates in Dart
• Displaying Popup Menus in Flutter
• Implementing Drag and Drop in Flutter
• Dismissing List Items in Flutter
• Animating Widgets with Ease in Flutter
• Displaying Tool Tips in Flutter
• Displaying Assorted Widgets Inside TableView in Flutter
• Page Indicator with Page View in Flutter
• Animating and Moving a Floating Action Button in Flutter
• Fading Network Image Widget in Flutter
• Transparent Alert Dialogs in Flutter
• Network Image Size in Dart
• Animated Icons in Flutter
• Custom Scroll Views in Flutter
• Parallax App Bar in Flutter
• JSON HTTP Requests in Dart
• URL Timeouts in Dart
• Detecting URL File Types in Dart
• Paginated Lists in Dart
• Requesting DELETE on APIs in Dart
• Animated Containers in Flutter
• Hiding Widgets in Flutter
• Simple Opacity Animation in Flutter
• Vignette Widget in Flutter
• Drop Down Button Configuration and Usage in Flutter
• Expandable List Items in Flutter
• Infinite Scrolling in Flutter
• Infinite Arrays in Dart
• Custom Color Picker Component in Flutter
• Displaying and Reacting to Switches in Flutter
• Displaying Bottom Bars in Flutter
• Displaying Buttons on AppBar in Flutter
• Displaying Bottom Sheets in Flutter
• Converting Enums to Radio Buttons in Flutter
• Check Existence of Websites in Flutter
• Simple Grid View in Flutter
• Rendering Bullet Points in Flutter
• Retrying Futures in Flutter
• Containers as ClipOvals in Flutter
• Rich Texts in Flutter
• Wrapping Widgets in Flutter
• `Stream` and `StreamBuilder` in Flutter
• Blur Effect in Flutter
• Convert Enums to Strings in Dart
• Replacing Text in TextField in Flutter
• Aspect Ratio in Flutter
• Zoom and Pan in Flutter
• Resizing Images in Flutter to Fit Screen Height
• Validating URLs in Flutter
• FrameBuilder for Network Images in Flutter
• Calculating Median of Lists in Dart
• Generic Functions with Reduce in Dart
• Passing Back Data From a Screen to the Previous One in Flutter
• Flinging an Animation in Flutter
• Throttling User Input in Flutter
• Censoring TextFields in Flutter
• Customizing TextButton in Flutter
• Multiline TextFields in Flutter
• Filtering TextField Input in Flutter
• Focusing Manually on TextFields in Flutter
• Data Streams Over HTTP/HTTPs in Dart
• Catching Nonexistent Accessors or Methods in Dart
• Using Expando in Dart
• Implementing Custom Maps in Dart
• Dynamically Calling Functions in Dart
• Factory Constructors in Dart
• Calculating the Sum of List Items in Dart
• Removing Duplicate Strings in Lists in Dart (Case-Insensitive)
• Implementing Range in Dart
• Converting Lists to Maps in Dart
• Implementing Hashable in Dart
• Random Name Generator in Dart
• Capturing Stack Traces in Dart Exceptions
• Removing Duplicates from Lists in Dart
• Optional Spread Operator in Dart
• Calling Optional Functions in Dart
• Odd-Even Sort in Dart
• Implementing Zip and Tuples in Dart
• Swapping Values in Lists with XOR in Dart
• Waiting for Multiple Futures in Dart
• Using Queues as Stacks in Dart
• Custom Iterators in Dart
• Iterables as Ranges + Transform in Dart
• Errors vs Exceptions in Dart
• Custom Annotations in Dart
• Classes as Enums in Dart
• Spread Operator in Collection Literals in Dart
• `StreamBuilder` and `StreamController` in Dart
• Almost Equal in Dart
• Enum Associated Values in Dart
• Implementing `Comparable` in Dart
• Implementing Custom Integer Types in Dart
• Custom Subscripts in Dart
• Dart List Enumeration with Index
• Applying Mixins to Other Mixins in Dart
• Parameter Types in Dart
• Custom Exceptions in Dart
• `rethrow`ing Exceptions in Dart
• `mixin`s and JSON Parsing in Dart
• `mixin`s vs `abstract class`es in Dart
• Drawing Shapes in Flutter with `LayoutBuilder`, `CustomPaint` and `CustomPainter`
• Generic Type Aliases in Dart
• Callable Classes in Dart
• Synchronous Generators in Dart
• Implicit Interfaces in Dart
• `const` Constructors in Dart
• `async`-`await` Over Raw `Future`s in Dart
• Initializer List and Default Values as Convenience Intializers in Dart
• Extract Elements of Certain Type from Lists in Dart
• Type Promotion in Dart
• Extract Minimum and Maximum Values in `List<num>` in Dart
• Functions as First Class Citizens in Dart

`LazyStream` in Flutter and Dart

``````

import 'dart:developer' as devtools show log;
import 'dart:typed_data' show Uint8List;
import 'package:flutter/services.dart' show NetworkAssetBundle, rootBundle;
import 'package:async/async.dart' show LazyStream;

extension LocalFileData on String {
(byteData) => byteData.buffer.asUint8List(),
);
}

extension Log on Object {
void log() => devtools.log(toString());
}

void testIt() async {
final stream = LazyStream(
() async {
final allData = await calculateAllData();
return getImagesData(allData);
},
);

await for (final data in stream) {
'Got data, length = \${data.length}'.log();
}
}

Stream<Uint8List> getImagesData(
List<Future<Uint8List>> allData,
) async* {
for (final data in allData) {
yield await data;
}
}

Future<List<Future<Uint8List>>> calculateAllData() async {
final futures = Iterable.generate(
3,
(i) => 'images/image_list\${i + 1}.txt'
.localFileData()
.then((data) => String.fromCharCodes(data)),
);
final result = Future.wait(futures);
final lineSplitter = const LineSplitter();
List<Future<Uint8List>> allData = [];
for (final string in await result) {
final urls = lineSplitter.convert(string);
for (final url in urls) {
NetworkAssetBundle(Uri.parse(url))
.then((byteData) => byteData.buffer.asUint8List()),
);
}
}
return allData;
}
``````

Cancelable APIs in Flutter

``````import 'dart:developer' as devtools show log;
import 'dart:typed_data' show Uint8List;
import 'package:flutter/services.dart' show NetworkAssetBundle, rootBundle;
import 'package:async/async.dart' show CancelableOperation;

extension Log on Object {
void log() => devtools.log(toString());
}

extension LocalFileData on String {
(byteData) => byteData.buffer.asUint8List(),
);
}

CancelableOperation<Uint8List> getImageOperation(String url) =>
CancelableOperation.fromFuture(
NetworkAssetBundle(Uri.parse(url))
.then((byteData) => byteData.buffer.asUint8List()),
onCancel: () => 'images/template.png'.localFileData(),
);

void testIt() async {
final operation = getImageOperation('http://127.0.0.1:5500/images/1.png');
final cancelledValue = await operation.cancel();
final result = await operation.valueOrCancellation(cancelledValue);
result?.log();
}``````

Asset Data in Flutter

``````
import 'dart:typed_data' show Uint8List;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:developer' as devtools show log;

extension Log on Object {
void log() => devtools.log(toString());
}

extension LocalFileData on String {
(byteData) => byteData.buffer.asUint8List(),
);
}

void testIt() async {
(await 'images/template.png'.localFileData()).log();
}``````

API Caching in Flutter

``````
import 'dart:typed_data' show Uint8List;
import 'package:flutter/services.dart' show NetworkAssetBundle;
import 'dart:developer' as devtools show log;
import 'package:async/async.dart' show AsyncMemoizer;

extension Log on Object {
void log() => devtools.log(toString());
}

@immutable
class GetImageApi {
final String url;
final _fetch = AsyncMemoizer<Uint8List>();

GetImageApi({required this.url});
Future<Uint8List> fetch() => _fetch.runOnce(
() => NetworkAssetBundle(Uri.parse(url))
.then((byteData) => byteData.buffer.asUint8List()),
);
}

void testIt() async {
final api = GetImageApi(url: 'http://127.0.0.1:5500/images/1.png');
(await api.fetch()).log(); // fetched
(await api.fetch()).log(); // cached
}``````

`FutureGroup` in Dart

``````

mixin FutureConvertible<T> {
Future<T> toFuture();
}

@immutable
@override
Future<bool> toFuture() => Future.delayed(
const Duration(seconds: 1),
() => true,
);
}

@immutable
class SignUpApi with FutureConvertible<bool> {
@override
Future<bool> toFuture() => Future.delayed(
const Duration(seconds: 1),
() => true,
);
}

extension Flatten on Iterable<bool> {
bool flatten() => fold(
true,
(lhs, rhs) => lhs && rhs,
);
}

extension Log on Object {
void log() => devtools.log(toString());
}

Future<bool> startup({
required bool shouldSignUp,
}) {
final group = FutureGroup<bool>();
}
if (shouldSignUp) {
}
group.close();
return group.future.then((bools) => bools.flatten());
}

void testIt() async {
final success = await startup(
shouldSignUp: false,
);
success.log();
}``````

Flatten `Iterable<bool>` in Dart

``````
extension Flatten on Iterable<bool> {
bool flatten() => fold(
true,
(lhs, rhs) => lhs && rhs,
);
}

void testIt() {
assert([true, false, true].flatten() == false);
assert([true, true, true].flatten() == true);
assert([false, false, false].flatten() == false);
assert([true].flatten() == true);
assert([false].flatten() == false);
}``````

Caching Temp Files in Flutter

``````

@immutable
class NetworkImageAsset {
final String localPath;
final String url;
NetworkImageAsset({required int index})
: localPath = Directory.systemTemp.path + '/\$index.png',
url = 'http://127.0.0.1:5500/images/\$index}.png';

.then((byteData) => byteData.buffer.asUint8List())
.then((data) => File(localPath).writeAsBytes(data).then((_) => true))
.catchError((_) => false);
}

void testIt() async {
await Future.forEach(
Iterable.generate(
3,
(i) => NetworkImageAsset(index: i + 1),
),
);
}``````

Custom Lists in Dart

``````

import 'dart:developer' as devtools show log;
import 'dart:collection' show ListBase;

class LowercaseList extends ListBase<String> {
final List<String> _list = [];

@override
int get length => _list.length;
@override
set length(int newLength) => _list.length = newLength;

@override
String operator [](int index) => _list[index].toUpperCase();

@override
void operator []=(int index, value) => _list[index] = value;

@override

@override
}

extension Log on Object {
void log() => devtools.log(toString());
}

void testIt() {
final myList = LowercaseList();
myList[0].log(); // FOO
myList[1].log(); // BAR
for (final item in myList) {
item.log(); // FOO, BAR, BAZ
}
}``````

Optional Chaining in Dart

``````

@immutable
final String? firstLine;
final String? secondLine;
}

@immutable
class Person {
final Person? father;
}

}``````

MapList in Flutter

``````

extension MapToList<T> on Iterable<T> {
List<E> mapList<E>(E Function(T) toElement) =>
map(toElement).toList();
}``````

`Future<bool>` in Flutter

``````

required File file,
required String userId,
}) =>
FirebaseStorage.instance
.ref(userId)
.child(const Uuid().v4())
.putFile(file)
.then((_) => true)
.catchError((_) => false);``````

Async Bloc Init in Flutter

``````

class App extends StatelessWidget {
const App({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return BlocProvider<AppBloc>(
child: MaterialApp(
title: 'Photo Library',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: BlocConsumer<AppBloc, AppState>(
listener: (context, state) {
context: context,
);
} else {
}

... rest of your code goes here``````

Firebase Auth Errors in Flutter

``````

const authErrorMapping = {
'user-not-found': AuthErrorUserNotFound(),
'project-not-found': AuthErrorProjectNotFound(),
};

@immutable
abstract class AuthError {
factory AuthError.from(FirebaseAuthException exception) =>
authErrorMapping[exception.code.toLowerCase().trim()] ??
const AuthErrorUnknown();
}

@immutable
class AuthErrorUnknown implements AuthError {
const AuthErrorUnknown();
}

@immutable
class AuthErrorUserNotFound implements AuthError {
const AuthErrorUserNotFound();
}

@immutable
class AuthErrorProjectNotFound implements AuthError {
const AuthErrorProjectNotFound();
}``````

Debug Strings in Flutter

``````
extension IfDebugging on String {
String? get ifDebugging => kDebugMode ? this : null;
}

const LoginView({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final emailController = useTextEditingController(
text: 'foo@bar.com'.ifDebugging,
);
text: 'foobarbaz'.ifDebugging,
);

// rest of your code would be here ...``````

Keyboard Appearance in Flutter

``````
const LoginView({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
child: Column(
children: const [
TextField(
keyboardAppearance: Brightness.dark,
),
TextField(
obscureText: true,
obscuringCharacter: 'โ',
),
],
),
),
);
}
}``````

Get `String` Data in Dart

``````
extension ToList on String {
Uint8List toUint8List() => Uint8List.fromList(codeUnits);
}

final text1Data = 'Foo'.toUint8List();
final text2Data = 'Bar'.toUint8List();``````

`Stream.startWith` in Flutter

``````
import 'package:async/async.dart' show StreamGroup;
import 'dart:developer' as devtools show log;

extension Log on Object {
void log() => devtools.log(toString());
}

extension StartWith<T> on Stream<T> {
Stream<T> startWith(T value) => StreamGroup.merge([
this,
Stream<T>.value(value),
]);
}

void testIt() {
Stream.periodic(const Duration(seconds: 1), (i) => i + 1)
.startWith(0)
.take(4)
.forEach((element) {
element.log();
}); // 0, 1, 2, 3
}``````

Optional Functions in Dart

``````

typedef AppBlocRandomUrlPicker = String Function(Iterable<String> allUrls);

extension RandomElement<T> on Iterable<T> {
T getRandomElement() => elementAt(
math.Random().nextInt(length),
);
}

class AppBloc extends Bloc<AppEvent, AppState> {
String _pickRandomUrl(Iterable<String> allUrls) => allUrls.getRandomElement();

AppBloc({
required Iterable<String> urls,
AppBlocRandomUrlPicker? urlPicker,
}) : super(const AppState.empty()) {
(event, emit) {
emit(
const AppState(
data: null,
),
);
// pick a random URL to load
final url = (urlPicker ?? _pickRandomUrl)(urls);
HttpClient().getUrl(Uri.parse(url)); // continue here...
},
);
}
}``````

`AnnotatedRegion` in Flutter

``````

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.dark,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(child: Container(color: Colors.blue)),
Expanded(child: Container(color: Colors.yellow)),
],
),
),
);
}
}``````

Unordered `Map` Equality in Dart

``````

import 'package:collection/collection.dart';
import 'dart:developer' as devtools show log;

extension Log on Object {
void log() => devtools.log(toString());
}

extension UnorderedEquality<K, V> on Map<K, V> {
bool isEqualTo(Map<K, V> other) =>
const DeepCollectionEquality.unordered().equals(this, other);
}

void testIt() {
final dict1 = {
'name': 'foo',
'age': 20,
'values': ['foo', 'bar'],
};
final dict2 = {
'age': 20,
'name': 'foo',
'values': ['bar', 'foo'],
};
dict1.isEqualTo(dict2).log(); // true
}``````

`Iterable` to `ListView` in Flutter

``````

extension ToListView<T> on Iterable<T> {
Widget toListView() => IterableListView(
iterable: this,
);
}

class IterableListView<T> extends StatelessWidget {
final Iterable<T> iterable;
const IterableListView({
Key? key,
required this.iterable,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: iterable.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(
iterable.elementAt(index).toString(),
),
);
},
);
}
}

@immutable
class Person {
final String name;
final int age;
const Person({required this.name, required this.age});
@override
String toString() => '\$name, \$age years old';
}

const persons = [
Person(name: 'Foo', age: 20),
Person(name: 'Bar', age: 30),
Person(name: 'Baz', age: 40),
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: persons.toListView(),
);
}
}``````

``````

Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return TextField(
obscureText: true,
obscuringCharacter: 'โ',
decoration: const InputDecoration(
),
);
}
}``````

Fast `Object.toString()` in Dart

``````

@immutable
class AppState {
final Iterable<String>? fetchedNotes;

@override
String toString() => {
'fetchedNotes': fetchedNotes
}.toString();

const AppState({
required this.fetchedNotes,
});
}``````

Copying Bloc State in Flutter

``````

@immutable
class AppState {
final Iterable<Note>? fetchedNotes;

const AppState.empty()
fetchedNotes = null;

const AppState({
required this.fetchedNotes,
});

AppState copiedWith({
Iterable<Note>? fetchedNotes,
}) =>
AppState(
fetchedNotes: fetchedNotes ?? this.fetchedNotes,
);
}``````

`Iterable` Subscripts in Dart

``````// Free Flutter Course ๐ https://linktr.ee/vandadnp

import 'dart:developer' as devtools show log;

extension Log on Object? {
void log() => devtools.log(toString());
}

extension Subscript<T> on Iterable<T> {
T? operator [](int index) => length > index ? elementAt(index) : null;
}

void testIt() {
Iterable.generate(10, (i) => i + 1)[0].log(); // 1
Iterable.generate(1, (i) => i)[2].log(); // null
Iterable.generate(10, (i) => i + 1)[9].log(); // 10
Iterable.generate(0, (i) => i)[0].log(); // null
}``````

`useState` in Flutter Hooks

``````

import 'package:flutter_hooks/flutter_hooks.dart';
import 'dart:math' show min;

@immutable
class VirtualTab {
final Icon icon;
final String text;

const VirtualTab({
required this.icon,
required this.text,
});
}

const tabs = [
VirtualTab(
icon: Icon(Icons.picture_as_pdf),
text: 'All PDF files',
),
VirtualTab(
icon: Icon(Icons.ac_unit_outlined),
text: 'Data page',
),
VirtualTab(
icon: Icon(Icons.person),
text: 'Profile page',
),
];

class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final tabCount = useState(1);
return DefaultTabController(
length: tabCount.value,
initialIndex: tabCount.value - 1,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: tabs
.take(tabCount.value)
.map((tab) => Tab(icon: tab.icon))
.toList(),
),
),
body: CustomTabBarView(tabCount: tabCount),
),
);
}
}

class CustomTabBarView extends StatelessWidget {
const CustomTabBarView({
Key? key,
required this.tabCount,
}) : super(key: key);

final ValueNotifier<int> tabCount;

@override
Widget build(BuildContext context) {
return TabBarView(
children: tabs
.take(tabCount.value)
.map(
child: Column(
children: [
Text(tab.text),
TextButton(
onPressed: () {
final newLength = min(
tabs.length,
tabCount.value + 1,
);
tabCount.value = newLength;
},
child: const Text('Create next tab'),
)
],
),
),
)
.toList(),
);
}
}``````

Folding Iterables in Dart

``````

import 'dart:developer' as devtools show log;

extension Log on Object {
void log() => devtools.log(toString());
}

void testIt() {
final values = ['foo', 'bar', 'baz', '1.0'];

values.fold<int>(0, (pe, e) => pe + e.length); // 12

values.fold<String>('', (pe, e) => '\$pe\$e'); // foobarbaz1.0

values.fold<Map<String, int>>(
{},
(pe, e) => pe..addAll(<String, int>{e: e.length}),
).log(); // {foo: 3, bar: 3, baz: 3, 1.0: 3}

values.fold<double>(
0.0,
(pe, e) => pe + (double.tryParse(e) ?? 0.0),
); // 1.0
}``````

Custom Iterables in Dart

``````

final String line1;
final String line2;
final String postCode;

required this.line1,
required this.line2,
required this.postCode,
});

@override
Iterator<String> get iterator => [line1, line2, postCode].iterator;
}

void testIt() {
line1: 'Foo bar avenue, #10',
line2: 'Baz street',
postCode: '123456',
);
for (final line in address) {
devtools.log(line);
}
}``````

Class Clusters in Dart

``````

enum AnimalType { dog, cat }

@immutable
abstract class Animal {
const Animal();
factory Animal.fromType(AnimalType type) {
switch (type) {
case AnimalType.dog:
return const Dog();
case AnimalType.cat:
return const Cat();
}
}
void makeNoise();
}

@immutable
class Dog extends Animal {
const Dog();
@override
void makeNoise() => 'Woof'.log();
}

@immutable
class Cat extends Animal {
const Cat();
@override
void makeNoise() => 'Meow'.log();
}

void testIt() {
final cat = Animal.fromType(AnimalType.cat);
cat.makeNoise();
final dog = Animal.fromType(AnimalType.dog);
dog.makeNoise();
}``````

`Iterable` +/- in Dart

``````

Iterable<T> operator +(T other) => followedBy([other]);
Iterable<T> operator -(T other) => where((element) => element != other);
}

void testIt() {
final values = ['foo', 'bar']
.map((e) => e.toUpperCase()) + 'BAZ';
values.log(); // (FOO, BAR, BAZ)
(values - 'BAZ').log(); // (FOO, BAR)
}``````

Periodic Streams in Dart

``````

import 'dart:io';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:developer' as devtools show log;

extension Log on Object {
void log() => devtools.log(toString());
}

@immutable
class Person {
final String name;
final int age;

const Person({
required this.name,
required this.age,
});

Person.fromJson(Map<String, dynamic> json)
: name = json["name"] as String,
age = json["age"] as int;

@override
String toString() => 'Person (\$name, \$age years old)';
}

mixin ListOfThingsAPI<T> {
Future<Iterable<T>> get(String url) => HttpClient()
.getUrl(Uri.parse(url))
.then((req) => req.close())
.then((resp) => resp.transform(utf8.decoder).join())
.then((str) => json.decode(str) as List<dynamic>)
.then((list) => list.cast());
}

class GetPeople with ListOfThingsAPI<Map<String, dynamic>> {
Future<Iterable<Person>> getPeople(url) => get(url).then(
(jsons) => jsons.map(
(json) => Person.fromJson(json),
),
);
}

Stream<dynamic> every(Duration duration) => Stream.periodic(duration);

extension IntToDuration on int {
Duration get seconds => Duration(seconds: this);
}

void testIt() async {
await for (final people in every(3.seconds).asyncExpand(
(_) => GetPeople()
.getPeople('http://127.0.0.1:5500/apis/people1.json')
.asStream(),
)) {
people.log();
}
}

/* people1.json
[
{
"name": "Foo 1",
"age": 20
},
{
"name": "Bar 1",
"age": 30
}
]
*/``````

`EmptyOnError` in Dart

``````

import 'dart:io';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:developer' as devtools show log;

extension Log on Object {
void log() => devtools.log(toString());
}

@immutable
class Person {
final String name;
final int age;

const Person({
required this.name,
required this.age,
});

Person.fromJson(Map<String, dynamic> json)
: name = json["name"] as String,
age = json["age"] as int;

@override
String toString() => 'Person (\$name, \$age years old)';
}

const people1Url = 'http://127.0.0.1:5500/apis/people11.json';
const people2Url = 'http://127.0.0.1:5500/apis/people2.json';

extension EmptyOnError<E> on Future<List<Iterable<E>>> {
Future<List<Iterable<E>>> emptyOnError() => catchError(
(_, __) => List<Iterable<E>>.empty(),
);
}

Future<Iterable<Person>> parseJson(String url) => HttpClient()
.getUrl(Uri.parse(url))
.then((req) => req.close())
.then((resp) => resp.transform(utf8.decoder).join())
.then((str) => json.decode(str) as List<dynamic>)
.then((json) => json.map((e) => Person.fromJson(e)));

void testIt() async {
final persons = await Future.wait([
parseJson(people1Url),
parseJson(people2Url),
]).emptyOnError();
persons.log();
}``````

`Stream<T>` Initial Value in Flutter

``````

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
),
);
}

const url = 'https://bit.ly/3x7J5Qt';

class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
late final StreamController<double> controller;
controller = useStreamController<double>(onListen: () {
});

return Scaffold(
appBar: AppBar(
),
body: StreamBuilder<double>(
stream: controller.stream,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const CircularProgressIndicator();
} else {
final rotation = snapshot.data ?? 0.0;
return GestureDetector(
onTap: () {
},
child: RotationTransition(
turns: AlwaysStoppedAnimation(rotation / 360.0),
child: Center(
child: Image.network(url),
),
),
);
}
}),
);
}
}``````

`Double.normalize` in Dart

``````

import 'dart:developer' as devtools show log;

extension Normalize on double {
double normalized(
double selfRangeMin,
double selfRangeMax, [
double normalizedRangeMin = 0.0,
double normalizedRangeMax = 1.0,
]) =>
(normalizedRangeMax - normalizedRangeMin) *
((this - selfRangeMin) / (selfRangeMax - selfRangeMin)) +
normalizedRangeMin;
}

extension Log on Object {
void log() => devtools.log(toString());
}

void testIt() async {
2.0.normalized(0, 2.0).log(); // 1.0
4.0.normalized(0, 8.0).log(); // 0.5
5.0.normalized(4.0, 6.0, 10.0, 20.0).log(); // 15
}``````

Hide Sensitive Information in Flutter

``````

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
),
);
}

class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final state = useAppLifecycleState();
return Scaffold(
appBar: AppBar(
),
child: Opacity(
opacity: state == AppLifecycleState.resumed ? 1.0 : 0.0,
child: Container(
decoration: BoxDecoration(
color: Colors.black.withAlpha(100),
),
],
),
child: Image.asset('assets/card.png'),
),
),
),
);
}
}``````

`Iterable.compactMap` in Dart

``````

import 'dart:developer' as devtools show log;

extension Log on Object {
void log() => devtools.log(toString());
}

extension CompactMap<T> on Iterable<T?> {
Iterable<T> compactMap<E>([
E? Function(T?)? transform,
]) =>
map(transform ?? (e) => e).where((e) => e != null).cast();
}

const list = ['Hello', null, 'World'];

void testIt() {
list.log(); // [Hello, null, World]
list.compactMap().log(); // [Hello, World]
list.compactMap((e) => e?.toUpperCase()).log(); // [HELLO, WORLD]
}``````

`useEffect` in Flutter Hooks

``````

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
),
);
}

class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final controller = useTextEditingController();
final text = useState('');
useEffect(
() {
void listener() {
text.value = controller.text;
}

return () => controller.removeListener(listener);
},
[controller],
);
return Scaffold(
body: Column(
children: [
TextField(
controller: controller,
),
Text('You typed \${text.value}')
],
),
);
}
}``````

Merging Streams in Dart

``````

import 'package:async/async.dart' show StreamGroup;
import 'dart:developer' as devtools show log;

extension Log on Object {
void log() => devtools.log(toString());
}

void testIt() async {
final streams = Iterable.generate(
3,
(i) => Stream.periodic(
const Duration(seconds: 1),
(_) => 'Stream \$i: \${DateTime.now().toIso8601String()}',
).take(i + 1),
);
await for (final now in StreamGroup.merge(streams)) {
now.log();
}
}``````

`Isolate` Stream in Dart

``````

Stream<String> getMessages() {
return Isolate.spawn(_getMessages, rp.sendPort)
.asStream()
.asyncExpand((_) => rp)
.takeWhile((element) => element is String)
.cast();
}

void _getMessages(SendPort sp) async {
await for (final now in Stream.periodic(
const Duration(seconds: 1),
(_) => DateTime.now().toIso8601String(),
).take(10)) {
sp.send(now);
}
Isolate.exit(sp);
}

void testIt() async {
await for (final msg in getMessages()) {
msg.log();
}
}``````

Network Image Retry in Flutter

``````

@immutable
class RetryStrategy {
final bool shouldRetry;
final Duration waitBeforeRetry;
const RetryStrategy({
required this.shouldRetry,
required this.waitBeforeRetry,
});
}

typedef Retrier = RetryStrategy Function(String url, Object error);

class NetworkImageWithRetry extends StatelessWidget {
final Widget errorWidget;
final String url;
final Retrier retrier;

NetworkImageWithRetry({
Key? key,
required this.url,
required this.retrier,
required this.errorWidget,
}) : super(key: key);

void getData() async {
while (true == true) {
try {
final networkAsset = NetworkAssetBundle(Uri.parse(url));
break;
} catch (e) {
final strategy = retrier(url, e);
if (strategy.shouldRetry) {
await Future.delayed(strategy.waitBeforeRetry);
} else {
break;
}
}
}
}

@override
Widget build(BuildContext context) {
getData();
return StreamBuilder(
stream: _controller.stream,
builder: (context, AsyncSnapshot<Uint8List> snapshot) {
if (snapshot.hasError) {
return errorWidget;
} else {
final data = snapshot.data;
if (snapshot.hasData && data != null) {
return Image.memory(data);
} else {
}
}
},
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Image Retry'),
),
body: NetworkImageWithRetry(
url: 'https://bit.ly/3qYOtDm',
errorWidget: const Text('Got an error!'),
retrier: (url, error) {
return RetryStrategy(
shouldRetry: error is! FlutterError,
waitBeforeRetry: const Duration(seconds: 1),
);
},
),
);
}
}``````

Reusable APIs in Flutter

``````import 'dart:io';
import 'package:flutter/material.dart';
import 'dart:developer' as devtools show log;
import 'dart:convert' show utf8;
import 'package:meta/meta.dart' show useResult;

extension Log on Object {
void log() => devtools.log(toString());
}

extension GetOnUri on Object {
Future<HttpClientResponse> getUrl(
String url,
) =>
HttpClient()
.getUrl(
Uri.parse(
url,
),
)
.then((req) => req.close());
}

mixin CanMakeGetCall {
String get url;
@useResult
Future<String> getString() => getUrl(url).then(
(response) => response
.transform(
utf8.decoder,
)
.join(),
);
}

@immutable
class GetPeople with CanMakeGetCall {
const GetPeople();
@override
String get url => 'http://127.0.0.1:5500/apis/people.json';
}

void testIt() async {
final people = await const GetPeople().getString();
devtools.log(people);
}``````

`ListTile` Shadow in Flutter

``````

enum Currency { dollars }

extension Title on Currency {
String get title {
switch (this) {
case Currency.dollars:
return '\\$';
}
}
}

@immutable
class Item {
final IconData icon;
final String name;
final double price;
final Currency currency;

const Item({
required this.icon,
required this.name,
required this.price,
required this.currency,
});

String get description => '\$price\${currency.title}';
}

const items = [
Item(
icon: Icons.camera_alt,
name: 'Camera',
price: 300,
currency: Currency.dollars,
),
Item(
icon: Icons.house,
name: 'House',
price: 1000000,
currency: Currency.dollars,
),
Item(
icon: Icons.watch,
name: 'Smart Watch',
price: 200,
currency: Currency.dollars,
),
];

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (_, index) {
return ItemTile(
item: items[index],
);
},
),
);
}
}

class ItemTile extends StatelessWidget {
final Item item;
const ItemTile({Key? key, required this.item}) : super(key: key);

@override
Widget build(BuildContext context) {
child: Stack(
children: [
const TileBackground(),
CustomTile(item: item),
],
),
);
}
}

class CustomTile extends StatelessWidget {
final Item item;
const CustomTile({
Key? key,
required this.item,
}) : super(key: key);

@override
Widget build(BuildContext context) {
child: Container(
decoration: customDecoration(),
child: ListTile(
item.icon,
color: Colors.white,
),
title: Text(item.name),
subtitle: Text(item.description),
),
),
);
}
}

BoxDecoration customDecoration() {
return BoxDecoration(
color: const Color.fromARGB(255, 0x7d, 0xcf, 0xff),
border: Border.all(
color: Colors.black,
width: 2.0,
),
);
}

class TileBackground extends StatelessWidget {
const TileBackground({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Positioned.fill(
child: Container(
decoration: BoxDecoration(
color: const Color.fromARGB(255, 202, 255, 127),
border: Border.all(
color: Colors.black,
width: 2.0,
),
),
),
),
);
}
}``````

Transparent AppBar in Flutter

``````

const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.blueAccent.withAlpha(200),
title: const Text('Transparent App Bar in Flutter'),
),
body: const ImagesScrollView(),
);
}
}

class ImagesScrollView extends StatelessWidget {
const ImagesScrollView({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return SingleChildScrollView(
top: 40.0,
left: 10.0,
right: 10.0,
),
child: Column(
children: images
.map((url) => ElevatedNetworkImage(url: url))
.expand(
(img) => [
img,
const SizedBox(height: 30.0),
],
)
.toList(),
),
),
);
}
}

class ElevatedNetworkImage extends StatelessWidget {
final String url;
const ElevatedNetworkImage({Key? key, required this.url}) : super(key: key);

@override
Widget build(BuildContext context) {
return PhysicalShape(
color: Colors.white,
clipper: Clipper(),
elevation: 20.0,
clipBehavior: Clip.none,
child: CutEdges(
child: Image.network(url),
),
);
}
}

class Clipper extends CustomClipper<Path> {
static const variance = 0.2;
static const reverse = 1.0 - variance;

@override
Path getClip(Size size) {
final path = Path();

path.moveTo(0.0, size.height * Clipper.variance);
path.lineTo(size.width * Clipper.variance, 0.0);
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height * Clipper.reverse);
path.lineTo(size.width * Clipper.reverse, size.height);
path.lineTo(0.0, size.height);
path.lineTo(0.0, size.height * Clipper.variance);
path.close();
return path;
}

@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

class CutEdges extends StatelessWidget {
final Widget child;

const CutEdges({Key? key, required this.child}) : super(key: key);

@override
Widget build(BuildContext context) {
return ClipPath(
clipper: Clipper(),
child: child,
);
}
}``````

Constructors on Abstract Classes in Dart

``````

import 'dart:developer' as devtools show log;

extension Log on Object {
void log() => devtools.log(toString());
}

enum Type { dog, cat }

abstract class CanRun {
final Type type;
const CanRun({required this.type});
}

class Cat extends CanRun {
const Cat() : super(type: Type.cat);
}

class Dog extends CanRun {
const Dog() : super(type: Type.dog);
}``````

`@useResult` in Dart

``````

import 'package:meta/meta.dart' show useResult;

class Person {
final String firstName;
final String lastName;

const Person({
required this.firstName,
required this.lastName,
});

@useResult
String fullName() => '\$firstName \$lastName';
}

void printFullName() {
const Person(
firstName: 'Foo',
lastName: 'Bar',
).fullName();
}``````

`@mustCallSuper` in Dart

``````

class Animal {
@mustCallSuper
void run() {}
}

class Dog extends Animal {
@override
void run() {}
}``````

`Object.hash` in Dart

``````

final bool isActive;
final String name;
required this.isActive,
required this.name,
});
isActive: true,
name: name,
);
@override
bool operator ==(covariant BreadCrumb other) =>
isActive == other.isActive && name == other.name;

@override
int get hashCode => Object.hash(isActive, name);
}``````

Expanded Equally in Flutter

``````

import 'package:flutter/material.dart';

void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
),
);
}

extension ExpandEqually on Iterable<Widget> {
Iterable<Widget> expandedEqually() => map(
(w) => Expanded(
flex: 1,
child: w,
),
);
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
height: 200,
color: Colors.yellow,
),
Container(
height: 200,
color: Colors.blue,
),
].expandedEqually().toList(),
)
],
),
);
}
}``````

Random Iterable Value in Dart

``````

import 'dart:math' as math show Random;

extension RandomElement<T> on Iterable<T> {
T getRandomElement() => elementAt(
math.Random().nextInt(length),
);
}

final colors = [Colors.blue, Colors.red, Colors.brown];

class HomePage extends StatelessWidget {
final color = ValueNotifier<MaterialColor>(
colors.getRandomElement(),
);
HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('List.Random in Flutter'),
),
body: ColorPickerButton(color: color),
);
}
}

class ColorPickerButton extends StatelessWidget {
final ValueNotifier<MaterialColor> color;

const ColorPickerButton({
Key? key,
required this.color,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return ValueListenableBuilder<Color>(
valueListenable: color,
builder: (context, value, child) {
child: CenteredTight(
child: TextButton(
style: TextButton.styleFrom(backgroundColor: value),
onPressed: () {
color.value = colors.getRandomElement();
},
child: const Text(
'Change color',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),
);
},
);
}
}``````

Hardcoded Strings in Flutter

``````

extension Hardcoded on String {
String get hardcoded => '\$this ๐งจ';
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'My hardcoded string'.hardcoded,
),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('String in body'.hardcoded),
],
),
);
}
}``````

Manually Scroll in List View in Flutter

``````// Free Flutter Course ๐ https://linktr.ee/vandadnp

import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';

class HomePage extends StatelessWidget {
final _controller = ItemScrollController();
HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Testing'),
),
body: ScrollablePositionedList.builder(
itemScrollController: _controller,
itemCount: allImages.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return IndexSelector(
count: allImages.length,
onSelected: (index) {
_controller.scrollTo(
index: index + 1,
duration: const Duration(milliseconds: 370),
);
},
);
} else {
return ImageWithTitle(index: index);
}
},
),
);
}
}

class ImageWithTitle extends StatelessWidget {
final int index;
const ImageWithTitle({
Key? key,
required this.index,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
'Image \$index',
style: const TextStyle(fontSize: 30.0),
),
Image.network(allImages.elementAt(index - 1)),
],
);
}
}

typedef OnIndexSelected = void Function(int index);

class IndexSelector extends StatelessWidget {
final int count;
final OnIndexSelected onSelected;
final String prefix;
const IndexSelector({
Key? key,
required this.count,
required this.onSelected,
this.prefix = 'Image',
}) : super(key: key);

@override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: Iterable.generate(
count,
(index) => TextButton(
onPressed: () {
onSelected(index);
},
child: Text('\$prefix \${index + 1}'),
),
).toList(),
),
);
}
}

const imageUrls = [
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];``````

`AsyncSnapshot` to `Widget` in Flutter

``````

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
),
);
}

final future = Future<String>.delayed(
const Duration(seconds: 3),
() => 'Hello world',
);

typedef ResolveToWidget<T> = Widget Function(
ConnectionState connectionState,
AsyncSnapshot<T> snapshot,
);

extension Materialize on AsyncSnapshot {
Widget materialize(ResolveToWidget f) => f(
connectionState,
this,
);
}

class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Hooks'),
),
body: useFuture(future).materialize((connectionState, snapshot) {
switch (connectionState) {
case ConnectionState.done:
return Text(snapshot.data ?? '');
default:
return const CircularProgressIndicator();
}
}),
);
}
}``````

``````

@immutable
final String title;
final bool isActive;
required this.title,
required this.isActive,
});
title: title,
isActive: true,
);
}

@override
String toString() => title;
}

class BreatCrumbPathView extends StatelessWidget {

const BreatCrumbPathView({
Key? key,
required this.path,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final title = path.isActive ? '\${path.title} โ' : path.title;
child: Text(
title,
style: TextStyle(
height: 1.0,
fontSize: 20.0,
color: path.isActive ? Colors.blueAccent : Colors.black,
),
),
);
}
}

Key? key,
required this.paths,
required this.onTapped,
}) : super(key: key);

@override
Widget build(BuildContext context) {
stream: paths,
builder: (context, snapshot) {
final List<Widget> views;
switch (snapshot.connectionState) {
case ConnectionState.waiting:
case ConnectionState.active:
final paths = snapshot.data ?? [];
final views = paths
.map(
(path) => GestureDetector(
onTap: () => onTapped(path),
child: BreatCrumbPathView(path: path),
),
)
.toList();
return Wrap(
spacing: 4.0,
children: views,
alignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.center,
);
default:
return Wrap();
}
},
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
late final TextEditingController _textController;

@override
void initState() {
onListen: () {
},
);
_textController = TextEditingController();
super.initState();
}

@override
void dispose() {
_textController.dispose();
_pathsController.close();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
paths: _pathsController.stream,
onTapped: (path) async {
context,
path,
);
},
),
TextField(
controller: _textController,
textAlign: TextAlign.center,
decoration: const InputDecoration(
hintText: 'Enter a new path here',
),
),
TextButton(
onPressed: () {
_paths = [
..._paths.map((p) => p.activated()),
title: _textController.text,
isActive: false,
),
];
_textController.clear();
},
child: const Center(
),
),
],
),
),
);
}
}

BuildContext context,
) {
return showDialog(
context: context,
builder: (context) {
content: Text('You tapped on \$path'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('OK'),
),
],
);
},
);
}``````

Unique `Map` Values in Dart

``````

import 'dart:developer' as devtools show log;

extension ContainsDuplicateValues on Map {
bool get containsDuplicateValues =>
{...values}.length != values.length;
}

extension Log on Object {
void log() => devtools.log(toString());
}

const people1 = {
1: 'Foo',
2: 'Bar',
};
const people2 = {
1: 'Foo',
2: 'Foo',
};

void testIt() {
people1.containsDuplicateValues.log(); // false
people2.containsDuplicateValues.log(); // true
}``````

Smart Quotes/Dashes in Flutter

``````

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Smart Quotes/Dashes in Flutter'),
),
child: TextField(
smartQuotesType: SmartQuotesType.disabled,
smartDashesType: SmartDashesType.disabled,
maxLines: null,
),
),
);
}
}``````

Haptic Feedback in Flutter

``````

class CenteredTight extends StatelessWidget {
final Widget child;
const CenteredTight({
Key? key,
required this.child,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [child],
);
}
}

class FullscreenImage extends StatefulWidget {
final String imageUrl;
const FullscreenImage({Key? key, required this.imageUrl}) : super(key: key);

@override
State<FullscreenImage> createState() => _FullscreenImageState();
}

class _FullscreenImageState extends State<FullscreenImage> {
var shouldDisplayAppbar = false;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: shouldDisplayAppbar ? AppBar(title: const Text('Image')) : null,
body: GestureDetector(
onTap: () {
setState(() => shouldDisplayAppbar = !shouldDisplayAppbar);
},
child: Image.network(
widget.imageUrl,
alignment: Alignment.center,
width: double.infinity,
height: double.infinity,
fit: BoxFit.cover,
),
),
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Haptic Feedback in Flutter'),
),
child: CenteredTight(
child: FractionallySizedBox(
heightFactor: 0.7,
child: GestureDetector(
onLongPress: () async {
await HapticFeedback.lightImpact();
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const FullscreenImage(
imageUrl: imageUrl,
);
},
),
);
},
child: Image.network(imageUrl),
),
),
),
),
);
}
}``````

Localization Delegates in Flutter

``````

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(
MaterialApp(
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BlocProvider<AuthBloc>(
create: (context) => AuthBloc(FirebaseAuthProvider()),
child: const HomePage(),
),
routes: {
createOrUpdateNoteRoute: (context) => const CreateUpdateNoteView(),
},
),
);
}``````

Extending Functions in Dart

``````

import 'dart:developer' as devtools show log;

extension ToTextButton on VoidCallback {
TextButton toTextButton(String title) {
return TextButton(
onPressed: this,
child: Text(title),
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Extensions in Flutter'),
),
body: () {
devtools.log('I am pressed');
}.toTextButton('Press me'),
);
}
}``````

Paginated `ListView` in Flutter

``````

@immutable
class Season {
final String name;
final String imageUrl;
const Season({required this.name, required this.imageUrl});
const Season.spring()
: name = 'Spring',
imageUrl = 'https://cnn.it/3xu58Ap';
const Season.summer()
: name = 'Summer',
imageUrl = 'https://bit.ly/2VcCSow';
const Season.autumn()
: name = 'Autumn',
imageUrl = 'https://bit.ly/3A3zStC';
const Season.winter()
: name = 'Winter',
imageUrl = 'https://bit.ly/2TNY7wi';
}

const allSeasons = [
Season.spring(),
Season.summer(),
Season.autumn(),
Season.winter()
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = width / (16.0 / 9.0);
return Scaffold(
appBar: AppBar(
title: const Text('PageScrollPhysics in Flutter'),
),
body: SizedBox(
width: width,
height: height,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
physics: const PageScrollPhysics(),
clipBehavior: Clip.antiAlias,
children: allSeasons.map((season) {
return SizedBox(
width: width,
height: height,
child: Image.network(
season.imageUrl,
height: height,
fit: BoxFit.cover,
),
);
}).toList(),
),
),
);
}
}``````

Immutable Classes in Dart

``````

import 'package:flutter/foundation.dart' show immutable;

@immutable
abstract class Animal {
final String name;
const Animal(this.name);
}

class Cat extends Animal {
const Cat() : super('Cindy Clawford');
}

class Dog extends Animal {
int age;
Dog()
: age = 0,
super('Bark Twain');
}``````

Card Widget in Flutter

``````

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Card in Flutter'),
),
body: Image.network(
'https://bit.ly/36fNNj9',
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
return Card(
child: child,
clipBehavior: Clip.antiAlias,
);
},
if (totalBytes != null && bytesLoaded != null) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [CircularProgressIndicator()],
);
} else {
return child;
}
},
),
);
}
}``````

List Equality Ignoring Ordering in Dart

``````

@immutable
class Person {
final String name;
const Person(this.name);

@override
bool operator ==(covariant Person other) => other.name == name;

@override
int get hashCode => name.hashCode;

@override
String toString() => name;
}

const people1 = [Person('Foo'), Person('Bar'), Person('Baz')];
const people2 = [Person('Foo'), Person('Bar'), Person('Baz')];
const people3 = [Person('Bar'), Person('Bar'), Person('Baz')];
const people4 = [Person('Bar'), Person('Baz')];

extension IsEqualToIgnoringOrdering<T> on List<T> {
bool isEqualToIgnoringOrdering(List<T> other) =>
length == other.length &&
{...this}.intersection({...other}).length == length;
}

void testIt() {
assert(people1.isEqualToIgnoringOrdering(people2));
assert(!people1.isEqualToIgnoringOrdering(people3));
assert(!people2.isEqualToIgnoringOrdering(people3));
assert(!people3.isEqualToIgnoringOrdering(people4));
}``````

Shorten GitHub URLs in Dart

``````// Want to support my work ๐ค? https://buymeacoffee.com/vandad

import 'dart:developer' as devtools show log;
import 'dart:convert' show utf8;

Future<Uri> shortenGitHubUrl(String longUrl) =>
HttpClient().postUrl(Uri.parse('https://git.io/')).then((req) {
return req.close();
}).then(
(resp) async {
try {
if (location != null) {
return Uri.parse(location);
} else {
throw 'No location was specified';
}
} catch (e) {
return Uri.parse(longUrl);
}
},
);

void testIt() async {
final uri = await shortenGitHubUrl(
devtools.log(uri.toString());
// logs https://git.io/JS5Fm
}``````

Time Picker in Flutter

``````

class HomePage extends StatelessWidget {
final timeOfDay = ValueNotifier<TimeOfDay?>(null);
HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: timeOfDay,
builder: (context, value, child) {
final title = timeOfDay.value?.toString() ?? 'Time Picker in Flutter';
return Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(
child: TextButton(
onPressed: () async {
timeOfDay.value = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
initialEntryMode: TimePickerEntryMode.input,
);
},
child: const Text('Please Pick a time'),
),
),
);
},
);
}
}``````

Throttled Print in Flutter

``````

Stream<String> getStream() => Stream.periodic(
const Duration(milliseconds: 100),
(e) => DateTime.now().toString(),
);

void testIt() async {
await for (final now in getStream()) {
debugPrintThrottled(now);
}
}``````

Map Equality in Dart

``````

typedef Name = String;
typedef Age = int;

const Map<Name, Age> people1 = {
'foo': 20,
'bar': 30,
'baz': 40,
};

const Map<Name, Age> people2 = {
'baz': 40,
'foo': 20,
'bar': 30,
};

void testIt() {
assert(mapEquals(people1, people2));
}``````

Unique Maps in Dart

``````

import 'dart:developer' as devtools show log;

typedef Name = String;
typedef Age = int;

const Map<Name, Age> people = {
'foo': 20,
'bar': 30,
'baz': 20,
};

extension Unique<K, V> on Map<K, V> {
Map<K, V> unique() {
Map<K, V> result = {};
for (final value in {...values}) {
final firstKey = keys.firstWhereOrNull((key) => this[key] == value);
if (firstKey != null) {
result[firstKey] = value;
}
}
return result;
}
}

void testIt() {
final uniques = people.unique();
devtools.log(uniques.toString());
// prints: {foo: 20, bar: 30}
}``````

Raw Auto Complete in Flutter

``````

const emailProviders = [
'gmail.com',
'hotmail.com',
'yahoo.com',
];

const icons = [
'https://bit.ly/3HsvvvB',
'https://bit.ly/3n6GW4L',
'https://bit.ly/3zf2RLy',
];

class EmailTextField extends StatefulWidget {
const EmailTextField({Key? key}) : super(key: key);

@override
State<EmailTextField> createState() => _EmailTextFieldState();
}

class _EmailTextFieldState extends State<EmailTextField> {
late final TextEditingController _controller;
late final FocusNode _focus;

@override
Widget build(BuildContext context) {
return RawAutocomplete<String>(
textEditingController: _controller,
focusNode: _focus,
fieldViewBuilder: (_, controller, focusNode, onSubmitted) {
return TextFormField(
controller: controller,
focusNode: focusNode,
onFieldSubmitted: (value) {
onSubmitted();
},
);
},
optionsBuilder: (textEditingValue) {
final lastChar = textEditingValue.text.characters.last;
if (lastChar == '@') {
return emailProviders;
} else {
return [];
}
},
optionsViewBuilder: (context, onSelected, options) {
return OptionsList(
onSelected: onSelected,
options: options,
controller: _controller,
);
},
);
}

@override
void initState() {
_controller = TextEditingController();
_focus = FocusNode();
super.initState();
}

@override
void dispose() {
_focus.dispose();
_controller.dispose();
super.dispose();
}
}

class OptionsList extends StatelessWidget {
final Iterable<String> options;
final AutocompleteOnSelected<String> onSelected;
final TextEditingController controller;
const OptionsList({
Key? key,
required this.onSelected,
required this.options,
required this.controller,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topLeft,
child: Material(
child: SizedBox(
height: 150,
child: ListView.builder(
itemCount: options.length,
itemBuilder: (context, index) {
final option = options.elementAt(index);
return GestureDetector(
onTap: () => onSelected(controller.text + option),
child: ListTile(
horizontalTitleGap: 2.0,
icons[index],
width: 24,
height: 24,
),
title: Text(option),
),
);
},
),
),
),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Raw Auto Complete in Flutter'),
),
child: EmailTextField(),
),
);
}
}``````

Title on `Object` in Dart

``````

import 'dart:developer' as devtools show log;

extension CapTitle on Object {
String get capitalizedTitle {
String str;
if (this is Enum) {
str = (this as Enum).name;
} else {
str = toString();
}
return str[0].toUpperCase() + str.substring(1);
}
}

enum EmailProviders { gmail, yahoo, hotmail }

void testIt() {
EmailProviders.values.map((p) => p.capitalizedTitle).forEach(devtools.log);
// prints these:
// Gmail
// Yahoo
// Hotmail
}``````

Compute in Flutter

``````

import 'dart:developer' as devtools show log;
import 'dart:convert' show utf8, json;

@immutable
class Person {
final String name;
final int age;
const Person(this.name, this.age);
Person.fromJson(Map<String, dynamic> json)
: name = json["name"] as String,
age = json["age"] as int;
}

.getUrl(uri)
.then((req) => req.close())
.then((response) => response.transform(utf8.decoder).join())
.then((jsonString) => json.decode(jsonString) as List<dynamic>)
.then((json) => json.map((map) => Person.fromJson(map)));

void testIt() async {
final persons = await compute(
Uri.parse('https://bit.ly/3Jjcw8R'),
);
devtools.log(persons.toString());
}``````

Filter on `Map` in Dart

``````

import 'dart:developer' as devtools show log;

typedef Name = String;
typedef Age = int;

extension Filter<K, V> on Map<K, V> {
Iterable<MapEntry<K, V>> filter(
bool Function(MapEntry<K, V> entry) f,
) sync* {
for (final entry in entries) {
if (f(entry)) {
yield entry;
}
}
}
}

const Map<Name, Age> people = {
'foo': 20,
'bar': 31,
'baz': 25,
'qux': 32,
};

void testIt() async {
final peopleOver30 = people.filter((e) => e.value > 30);
devtools.log(peopleOver30.toString());
// โ๐ป prints (MapEntry(bar: 31), MapEntry(qux: 32))
}``````

Type Alias in Dart

``````

const Map<String, int> people1 = {
'foo': 20,
'bar': 30,
'baz': 25,
};

typedef Age = int;

const Map<String, Age> people2 = {
'foo': 20,
'bar': 30,
'baz': 25,
};``````

`ValueNotifier` in Flutter

``````

class DynamicToolTipTextField extends StatelessWidget {
final TextInputType? keyboardType;
final ValueNotifier<String?> hint;
final TextEditingController controller;
const DynamicToolTipTextField({
Key? key,
required this.hint,
required this.controller,
this.keyboardType,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: hint,
builder: (context, value, child) {
return TextField(
keyboardType: keyboardType,
controller: controller,
decoration: InputDecoration(
hintText: value as String?,
),
);
},
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

@immutable
abstract class HasText {
String get text;
}

enum Hint { pleaseEnterYourEmail, youForgotToEnterYourEmail }

extension GetText on Hint {
String get text {
switch (this) {
case Hint.youForgotToEnterYourEmail:
return 'You forgot to enter your email';
}
}
}

class _HomePageState extends State<HomePage> {
late final ValueNotifier<String?> _hint;
late final TextEditingController _controller;

@override
void initState() {
_controller = TextEditingController();
super.initState();
}

@override
void dispose() {
_hint.dispose();
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ValueNotifier in Flutter'),
),
child: Column(
children: [
DynamicToolTipTextField(
hint: _hint,
controller: _controller,
),
TextButton(
onPressed: () async {
final email = _controller.text;
if (email.trim().isEmpty) {
_hint.value = Hint.youForgotToEnterYourEmail.text;
await Future.delayed(const Duration(seconds: 2));
}
},
)
],
),
),
);
}
}``````

Object to Integer in Dart

``````

enum ToIntStrategy { round, floor, ceil }

typedef ToIntOnErrorHandler = int Function(Object e);

extension ToInt on Object {
int toInteger({
ToIntStrategy strategy = ToIntStrategy.round,
ToIntOnErrorHandler? onError,
}) {
try {
final doubleValue = double.parse(toString());
switch (strategy) {
case ToIntStrategy.round:
return doubleValue.round();
case ToIntStrategy.floor:
return doubleValue.floor();
case ToIntStrategy.ceil:
return doubleValue.ceil();
}
} catch (e) {
if (onError != null) {
return onError(e);
} else {
return -1;
}
}
}
}

void testIt() {
assert('xyz'.toInteger(onError: (_) => 100) == 100);
assert(1.5.toInteger() == 2);
assert(1.6.toInteger() == 2);
assert('1.2'.toInteger(strategy: ToIntStrategy.floor) == 1);
assert('1.2'.toInteger(strategy: ToIntStrategy.ceil) == 2);
assert('1.5'.toInteger(strategy: ToIntStrategy.round) == 2);
}``````

Image Opacity in Flutter

``````

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _opacity;

@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
_opacity = Tween(begin: 0.0, end: 1.0).animate(_controller);
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Image.network(
'https://bit.ly/3ywI8l6',
opacity: _opacity,
),
Slider(
value: _controller.value,
onChanged: (value) {
setState(() => _controller.value = value);
},
),
],
),
);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}
}``````

Covariant in Dart

``````// Want to support my work ๐ค? https://buymeacoffee.com/vandad

class Person {
final String name;
const Person(this.name);
@override
bool operator ==(Object other) {
if (other is! Person) throw ArgumentError('Was expecting a person');
return other.name == name;
}

@override
int get hashCode => name.hashCode;
}

class Person {
final String name;
const Person(this.name);
@override
bool operator ==(covariant Person other) => other.name == name;

@override
int get hashCode => name.hashCode;
}``````

Custom Errors in Streams in Dart

``````

class Either<V, E extends Exception> {
final V? value;
final E? error;

const Either({this.value, this.error}) : assert((value ?? error) != null);

bool get isError => error != null;
bool get isValue => value != null;

@override
String toString() {
if (value != null) {
return "Value: \$value";
} else if (error != null) {
return "Error: \$error";
} else {
return 'Unknown state';
}
}
}

class DateTimeException implements Exception {
final String reason;
const DateTimeException({required this.reason});
}

Stream<Either<DateTime, DateTimeException>> getDateTime() async* {
var index = 0;
while (true) {
if (index % 2 == 0) {
yield Either(value: DateTime.now());
} else {
yield const Either(
error: DateTimeException(reason: 'Something is wrong!'),
);
}
index += 1;
}
}

void testIt() async {
await for (final value in getDateTime()) {
dev.log(value.toString());
}
}``````

Shake Animation in Flutter

``````

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

const animationWidth = 10.0;

class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final TextEditingController _textController;
late final AnimationController _animationController;
late final Animation<double> _offsetAnim;
var _hintText = '';

@override
void initState() {
_hintText = defaultHintText;
_textController = TextEditingController();
_animationController = AnimationController(
duration: const Duration(milliseconds: 370),
vsync: this,
);
_offsetAnim = Tween(
begin: 0.0,
end: animationWidth,
).chain(CurveTween(curve: Curves.elasticIn)).animate(
_animationController,
(status) {
if (status == AnimationStatus.completed) {
_animationController.reverse();
}
},
);
super.initState();
}

@override
void dispose() {
_textController.dispose();
_animationController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Shake Animation in Flutter'),
),
child: Column(
children: [
AnimatedBuilder(
animation: _offsetAnim,
builder: (context, child) {
return Container(
margin: const EdgeInsets.symmetric(
horizontal: animationWidth,
),
left: _offsetAnim.value + animationWidth,
right: animationWidth - _offsetAnim.value,
),
child: TextField(
controller: _textController,
decoration: InputDecoration(
hintText: _hintText,
),
),
);
},
),
TextButton(
onPressed: () async {
if (_textController.text.isEmpty) {
setState(() {
_hintText = 'You forgot to enter your email ๐ฅฒ';
_animationController.forward(from: 0.0);
});
await Future.delayed(const Duration(seconds: 3));
setState(() {
_hintText = defaultHintText;
});
}
},
],
),
),
);
}
}``````

Throw Enums in Dart

``````

import 'dart:developer' as dev show log;

void thisMethodThrows() {
}

void testIt() {
try {
thisMethodThrows();
} on Exceptions catch (e) {
switch (e) {
dev.log("Invalid user name");
break;
break;
}
}
}``````

`Future` Error Test in Flutter

``````

import 'dart:developer' as dev show log;

@immutable
abstract class UserException implements Exception {}

class InvalidUserAgeException extends UserException {}

@immutable
class User {
final String name;
final int age;
User({required this.name, required this.age}) {
if (!name.contains(RegExp(r'^[a-z ]+\$'))) {
} else if (age < 0 || age > 130) {
throw InvalidUserAgeException();
}
}
const User.anonymous()
: name = 'Anonymous User',
age = 0;
}

Future<User> getAsyncUser() => Future.delayed(
const Duration(seconds: 1),
() => User(name: 'Foo', age: 20),
);

void testIt() async {
final user = await getAsyncUser()
.catchError(
test: (e) => e is InvalidUserNameException,
)
.catchError(
handleInvalidAgeException,
test: (e) => e is InvalidUserAgeException,
);
dev.log(user.toString());
}

dev.log(e.toString());
return const User.anonymous();
}

User handleInvalidAgeException(Object? e) {
dev.log(e.toString());
return const User.anonymous();
}``````

Generic URL Retrieval in Dart

``````

import 'dart:developer' as dev show log;

typedef StatusCodeResultBuilder<T> = Future<T> Function(
int statusCode,
HttpClientResponse response,
);

extension Get on Uri {
Future<T?> getBody<T>({
StatusCodeResultBuilder<T>? statusBuilder,
T Function(Object error)? onNetworkError,
}) async {
try {
final apiCall = await HttpClient().getUrl(this);
final response = await apiCall.close();
final builder = statusBuilder;
if (builder == null) {
final data = await response.transform(convert.utf8.decoder).join();
if (data is T) {
return data as T?;
} else {
return null;
}
} else {
final result = await builder(response.statusCode, response);
return result;
}
} catch (e) {
if (onNetworkError != null) {
return onNetworkError(e);
} else {
return null;
}
}
}
}

extension ToUri on String {
Uri toUri() => Uri.parse(this);
}

const url = 'https://bit.ly/3EKWcLa';

void testIt() async {
final json = await url.toUri().getBody<String>(
statusBuilder: (statusCode, response) async {
if (statusCode == 200) {
return await response.transform(convert.utf8.decoder).join();
} else {
return "{'error': 'Unexpected status code \$statusCode'}";
}
},
onNetworkError: (error) {
return "{'error': 'Got network error'}";
},
);
if (json != null) {
dev.log(json);
}
}``````

Custom Error Widget in Flutter

``````

class MyErrorWidget extends StatelessWidget {
final String text;
const MyErrorWidget({Key? key, required this.text}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.network('https://bit.ly/3gHlTCU'),
Text(
text,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.red,
),
),
],
),
),
),
);
}
}

void main() {
ErrorWidget.builder = (FlutterErrorDetails details) {
bool isInDebugMode = false;
assert(() {
isInDebugMode = true;
return true;
}());
final message = details.exception.toString();
if (isInDebugMode) {
return MyErrorWidget(text: message);
} else {
return Text(
message,
textAlign: TextAlign.center,
);
}
};

runApp(
const MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
),
);
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Error Widget in Flutter'),
),
body: Builder(
builder: (context) {
throw Exception(
'Here is an exception that is caught by our custom Error Widget in Flutter');
},
),
);
}
}``````

Handle Multiple `Future` Errors in Dart

``````

import 'dart:developer' as dev show log;

Future<Iterable<T>> waitOn<T>(
Iterable<Future<T>> futures,
Function onError,
) async {
List<T> result = [];
for (final future in futures) {
final value = await future.catchError(onError);
}
return result;
}

void testIt() async {
final f1 = Future.error('First Error');
final f2 = Future.delayed(const Duration(seconds: 2), () => 10);
final f3 = Future.error('Second error');
final f4 = Future.delayed(const Duration(seconds: 2), () => 'Hello world');
final result = await waitOn([f1, f2, f3, f4], (error) => -1);
dev.log(result.toString()); // [-1, 10, -1, Hello world]
}``````

`Future` Error Handling in Dart

``````import 'dart:developer' as dev show log;

extension OnError<T> on Future<T> {
Future<T> onErrorJustReturn(T value) => catchError((_) => value);
}

Future<bool> isUserRegistered({required String email}) => HttpClient()
.postUrl(Uri.parse('https://website'))
.then((req) {
return req.close();
})
.then((resp) => resp.statusCode == 200)
.onErrorJustReturn(false);

void testIt() async {
final isFooRegistered = await isUserRegistered(email: 'foo@flutter.com');
dev.log(isFooRegistered.toString());
}``````

String to Toast in Flutter

``````

extension Toast on String {
Future<void> showAsToast(BuildContext context,
{required Duration duration}) async {
final scaffold = ScaffoldMessenger.of(context);
final controller = scaffold.showSnackBar(
SnackBar(
content: Text(this),
backgroundColor: const Color(0xFF24283b),
behavior: SnackBarBehavior.floating,
elevation: 2.0,
shape: RoundedRectangleBorder(
),
),
);
await Future.delayed(duration);
controller.close();
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextButton(
onPressed: () => 'Hello, World!'.showAsToast(
context,
duration: const Duration(seconds: 2),
),
child: const Text('Show the snackbar'),
),
),
);
}
}``````

Waiting in Dart

``````

Future<void> wait(Duration d) async {
await Future.delayed(d);
}

extension Wait on int {
Future<void> get seconds => wait(Duration(seconds: this));
Future<void> get minutes => wait(Duration(minutes: this));
}

void testIt() async {
await 2.seconds;
'After 2 seconds'.log();
await 3.minutes;
'After 3 minutes'.log();
}

extension Log on Object {
void log() {
dev.log(toString());
}
}``````

``````

typedef CloseDialog = void Function();

required BuildContext context,
required String text,
}) {
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
const CircularProgressIndicator(),
const SizedBox(height: 10),
Text(text),
],
),
);
showDialog(
context: context,
barrierDismissible: false,
builder: (_) => dialog,
);

return () => Navigator.of(context).pop();
}

void testIt(BuildContext context) async {
context: context,
);
await Future.delayed(const Duration(seconds: 2));
closeDialog();
}``````

Compact Map on `Map<K,V>` in Dart

``````

const foo = 'foo';
const bar = 'bar';
const baz = 'baz';

const namesAndAges = {
foo: 20,
bar: 25,
baz: 18,
};

const acceptedNames = [
foo,
bar,
];

void testIt() {
final acceptedAges = namesAndAges.compactMap(
(e) => acceptedNames.contains(e.key) ? e.value : null,
);
acceptedAges.log(); // [20, 25]
}

extension CompactMap<T, E> on Map<T, E> {
Iterable<V> compactMap<V>(V? Function(MapEntry<T, E>) f) sync* {
for (final entry in entries) {
final extracted = f(entry);
if (extracted != null) {
yield extracted;
}
}
}
}``````

Query Parameters in Dart

``````

import 'dart:developer' as devtools show log;

const host = 'freecurrencyapi.net';
const path = '/api/v2/latest';
const apiKey = 'YOUR_API_KEY';
const baseCurrency = 'sek';
const params = {
'apiKey': apiKey,
'base_currency': 'sek',
};

const url = 'https://\$host\$path?apiKey=\$apiKey&base_currency=\$baseCurrency';
url.log();
}

void doThis() {
final url = Uri.https(host, path, params);
url.log();
}

extension Log on Object {
void log() {
devtools.log(toString());
}
}``````

Multiple Gradients in Container in Flutter

``````

Key? key,
required this.builder,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Stack(
children: builder().entries.map((mapEntry) {
final widget = mapEntry.value;
child: widget,
);
}).toList(),
);
}
}

final Widget? child;

: super(key: key);

@override
Widget build(BuildContext context) {
return Positioned.fill(
child: Container(
decoration: BoxDecoration(
),
child: child,
),
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
builder: () => {
},
),
);
}
}

const transparent = Color(0x00FFFFFF);

begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xff2ac3de),
transparent,
],
);

begin: Alignment.bottomRight,
end: Alignment.topLeft,
colors: [
Color(0xffbb9af7),
transparent,
],
);

begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [
Color(0xff9ece6a),
transparent,
],
);

begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xff7dcfff),
transparent,
],
);

void main() {
runApp(
const MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
),
);
}``````

Filter on `Stream<List<T>>` in Dart

``````

import 'dart:developer' as devtools show log;

extension Filter<T> on Stream<List<T>> {
Stream<List<T>> filter(bool Function(T) where) =>
map((items) => items.where(where).toList());
}

final Stream<List<int>> allNumbers = Stream.periodic(
const Duration(seconds: 1),
(value) => [for (var i = 0; i < value; i++) i],
);

bool isEven(num value) => value % 2 == 0;
bool isOdd(num value) => value % 2 != 0;

extension EvenOdd<E extends num> on Stream<List<E>> {
Stream<List<E>> get evenNumbers => filter(isEven);
Stream<List<E>> get oddNumbers => filter(isOdd);
}

await for (final evenNumber in allNumbers.evenNumbers) {
devtools.log('All even numbers: \$evenNumber');
}
}

await for (final oddNumber in allNumbers.oddNumbers) {
devtools.log('All odd numbers: \$oddNumber');
}
}``````

Generic Route Arguments in Flutter

``````extension GetArgument on BuildContext {
T? getArgument<T>() {
final modalRoute = ModalRoute.of(this);
if (modalRoute != null) {
final args = modalRoute.settings.arguments;
if (args != null && args is T) {
return args as T;
}
}
return null;
}
}``````

``````typedef DialogOptionBuilder<T> = Map<String, T> Function();

Future<T?> showGenericDialog<T>({
required BuildContext context,
required String title,
required String content,
required DialogOptionBuilder optionsBuilder,
}) {
final options = optionsBuilder();
return showDialog<T>(
context: context,
builder: (context) {
title: Text(title),
content: Text(content),
actions: options.keys.map(
(optionTitle) {
final T value = options[optionTitle];
return TextButton(
onPressed: () {
Navigator.of(context).pop(value);
},
child: Text(optionTitle),
);
},
).toList(),
);
},
);
}

Future<bool> showLogOutDialog(BuildContext context) {
return showGenericDialog<bool>(
context: context,
title: 'Log out',
content: 'Are you sure you want to log out?',
optionsBuilder: () => {
'Cancel': false,
'Log out': true,
},
).then(
(value) => value ?? false,
);
}``````

GitHub API in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:convert' show utf8, json;

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

Future<Iterable<GithubUser>> getGithubFollowers(String accessToken) =>
HttpClient()
.getUrl(Uri.parse('https://api.github.com/user/followers'))
.then((req) {
return req.close();
})
.then((resp) => resp.transform(utf8.decoder).join())
.then((jsonStr) => json.decode(jsonStr) as List<dynamic>)
.then(
(jsonArray) => jsonArray.compactMap((element) {
if (element is Map<String, dynamic>) {
return element;
} else {
return null;
}
}),
)
.then(
(listOfMaps) => listOfMaps.map(
(map) => GithubUser.fromJson(map),
),
);

class GithubUser {
final String avatarUrl;

GithubUser.fromJson(Map<String, dynamic> json)
avatarUrl = json['avatar_url'] as String;
}

extension CompactMap<T> on List<T> {
List<E> compactMap<E>(E? Function(T element) f) {
Iterable<E> imp(E? Function(T element) f) sync* {
for (final value in this) {
final mapped = f(value);
if (mapped != null) {
yield mapped;
}
}
}

return imp(f).toList();
}
}

const token = 'PUT_YOUR_TOKEN_HERE';

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GitHub API in Flutter'),
),
body: FutureBuilder(
future: getGithubFollowers(token),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.done:
final users = (snapshot.data as Iterable<GithubUser>).toList();
return ListView.builder(
itemCount: users.length,
itemBuilder: (context, index) {
final user = users[index];
return ListTile(
);
},
);
default:
return const CircularProgressIndicator();
}
},
),
);
}
}

void main() {
runApp(
const MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
),
);
}``````

`ChangeNotifier` in Flutter

``````

import 'package:provider/provider.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

const allImages = [
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class ImageData {
final Uint8List imageData;
const ImageData(this.imageData);
}

class Images extends ChangeNotifier {
final List<ImageData> _items = [];

UnmodifiableListView<ImageData> get items => UnmodifiableListView(_items);

if (_items.length < allImages.length) {
notifyListeners();
final imageUrl = allImages[_items.length];
final networkAsset = NetworkAssetBundle(Uri.parse(imageUrl));
final imageData = ImageData(bytes);
_items.insert(0, imageData);
notifyListeners();
} else {
notifyListeners();
}
}
}
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ChangeNotifier in Flutter'),
actions: [
Consumer<Images>(
builder: (context, value, child) {
return IconButton(
onPressed: () {
},
);
},
)
],
),
child: Consumer<Images>(
builder: (context, value, child) {
final images = value.items;
return ListView.builder(
itemBuilder: (context, index) {
return Center(
child: Column(
children: const [
CircularProgressIndicator(),
SizedBox(height: 16.0),
],
),
);
} else {
final imageData = images[imageIndex].imageData;
return Column(
children: [
const SizedBox(height: 16.0),
],
);
}
},
);
},
),
),
);
}
}

final Uint8List imageData;
: super(key: key);

@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.black.withAlpha(40),
),
],
),
child: Image.memory(
imageData,
fit: BoxFit.cover,
),
);
}
}

void main() {
runApp(
MaterialApp(
home: ChangeNotifierProvider(
create: (_) => Images(),
child: const HomePage(),
),
debugShowCheckedModeBanner: false,
),
);
}``````

Refresh Indicator in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

const allImages = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
final _images = [allImages.first];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Refresh Indicator in Flutter'),
),
body: RefreshIndicator(
onRefresh: () async {
final nextIndex = _images.length + 1;
if (nextIndex < allImages.length) {
setState(() {
_images.insert(0, allImages[nextIndex]);
});
}
},
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: _images.length,
itemBuilder: (context, index) {
final imageUrl = _images[index];
return Column(
children: [
const SizedBox(height: 16),
],
);
},
),
),
);
}
}

final String url;
const RoundedImageWithShadow({Key? key, required this.url}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.black.withAlpha(40),
),
],
),
child: Image.network(url),
);
}
}``````

FlatMap in Dart

``````

extension FlatMap<T> on T? {
E? flatMap<E>(E? Function(T) f) => this != null ? f(this!) : null;
}

final user = FirebaseAuth.instance.currentUser;
if (user != null) {
return AuthUser.fromFirebase(user);
} else {
return null;
}
}

AuthUser? get doThis =>
FirebaseAuth.instance.currentUser.flatMap((u) => AuthUser.fromFirebase(u));``````

`OrientationBuilder` in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

final String url;
const RoundedImageWithShadow({Key? key, required this.url}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.black.withAlpha(40),
),
],
),
child: Image.network(url),
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: OrientationBuilder(
builder: (context, orientation) {
final int count;
switch (orientation) {
case Orientation.portrait:
count = 2;
break;
case Orientation.landscape:
count = 4;
break;
}
return GridView.count(
crossAxisCount: count,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
children: images
.toList(),
);
},
),
),
);
}
}

final images = [
'https://bit.ly/3qJ2FCf',
'https://bit.ly/3Hs9JsV',
'https://bit.ly/3cfT6Cv',
'https://bit.ly/30wGnIE',
'https://bit.ly/3kJYsum',
'https://bit.ly/3oDoMaJ',
'https://bit.ly/3FndXQM',
'https://bit.ly/3ci4i1f',
];``````

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Linear Gradient in Flutter'),
),
);
}
}

final String url;

Key? key,
required this.url,
}) : super(key: key);

@override
Widget build(BuildContext context) {
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.5),
offset: const Offset(0.0, 3.0),
)
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromARGB(255, 176, 229, 251),
Color.fromARGB(255, 235, 202, 250)
],
),
),
),
),
Image.network(url),
],
),
);
}
}``````

Bloc Text Editing Controller in Flutter

``````import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

abstract class Event {
const Event();
}

class SearchEvent extends Event {
final String searchString;
const SearchEvent(this.searchString);
}

class ClearSearch extends Event {}

class SearchBloc extends Bloc<Event, List<String>> {
static const names = ['foo', 'bar', 'baz'];

SearchBloc() : super(names) {
on<Event>((event, emit) {
if (event is SearchEvent) {
emit(names
.where((element) => element.contains(event.searchString))
.toList());
} else if (event is ClearSearch) {
emit(names);
}
});
}
}

class BlocTextEditingController extends TextEditingController {
SearchBloc? bloc;
BlocTextEditingController() {
if (text.isEmpty) {
} else {
}
});
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

const largeStyle = TextStyle(fontSize: 30);

class _HomePageState extends State<HomePage> {
late final BlocTextEditingController _controller;

@override
void initState() {
_controller = BlocTextEditingController();
super.initState();
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
_controller.bloc = BlocProvider.of<SearchBloc>(context);
return Scaffold(
appBar: AppBar(
title: Text('Bloc Search in Flutter'),
),
child: BlocBuilder<SearchBloc, List<String>>(
builder: (context, state) {
return ListView.builder(
itemBuilder: (context, index) {
if (index == 0) {
// search field
return TextField(
decoration: InputDecoration(
hintText: 'Enter search term here...',
hintStyle: largeStyle,
),
style: largeStyle,
controller: _controller,
);
} else {
final name = state[index - 1];
return ListTile(
title: Text(
name,
style: largeStyle,
),
);
}
},
itemCount: state.length + 1, // +1 for search
);
},
),
),
);
}
}``````

Blurred TabBar in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class CustomTabBar extends StatelessWidget {
final List<IconButton> buttons;

const CustomTabBar({Key? key, required this.buttons}) : super(key: key);

@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.bottomCenter,
child: ClipRect(
child: Container(
height: 80,
color: Colors.white.withOpacity(0.4),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 4.0, sigmaY: 4.0),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.5),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: buttons,
),
),
),
),
),
),
);
}
}

const summerIcon = Icon(
Icons.surfing,
size: 40.0,
color: Colors.teal,
);

const autumnIcon = Icon(
Icons.nature_outlined,
size: 40.0,
color: Colors.black45,
);

const winterIcon = Icon(
Icons.snowboarding,
size: 40.0,
color: Colors.black45,
);

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Blurred Tab Bar'),
),
body: Stack(
children: [
ListView.builder(
itemCount: images.length,
itemBuilder: (context, index) {
final url = images[index];
return Image.network(url);
},
),
CustomTabBar(
buttons: [
IconButton(
icon: summerIcon,
onPressed: () {
// implement me
},
),
IconButton(
icon: autumnIcon,
onPressed: () {
// implement me
},
),
IconButton(
icon: winterIcon,
onPressed: () {
// implement me
},
)
],
)
],
),
);
}
}``````

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

const videoIds = [
'BHACKCNDMW8',
'26h9hBZFl7w',
'glENND73k4Q',
'd0tU18Ybcvk',
];

class VideoView extends StatelessWidget {
final String videoId;
final _key = UniqueKey();

VideoView({required this.videoId});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Watch a Video'),
),
body: Center(
child: Container(
height: 232.0,
child: WebView(
key: _key,
javascriptMode: JavascriptMode.unrestricted,
),
),
),
);
}
}

final String videoId;
final String thumbnailUrl;

super(key: key);

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => VideoView(videoId: videoId),
),
);
},
child: Container(
height: 256.0,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.black.withAlpha(50),
),
],
image: DecorationImage(
fit: BoxFit.fitHeight,
image: NetworkImage(thumbnailUrl),
),
),
child: Center(
child: Icon(
Icons.play_arrow,
color: Colors.white,
size: 100.0,
),
),
),
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('YouTube Videos in Flutter')),
body: ListView.builder(
itemCount: videoIds.length,
itemBuilder: (context, index) {
final videoId = videoIds[index];
);
},
),
);
}
}``````

ListView Background in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class ListItem {
const ListItem();
factory ListItem.emptyTile() => EmptyTile();
factory ListItem.tile(
String title,
String subTitle,
) =>
Tile(
title,
subTitle,
);
}

class Tile extends ListItem {
final String title;
final String subTitle;
const Tile(this.title, this.subTitle) : super();
}

class EmptyTile extends ListItem {}

final items = [
for (var i = 1; i <= 6; i++) ListItem.tile('Title \$i', 'Sub title \$i'),
ListItem.emptyTile(),
for (var i = 7; i <= 12; i++) ListItem.tile('Title \$i', 'Sub title \$i'),
];

class Background extends StatelessWidget {
final Widget child;
const Background({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitHeight,
image: NetworkImage('https://bit.ly/3jXSDto'),
),
),
child: child,
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: Background(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
if (item is Tile) {
return Container(
color: Colors.grey[200],
child: ListTile(
title: Text(item.title),
subtitle: Text(item.subTitle),
),
);
} else if (item is EmptyTile) {
return SizedBox(
height: 450,
);
} else {
throw 'unexpcted item';
}
},
),
),
);
}
}``````

Integer to Binary in Dart

``````extension ToBinary on int {
String toBinary(
int len, {
int separateAtLength = 4,
String separator = ',',
}) =>
.splitByLength(separateAtLength)
.join(separator);
}

void testIt() {
assert(1.toBinary(8) == '0000,0001');
assert(2.toBinary(4) == '0010');
assert(3.toBinary(16) == '0000,0000,0000,0011');
assert(255.toBinary(8, separateAtLength: 8) == '11111111');
assert(255.toBinary(8, separateAtLength: 4) == '1111,1111');
}

extension SplitByLength on String {
Iterable<String> splitByLength(int len, {String filler = '0'}) sync* {
final missingFromLength =
length % len == 0 ? 0 : len - (characters.length % len);
final expectedLength = length + missingFromLength;
final chars = src.characters;
for (var i = 0; i < chars.length; i += len) {
yield chars.getRange(i, i + len).toString();
}
}
}``````

Split String by Length in Dart

``````

void testIt() {
assert('dartlang'
.splitByLength(5, filler: '๐')
.isEqualTo(['๐๐dar', 'tlang']));

assert('0100010'.splitByLength(4).isEqualTo(['0010', '0010']));
assert('foobar'.splitByLength(3).isEqualTo(['foo', 'bar']));
assert('flutter'.splitByLength(4, filler: 'X').isEqualTo(['Xflu', 'tter']));
assert('dart'.splitByLength(5, filler: '').isEqualTo(['dart']));
}

extension SplitByLength on String {
Iterable<String> splitByLength(int len, {String filler = '0'}) sync* {
final missingFromLength =
length % len == 0 ? 0 : len - (characters.length % len);
final expectedLength = length + missingFromLength;
final chars = src.characters;
for (var i = 0; i < chars.length; i += len) {
yield chars.getRange(i, i + len).toString();
}
}
}``````

Image Tint in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

enum OverlayColor { brown, orange, yellow, green, blue }

extension Color on OverlayColor {
MaterialColor get color {
switch (this) {
case OverlayColor.blue:
return Colors.blue;
case OverlayColor.brown:
return Colors.brown;
case OverlayColor.green:
return Colors.green;
case OverlayColor.orange:
return Colors.orange;
case OverlayColor.yellow:
return Colors.yellow;
}
}
}

extension Title on OverlayColor {
String get title => toString().split('.').last;
}

extension ToTextButtonWithValue on OverlayColor {
TextButtonWithValue<OverlayColor> toTextButtonWithValue(
OnTextButtonWithValuePressed onPressed) {
return TextButtonWithValue(
value: this,
onPressed: onPressed,
child: Text(title),
);
}
}

typedef OnTextButtonWithValuePressed<T> = void Function(T value);

class TextButtonWithValue<T> extends StatelessWidget {
final T value;
final OnTextButtonWithValuePressed onPressed;
final Widget child;
const TextButtonWithValue({
Key? key,
required this.value,
required this.onPressed,
required this.child,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
onPressed(value);
},
child: child,
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
OverlayColor? _overlayColor;

ColorFilter? getcolorFilter() {
final overlayColor = _overlayColor;
if (overlayColor == null) {
return null;
}
return ColorFilter.mode(
overlayColor.color,
BlendMode.colorBurn,
);
}

Iterable<Widget> overlayColorButtons() {
return OverlayColor.values.map((overlayColor) {
return Expanded(
flex: 1,
child: Container(
child: overlayColor.toTextButtonWithValue(
(value) {
setState(() {
_overlayColor = value;
});
},
),
),
);
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tinting Images in Flutter'),
),
child: Column(
children: [
Container(
height: 250.0,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
image: DecorationImage(
colorFilter: getcolorFilter(),
fit: BoxFit.fitHeight,
image: NetworkImage('https://bit.ly/3jOueGG'),
),
),
),
SizedBox(height: 16.0),
Row(
children: overlayColorButtons().toList(),
)
],
),
),
);
}
}``````

SlideTransition in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final _controller = AnimationController(
duration: Duration(milliseconds: 500),
vsync: this,
);

late final _animation = Tween<Offset>(
begin: Offset(0.0, 0.0),
end: Offset(-0.83, 0.0),
).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.easeInQuint,
),
);

var _isExpanded = false;

@override
void dispose() {
super.dispose();
_controller.dispose();
}

@override
Widget build(BuildContext context) {
_controller.forward();
return Scaffold(
body: SizedBox.expand(
child: Stack(
fit: StackFit.passthrough,
children: [
Image.network(
'https://bit.ly/3BWYDbz',
fit: BoxFit.fitHeight,
),
Positioned(
top: 200.0,
child: SlideTransition(
position: _animation,
child: GestureDetector(
onTap: () {
_isExpanded = !_isExpanded;
if (_isExpanded) {
_controller.reverse();
} else {
_controller.forward();
}
},
child: Box(),
),
),
),
],
),
),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class Box extends StatelessWidget {
const Box({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.blue[200]?.withAlpha(200),
border: Border.all(
color: Colors.blue,
style: BorderStyle.solid,
width: 1.0,
),
),
),
child: Row(
children: [
Text(
'By: Jesper Anhede',
style: TextStyle(
fontSize: 18.0,
),
),
SizedBox(width: 10.0),
Icon(
Icons.info,
color: Colors.pink[400],
),
],
),
),
);
}
}``````

Expansion Panels and Lists in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class Event {
final String title;
final String details;
final String imageUrl;
bool isExpanded = false;

Event({
required this.title,
required this.details,
required this.imageUrl,
});

@override
bool operator ==(covariant Event other) => title == other.title;
}

const diwaliDetails =
'''Diwali, or Dipawali, is India's biggest and most important holiday of the year. The festival gets its name from the row (avali) of clay lamps (deepa) that Indians light outside their homes to symbolize the inner light that protects from spiritual darkness. This festival is as important to Hindus as the Christmas holiday is to Christians.''';

const halloweenDetails =
'''Halloween or Hallowe'en, less commonly known as Allhalloween, All Hallows' Eve, or All Saints' Eve, is a celebration observed in many countries on 31 October, the eve of the Western Christian feast of All Hallows' Day.''';

final events = [
Event(
title: 'Diwali',
details: diwaliDetails,
imageUrl: 'https://bit.ly/3mGg8YW',
),
Event(
title: 'Halloween',
details: halloweenDetails,
imageUrl: 'https://bit.ly/3wb1w7j',
),
];

extension ToPanel on Event {
ExpansionPanel toPanel() {
return ExpansionPanel(
child: Text(
title,
style: TextStyle(fontSize: 30.0),
),
);
},
isExpanded: isExpanded,
body: Container(
height: 250,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitWidth,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5),
BlendMode.luminosity,
),
image: NetworkImage(imageUrl),
),
),
child: SingleChildScrollView(
child: Text(
details,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, color: Colors.white, shadows: [
offset: Offset.zero,
color: Colors.black,
)
]),
),
),
),
),
);
}
}

class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expansion Panels in Flutter'),
),
body: SingleChildScrollView(
child: ExpansionPanelList(
children: events.map((e) => e.toPanel()).toList(),
expansionCallback: (panelIndex, isExpanded) {
setState(() {
events[panelIndex].isExpanded = !isExpanded;
});
},
),
),
);
}
}``````

Complete CRUD App in Flutter

``````//Want to support my work ๐ค? https://buymeacoffee.com/vandad

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart'
show getApplicationDocumentsDirectory;

class Person implements Comparable {
final int id;
final String firstName;
final String lastName;
const Person(this.id, this.firstName, this.lastName);

String get fullName => '\$firstName \$lastName';

Person.fromData(Map<String, Object?> data)
: id = data['ID'] as int,
firstName = data['FIRST_NAME'] as String,
lastName = data['LAST_NAME'] as String;

@override
int compareTo(covariant Person other) => other.id.compareTo(id);

@override
bool operator ==(covariant Person other) => id == other.id;

@override
String toString() =>
'Person, ID = \$id, firstName = \$firstName, lastName = \$lastName';
}

class PersonDB {
List<Person> _persons = [];
Database? _db;
final String dbName;
PersonDB({required this.dbName});

Future<bool> close() async {
final db = _db;
if (db == null) {
return false;
}
await db.close();
return true;
}

Future<bool> open() async {
if (_db != null) {
return true;
}
final directory = await getApplicationDocumentsDirectory();
final path = '\${directory.path}/\$dbName';
try {
final db = await openDatabase(path);
_db = db;

// create the table if it doesn't exist

final create = '''CREATE TABLE IF NOT EXISTS PEOPLE (
ID INTEGER PRIMARY KEY AUTOINCREMENT,
FIRST_NAME STRING NOT NULL,
LAST_NAME STRING NOT NULL
)''';

await db.execute(create);

// if everything went fine, we then read all the objects
// and populate the stream

_persons = await _fetchPeople();
return true;
} catch (e) {
print('error = \$e');
return false;
}
}

Future<List<Person>> _fetchPeople() async {
final db = _db;
if (db == null) {
return [];
}

try {
// read the existing data if any
'PEOPLE',
distinct: true,
columns: ['ID', 'FIRST_NAME', 'LAST_NAME'],
orderBy: 'ID',
);

final people = readResult.map((row) => Person.fromData(row)).toList();
return people;
} catch (e) {
print('error = \$e');
return [];
}
}

Future<bool> delete(Person person) async {
final db = _db;
if (db == null) {
return false;
}
try {
final deletedCount = await db.delete(
'PEOPLE',
where: 'ID = ?',
whereArgs: [person.id],
);

// delete it locally as well

if (deletedCount == 1) {
_persons.remove(person);
return true;
} else {
return false;
}
} catch (e) {
print('Error inserting \$e');
return false;
}
}

Future<bool> create(String firstName, String lastName) async {
final db = _db;
if (db == null) {
return false;
}
try {
final id = await db.insert(
'PEOPLE',
{
'FIRST_NAME': firstName,
'LAST_NAME': lastName,
},
);

final person = Person(id, firstName, lastName);

return true;
} catch (e) {
print('Error inserting \$e');
return false;
}
}

// uses the person's id to update its first name and last name
Future<bool> update(Person person) async {
final db = _db;
if (db == null) {
return false;
}
try {
final updatedCount = await db.update(
'PEOPLE',
{
'FIRST_NAME': person.firstName,
'LAST_NAME': person.lastName,
},
where: 'ID = ?',
whereArgs: [person.id],
);

if (updatedCount == 1) {
_persons.removeWhere((p) => p.id == person.id);
return true;
} else {
return false;
}
} catch (e) {
print('Error inserting \$e');
return false;
}
}

Stream<List<Person>> all() =>
_controller.stream.map((event) => event..sort());
}

typedef OnCompose = void Function(String firstName, String lastName);

class ComposeWidget extends StatefulWidget {
final OnCompose onCompose;

const ComposeWidget({Key? key, required this.onCompose}) : super(key: key);

@override
State<ComposeWidget> createState() => _ComposeWidgetState();
}

class _ComposeWidgetState extends State<ComposeWidget> {
final firstNameController = TextEditingController();
final lastNameController = TextEditingController();

@override
void dispose() {
firstNameController.dispose();
lastNameController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
child: Column(children: [
TextField(
style: TextStyle(fontSize: 24),
decoration: InputDecoration(
hintText: 'Enter first name',
),
controller: firstNameController,
),
TextField(
style: TextStyle(fontSize: 24),
decoration: InputDecoration(
hintText: 'Enter last name',
),
controller: lastNameController,
),
TextButton(
onPressed: () {
final firstName = firstNameController.text;
final lastName = lastNameController.text;
widget.onCompose(firstName, lastName);
},
child: Text(
style: TextStyle(fontSize: 24),
),
),
]),
);
}
}

class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
late final PersonDB _crudStorage;

@override
void initState() {
_crudStorage = PersonDB(dbName: 'db.sqlite');
_crudStorage.open();
super.initState();
}

@override
void dispose() {
_crudStorage.close();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SQLite in Flutter'),
),
body: StreamBuilder(
stream: _crudStorage.all(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.active:
case ConnectionState.waiting:
if (snapshot.data == null) {
return Center(child: CircularProgressIndicator());
}
final people = snapshot.data as List<Person>;
return Column(
children: [
ComposeWidget(
onCompose: (firstName, lastName) async {
await _crudStorage.create(firstName, lastName);
},
),
Expanded(
child: ListView.builder(
itemCount: people.length,
itemBuilder: (context, index) {
final person = people[index];
return ListTile(
onTap: () async {
final update =
await showUpdateDialog(context, person);
if (update == null) {
return;
}
await _crudStorage.update(update);
},
title: Text(
person.fullName,
style: TextStyle(fontSize: 24),
),
subtitle: Text(
'ID: \${person.id}',
style: TextStyle(fontSize: 18),
),
trailing: TextButton(
onPressed: () async {
final shouldDelete =
await showDeleteDialog(context);
if (shouldDelete) {
await _crudStorage.delete(person);
}
},
child: Icon(
Icons.disabled_by_default_rounded,
color: Colors.red,
),
),
);
},
),
),
],
);
default:
return Center(child: CircularProgressIndicator());
}
},
),
);
}
}

final firstNameController = TextEditingController();
final lastNameController = TextEditingController();

Future<Person?> showUpdateDialog(BuildContext context, Person person) {
firstNameController.text = person.firstName;
lastNameController.text = person.lastName;
return showDialog(
context: context,
builder: (context) {
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(controller: firstNameController),
TextField(controller: lastNameController),
],
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(null);
},
child: Text('Cancel'),
),
TextButton(
onPressed: () {
final newPerson = Person(
person.id,
firstNameController.text,
lastNameController.text,
);
Navigator.of(context).pop(newPerson);
},
child: Text('Save'),
),
],
);
},
).then((value) {
if (value is Person) {
return value;
} else {
return null;
}
});
}

Future<bool> showDeleteDialog(BuildContext context) {
return showDialog(
context: context,
builder: (context) {
content: Text('Are you sure you want to delete this item?'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: Text('No'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: Text('Delete'),
)
],
);
},
).then(
(value) {
if (value is bool) {
return value;
} else {
return false;
}
},
);
}``````

SQLite Storage in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart'
show getApplicationDocumentsDirectory;

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class Person implements Comparable {
final int id;
final String firstName;
final String lastName;
const Person(this.id, this.firstName, this.lastName);

String get fullName => '\$firstName \$lastName';

Person.fromData(Map<String, Object?> data)
: id = data['ID'] as int,
firstName = data['FIRST_NAME'] as String,
lastName = data['LAST_NAME'] as String;

@override
int compareTo(covariant Person other) => other.id.compareTo(id);
}

typedef OnCompose = void Function(String firstName, String lastName);

class ComposeWidget extends StatefulWidget {
final OnCompose onCompose;

const ComposeWidget({Key? key, required this.onCompose}) : super(key: key);

@override
State<ComposeWidget> createState() => _ComposeWidgetState();
}

class _ComposeWidgetState extends State<ComposeWidget> {
final firstNameController = TextEditingController();
final lastNameController = TextEditingController();

@override
void dispose() {
firstNameController.dispose();
lastNameController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
child: Column(children: [
TextField(
style: TextStyle(fontSize: 24),
decoration: InputDecoration(
hintText: 'Enter first name',
),
controller: firstNameController,
),
TextField(
style: TextStyle(fontSize: 24),
decoration: InputDecoration(
hintText: 'Enter last name',
),
controller: lastNameController,
),
TextButton(
onPressed: () {
final firstName = firstNameController.text;
final lastName = lastNameController.text;
widget.onCompose(firstName, lastName);
},
child: Text(
style: TextStyle(fontSize: 24),
),
),
]),
);
}
}

class _HomePageState extends State<HomePage> {
late final Database db;

Future<bool> setupDatabase() async {
final directory = await getApplicationDocumentsDirectory();
final path = '\${directory.path}/db.sqlite';
try {
db = await openDatabase(path);

// create the table if it doesn't exist

final create = '''CREATE TABLE IF NOT EXISTS PEOPLE (
ID INTEGER PRIMARY KEY AUTOINCREMENT,
FIRST_NAME STRING NOT NULL,
LAST_NAME STRING NOT NULL
)''';

await db.execute(create);
return true;
} catch (e) {
print('error = \$e');
return false;
}
} else {
return true;
}
}

Future<List<Person>> fetchPersons() async {
if (!await setupDatabase()) {
return [];
}

try {
// read the existing data if any
'PEOPLE',
distinct: true,
columns: ['ID', 'FIRST_NAME', 'LAST_NAME'],
orderBy: 'ID',
);

final people = readResult.map((row) => Person.fromData(row)).toList()
..sort();
return people;
} catch (e) {
print('error = \$e');
return [];
}
}

Future<bool> addPerson(String firstName, String lastName) async {
try {
await db.insert(
'PEOPLE',
{
'FIRST_NAME': firstName,
'LAST_NAME': lastName,
},
);
return true;
} catch (e) {
print('Error inserting \$e');
return false;
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SQLite in Flutter'),
),
body: FutureBuilder(
future: fetchPersons(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.done:
final people = snapshot.data as List<Person>;
return Column(
children: [
ComposeWidget(
onCompose: (firstName, lastName) async {
setState(() {});
},
),
Expanded(
child: ListView.builder(
itemCount: people.length,
itemBuilder: (context, index) {
final person = people[index];
return ListTile(
title: Text(
person.fullName,
style: TextStyle(fontSize: 24),
),
subtitle: Text(
'ID: \${person.id}',
style: TextStyle(fontSize: 18),
),
);
},
),
),
],
);
default:
return CircularProgressIndicator();
}
},
),
);
}
}``````

Circular Progress with Percentage in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class SizedCircularProgressIndicator extends StatelessWidget {
final double progress;
final double width;
final double height;
final TextStyle? textStyle;
const SizedCircularProgressIndicator({
Key? key,
this.textStyle,
required this.progress,
required this.width,
required this.height,
}) : super(key: key);

TextStyle get style => textStyle ?? TextStyle(fontSize: 30.0);
int get _progress => (progress * 100.0).toInt();

@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: [
Text('\$_progress%', style: style),
SizedBox(
width: width,
height: height,
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
value: progress,
color: Colors.blueAccent,
strokeWidth: 3.0,
),
),
],
);
}
}

const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
scrollDirection: Axis.horizontal,
itemCount: images.length,
itemBuilder: (context, index) {
return WithBlurredBackground(imageUrl: images[index]);
},
),
);
}
}

class WithBlurredBackground extends StatelessWidget {
final String imageUrl;

const WithBlurredBackground({Key? key, required this.imageUrl})
: super(key: key);

@override
Widget build(BuildContext context) {
return SizedBox.expand(
child: Stack(
alignment: Alignment.center,
fit: StackFit.passthrough,
children: [
SizedBox.expand(
child: ClipRect(
child: ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Image.network(
imageUrl,
fit: BoxFit.fitHeight,
),
),
),
),
NetworkImageWithProgress(url: imageUrl),
],
),
);
}
}

class NetworkImageWithProgress extends StatelessWidget {
final String url;

const NetworkImageWithProgress({Key? key, required this.url})
: super(key: key);

@override
Widget build(BuildContext context) {
return Image.network(
url,
if (totalBytes != null && bytesLoaded != null) {
return SizedCircularProgressIndicator(
height: 100,
width: 100,
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}``````

Opening URLs in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class Person {
final String profileUrl;
final String name;
final String email;
final String phoneNumber;
final String websiteUrl;

const Person({
Key? key,
required this.profileUrl,
required this.name,
required this.email,
required this.phoneNumber,
required this.websiteUrl,
});

: profileUrl = 'https://bit.ly/3jwusS0',
phoneNumber = '071234567',
websiteUrl = 'https://pixolity.se';
}

void open(String url) async {
if (await canLaunch(url)) {
await launch(url);
}
}

class PersonNameView extends StatelessWidget {
final Person person;
const PersonNameView(this.person, {Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Text(
person.name,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
);
}
}

class PersonEmailView extends StatelessWidget {
final Person person;
const PersonEmailView(this.person, {Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
open('mailto:\${person.email}');
},
child: Text(
'๐ Email me',
style: TextStyle(fontSize: 20.0),
),
);
}
}

class PersonPhoneView extends StatelessWidget {
final Person person;
const PersonPhoneView(this.person, {Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
open('tel://\${person.phoneNumber}');
},
child: Text(
'๐ค๐ป Call me',
style: TextStyle(fontSize: 20.0),
),
);
}
}

class PersonWebsiteView extends StatelessWidget {
final Person person;
const PersonWebsiteView(this.person, {Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
open(person.websiteUrl);
},
child: Text(
'๐ Visit my website',
style: TextStyle(fontSize: 20.0),
),
);
}
}

const bigText = TextStyle(fontSize: 20.0);

class PersonView extends StatelessWidget {
final Person person;
const PersonView({Key? key, required this.person}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.blue[50],
border: Border.all(color: Colors.white, width: 3.0),
color: Colors.black.withAlpha(50),
),
]),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
backgroundImage: NetworkImage(person.profileUrl),
),
SizedBox(height: 10),
PersonNameView(person),
PersonEmailView(person),
PersonPhoneView(person),
PersonWebsiteView(person)
],
),
),
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
child: PersonView(
),
),
),
);
}
}``````

Commodore 64 Screen in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

const textColor = Color.fromRGBO(156, 156, 247, 1);

class BoxPainter extends CustomPainter {

@override
void paint(Canvas canvas, Size size) {
final rect = Rect.fromLTWH(
size.width / 20.0,
size.height / 2.8,
size.width / 24.0,
size.height / 13.0,
);
final paint = Paint()..color = textColor;
canvas.drawRect(rect, paint);
}
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

@override
void paint(Canvas canvas, Size size) {
final textStyle = TextStyle(
color: textColor,
fontSize: size.width / 45.0,
fontFamily: 'C64',
);
final span = TextSpan(
style: textStyle,
);
final painter = TextPainter(
text: span,
textDirection: TextDirection.ltr,
);

painter.layout(
minWidth: 0,
maxWidth: size.width,
);
final offset = Offset(
painter.width / 2.0,
painter.height * 8.0,
);
painter.paint(canvas, offset);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

class SubTitlePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final textStyle = TextStyle(
color: textColor,
fontSize: size.width / 45.0,
fontFamily: 'C64',
);
final span = TextSpan(
text: '64K RAM SYSTEM 38911 BASIC BYTES FREE',
style: textStyle,
);
final painter = TextPainter(
text: span,
textDirection: TextDirection.ltr,
);

painter.layout(
minWidth: 0,
maxWidth: size.width,
);
final offset = Offset(
size.width - painter.width - (size.width / 11),
painter.height * 6.0,
);
painter.paint(canvas, offset);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

class TitlePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final textStyle = TextStyle(
color: textColor,
fontSize: size.width / 40.0,
fontFamily: 'C64',
);
final span = TextSpan(
text: '**** COMMODORE 64 BASIC V2 ****',
style: textStyle,
);
final painter = TextPainter(
text: span,
textDirection: TextDirection.ltr,
);

painter.layout(
minWidth: 0,
maxWidth: size.width,
);
final offset = Offset(
size.width - painter.width - (size.width / 9),
size.height / 6,
);
painter.paint(canvas, offset);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

class BackgroundPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final border = size.width / 20.0;

final color = Color.fromRGBO(
58,
57,
213,
1,
);

final paint = Paint()..color = color;

final rect = Rect.fromLTWH(
border,
border,
size.width - (border * 2.0),
size.height - (border * 2.0),
);

canvas.drawRect(rect, paint);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

class BorderPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..color = textColor;
final rect = Rect.fromLTWH(
0.0,
0.0,
size.width,
size.height,
);

canvas.drawRect(rect, paint);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

class Commodore64Painter extends CustomPainter {

late final List<CustomPainter> painters;

painters = [
BorderPainter(),
BackgroundPainter(),
TitlePainter(),
SubTitlePainter(),
];
}

@override
void paint(Canvas canvas, Size size) {
painters.forEach(
(p) => p.paint(
canvas,
size,
),
);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => painters
.map((p) => p.shouldRepaint(oldDelegate))
.reduce((p1, p2) => p1 || p2);
}

class Commodore64 extends StatefulWidget {
const Commodore64({Key? key}) : super(key: key);

@override
State<Commodore64> createState() => _Commodore64State();
}

class _Commodore64State extends State<Commodore64> {

final timer = Stream.periodic(Duration(seconds: 1), (value) => value);

void _triggerRedraw() async {
await for (final _ in timer) {
setState(() {
});
}
}

@override
void initState() {
super.initState();
_triggerRedraw();
}

@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return Container(
width: constraints.maxWidth,
height: constraints.maxWidth / (16.0 / 9.0),
child: CustomPaint(
),
);
});
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Commodore64(),
),
);
}
}``````

Animated Lists in Flutter

``````

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class NetworkImage extends StatelessWidget {
final String url;
const NetworkImage({
Key? key,
required this.url,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Image.network(
url,
if (totalBytes != null && bytesLoaded != null) {
return LinearProgressIndicator(
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}

class NetworkImageCard extends StatelessWidget {
final String url;
const NetworkImageCard({
Key? key,
required this.url,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Center(
child: Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
),
child: NetworkImage(
url: url,
),
),
);
}
}

const imageUrls = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

Stream<String> images() => Stream.periodic(
Duration(seconds: 3),
(index) => index % imageUrls.length,
).map((index) => imageUrls[index]);

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
final GlobalKey<AnimatedListState> _key = GlobalKey();

List<String> imageUrls = [];

void populateList() async {
await for (final url in images()) {
imageUrls.insert(0, url);
_key.currentState?.insertItem(
0,
duration: Duration(milliseconds: 400),
);
}
}

@override
Widget build(BuildContext context) {
populateList();
return Scaffold(
appBar: AppBar(
title: Text('Animated Lists in Flutter'),
),
child: AnimatedList(
key: _key,
initialItemCount: imageUrls.length,
itemBuilder: (context, index, animation) {
final imageUrl = imageUrls[index];
return SizeTransition(
sizeFactor: animation.drive(
CurveTween(curve: Curves.elasticInOut),
),
child: Column(
children: [
NetworkImageCard(url: imageUrl),
SizedBox(height: 10.0),
],
),
);
},
),
),
);
}
}``````

`CheckboxListTile` in Flutter

``````import 'package:flutter/material.dart';

enum Item { umbrella, coat, boots }

extension Info on Item {
String get title {
switch (this) {
case Item.umbrella:
return 'Umbrella';
case Item.boots:
return 'Boots';
case Item.coat:
return 'Jacket';
}
}

String get icon {
switch (this) {
case Item.umbrella:
return 'โ๏ธ';
case Item.boots:
return '๐ฅพ';
case Item.coat:
return '๐งฅ';
}
}
}

typedef OnChecked = void Function(bool);

class Tile extends StatelessWidget {
final Item item;
final bool isChecked;
final OnChecked onChecked;
const Tile({
Key? key,
required this.item,
required this.isChecked,
required this.onChecked,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints(minHeight: 100.0),
child: Center(
child: CheckboxListTile(
shape: ContinuousRectangleBorder(),
value: isChecked,
secondary: Text(
item.icon,
style: TextStyle(fontSize: 30.0),
),
title: Text(
item.title,
style: TextStyle(fontSize: 40.0),
),
onChanged: (value) {
onChecked(value ?? false);
},
),
),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
final Set<Item> _enabledItems = {};

Widget get listView {
return ListView.builder(
shrinkWrap: true,
itemBuilder: (context, index) {
final item = Item.values[index];
final isChecked = _enabledItems.contains(item);
return Tile(
isChecked: isChecked,
item: item,
onChecked: (isChecked) {
setState(() {
if (isChecked) {
} else {
_enabledItems.remove(item);
}
});
},
);
},
itemCount: Item.values.length,
);
}

Widget get title {
child: Text(
"Remember to pick all items! It's going to be rainy today!",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 40),
),
);
}

final onPressed = () async {
// program this
await showDialog(
context: context,
builder: (context) {
content: Text('You seem to be ready for a rainy day! โ'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
)
],
);
},
);
};

final isEnabled = _enabledItems.containsAll(Item.values);

return FractionallySizedBox(
widthFactor: 0.8,
child: ElevatedButton(
onPressed: isEnabled ? onPressed : null,
),
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Checkbox List Tile in Flutter'),
),
body: SingleChildScrollView(
child: Column(
children: [
title,
listView,
SizedBox(height: 50.0),
],
),
),
);
}
}``````

`-` Operator on `String` in Dart

``````

extension Minus on String {
String operator -(String rhs) => replaceAll(rhs, '');
}

void testIt() {
assert('foo bar' - 'foo ' == 'bar');
assert('foo bar foo' - 'foo' == ' bar ');
assert('bar' - 'foo' == 'bar');
assert('BAR' - 'bar' == 'BAR');
assert('foo' - 'FOO' == 'foo');
assert('foobarbaz' - 'bar' == 'foobaz');
}``````

Dart Progress for `Future<T>`

``````

import 'dart:io' show stdout;
import 'dart:async' show Future, Stream;

const escape = '\x1B[38;5;';
const color = '\${escape}1m';
const textColor = '\${escape}6m';

String progress({required int value, required String text}) {
final coloredText = '\$textColor\$text';
return '\$progress\t\$coloredText';
}

Future<T> performWithProgress<T>({
required String progressText,
}) {
final stream = Stream<String>.periodic(
Duration(milliseconds: 100),
(value) => progress(
value: value,
text: progressText,
),
);

final subscription = stream.listen(
(event) {
stdout.write('\r \$event');
},
);

stdout.write('\r โ\t\$progressText');
stdout.write('\n');
subscription.cancel();
});

}

final task1 = Future.delayed(Duration(seconds: 1), () => 'Result 1');
final task2 = Future.delayed(Duration(seconds: 2), () => 'Result 2');
final task3 = Future.delayed(Duration(seconds: 3), () => 'Result 3');

void main(List<String> args) async {
var result = await performWithProgress(
);
result = await performWithProgress(
);
result = await performWithProgress(
);
}``````

``````

import 'package:flutter/material.dart';

class ImageTransition extends AnimatedWidget {
final String imageUrl;

Animation<double> get shadowXOffset => listenable as Animation<double>;

@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.black.withAlpha(100),
)
],
),
child: Image.network(imageUrl),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class CustomCurve extends CurveTween {
CustomCurve() : super(curve: Curves.easeInOutSine);
@override
double transform(double t) {
return (super.transform(t) - 0.5) * 25.0;
}
}

class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;

@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = CustomCurve().animate(_controller);
super.initState();
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
_controller.repeat(reverse: true);
return Scaffold(
child: Center(
child: ImageTransition(
'https://bit.ly/3x7J5Qt',
),
),
),
);
}
}``````

Gallery with Blurred Backgrounds in Flutter

``````
import 'package:flutter/material.dart';

const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
scrollDirection: Axis.horizontal,
itemCount: images.length,
itemBuilder: (context, index) {
return WithBlurredBackground(imageUrl: images[index]);
},
),
);
}
}

class WithBlurredBackground extends StatelessWidget {
final String imageUrl;

const WithBlurredBackground({Key? key, required this.imageUrl})
: super(key: key);

@override
Widget build(BuildContext context) {
return SizedBox.expand(
child: Stack(
alignment: Alignment.center,
fit: StackFit.passthrough,
children: [
SizedBox.expand(
child: ClipRect(
child: ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Image.network(
imageUrl,
fit: BoxFit.fitHeight,
),
),
),
),
Image.network(imageUrl),
],
),
);
}
}``````

Custom Path Clippers in Flutter

``````

import 'package:flutter/material.dart';

const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
top: 40.0,
left: 10.0,
right: 10.0,
),
child: Column(
children: images
.map((url) => ElevatedNetworkImage(url: url))
.expand(
(img) => [
img,
SizedBox(height: 30.0),
],
)
.toList(),
),
),
),
);
}
}

class ElevatedNetworkImage extends StatelessWidget {
final String url;
const ElevatedNetworkImage({Key? key, required this.url}) : super(key: key);

@override
Widget build(BuildContext context) {
return PhysicalShape(
color: Colors.white,
clipper: Clipper(),
elevation: 20.0,
clipBehavior: Clip.none,
child: CutEdges(
child: Image.network(url),
),
);
}
}

class Clipper extends CustomClipper<Path> {
static const variance = 0.2;
static const reverse = 1.0 - variance;

@override
Path getClip(Size size) {
final path = Path();

path.moveTo(0.0, size.height * Clipper.variance);
path.lineTo(size.width * Clipper.variance, 0.0);
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height * Clipper.reverse);
path.lineTo(size.width * Clipper.reverse, size.height);
path.lineTo(0.0, size.height);
path.lineTo(0.0, size.height * Clipper.variance);
path.close;
return path;
}

@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

class CutEdges extends StatelessWidget {
final Widget child;

const CutEdges({Key? key, required this.child}) : super(key: key);

@override
Widget build(BuildContext context) {
return ClipPath(
clipper: Clipper(),
child: child,
);
}
}``````

Frost Effect on Images in Flutter

``````

import 'package:flutter/material.dart';

const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

final loremIpsum =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
8.0,
0.0,
8.0,
0.0,
),
child: SingleChildScrollView(
child: Column(
children: images
.map(
(url) => GlossyNetworkImageWithProgress(
url: url,
title: 'Image title',
description: loremIpsum,
),
)
.expand(
(image) => [
image,
SizedBox(height: 16.0),
],
)
.toList(),
),
),
),
),
);
}
}

class GlossyNetworkImageWithProgress extends StatefulWidget {
final String url;
final String title;
final String description;

const GlossyNetworkImageWithProgress(
{Key? key,
required this.url,
required this.title,
required this.description})
: super(key: key);

@override
_GlossyNetworkImageWithProgressState createState() =>
_GlossyNetworkImageWithProgressState();
}

class _GlossyNetworkImageWithProgressState
extends State<GlossyNetworkImageWithProgress>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;

@override
void initState() {
super.initState();

_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);

_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
final networkImage = Image.network(
widget.url,
fit: BoxFit.fitHeight,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
opacity: _animation,
child: CustomBox(
child: child,
),
);
},
if (totalBytes != null && bytesLoaded != null) {
return CustomBox(
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
color: Colors.blue[900],
strokeWidth: 5.0,
),
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);

return BottomGloss(
networkImage: networkImage,
title: widget.title,
description: widget.description,
);
}
}

class BottomGloss extends StatelessWidget {
final String title;
final String description;

const BottomGloss(
{Key? key,
required this.networkImage,
required this.title,
required this.description})
: super(key: key);

final Image networkImage;

@override
Widget build(BuildContext context) {
return ClipRRect(
child: Stack(
fit: StackFit.passthrough,
children: [
networkImage,
Container(
height: 300.0,
alignment: Alignment.bottomCenter,
child: ClipRect(
child: FractionallySizedBox(
heightFactor: 0.5,
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: BottomContents(
title: title,
description: description,
),
),
),
),
),
],
),
);
}
}

class BottomContents extends StatelessWidget {
final String title;
final String description;

const BottomContents({
Key? key,
required this.title,
required this.description,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
color: Colors.white.withOpacity(0.4),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TitleText(text: title),
SizedBox(height: 8.0),
SubTitleText(text: description),
],
),
),
),
);
}
}

class SubTitleText extends StatelessWidget {
final String text;
const SubTitleText({Key? key, required this.text}) : super(key: key);

@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
);
}
}

class TitleText extends StatelessWidget {
final String text;
const TitleText({Key? key, required this.text}) : super(key: key);

@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
);
}
}

class CustomBox extends StatelessWidget {
final Widget child;

const CustomBox({Key? key, required this.child}) : super(key: key);

@override
Widget build(BuildContext context) {
return SizedBox(
height: 300.0,
width: MediaQuery.of(context).size.width,
child: child is ProgressIndicator ? Center(child: child) : child,
);
}
}``````

Custom Clippers in Flutter

``````import 'package:flutter/material.dart';
import 'dart:math' show min;

const gridImages = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/3jRSRCu',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(
padding: const EdgeInsets.fromLTRB(8.0, 48.0, 8.0, 48.0),
crossAxisCount: 2,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
children: gridImages
.map((url) => NetworkImageWithProgress(url: url))
.toList(),
),
);
}
}

class CircularClipper extends CustomClipper<Rect> {
@override
Rect getClip(Size size) {
final center = Offset(
size.width / 2.0,
size.height / 2.0,
);
final minWidthorHeight = min(size.width, size.height);
return Rect.fromCenter(
center: center,
width: minWidthorHeight,
height: minWidthorHeight,
);
}

@override
bool shouldReclip(covariant CustomClipper<Rect> oldClipper) => false;
}

class Circular extends StatelessWidget {
final Widget child;
const Circular({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipOval(
clipper: CircularClipper(),
child: child,
);
}
}

class CustomBox extends StatelessWidget {
final Widget child;

const CustomBox({Key? key, required this.child}) : super(key: key);

@override
Widget build(BuildContext context) {
return SizedBox(
height: 220.0,
width: MediaQuery.of(context).size.width,
child: child is ProgressIndicator
? Center(child: child)
: Circular(child: child),
);
}
}

class NetworkImageWithProgress extends StatefulWidget {
final String url;

const NetworkImageWithProgress({Key? key, required this.url})
: super(key: key);

@override
_NetworkImageWithProgressState createState() =>
_NetworkImageWithProgressState();
}

class _NetworkImageWithProgressState extends State<NetworkImageWithProgress>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;

@override
void initState() {
super.initState();

_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);

_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
fit: BoxFit.fitHeight,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
opacity: _animation,
child: CustomBox(
child: child,
),
);
},
if (totalBytes != null && bytesLoaded != null) {
return CustomBox(
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
color: Colors.blue[900],
strokeWidth: 5.0,
),
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}``````

Check if Website is Up or Down in Dart

``````

class UpStatus {
final bool isUp;
final DateTime timestamp;
const UpStatus(this.isUp, this.timestamp);
}

class Pling {
final String url;
final Duration interval;
const Pling({
required this.url,
required this.interval,
});
Stream<UpStatus> checkIfUp() =>
Stream.periodic(interval, (_) => DateTime.now()).asyncExpand(
(now) => HttpClient()
.then((req) => req..followRedirects = false)
.then((req) => req.close())
.then((resp) => resp.statusCode)
.then((statusCode) => statusCode == 200)
.onError((error, stackTrace) => false)
.then((isUp) => UpStatus(isUp, now))
.asStream(),
);
}

const oneSecond = Duration(seconds: 1);
const url = 'https://dart.dev';

extension IsOrIsNot on bool {
String get isOrIsNot => this ? 'is' : 'is not';
}

void testIt() async {
final pling = Pling(
url: url,
interval: oneSecond,
);
await for (final upStatus in pling.checkIfUp()) {
final timestamp = upStatus.timestamp;
final isUpStr = upStatus.isUp.isOrIsNot;
print('\$url \$isUpStr up at \$timestamp');
}
}``````

Section Titles on ListView in Flutter

``````import 'package:flutter/material.dart';

final List<Section> allSections = [
Section(
'Spring',
[
'https://cnn.it/3xu58Ap',
'https://bit.ly/3ueqqC1',
],
),
Section(
'Summer',
[
'https://bit.ly/3ojNhLc',
'https://bit.ly/2VcCSow',
],
),
Section(
'Autumn',
[
'https://bit.ly/3ib1TJk',
'https://bit.ly/2XSpjvq',
],
),
Section(
'Winter',
[
'https://bit.ly/3iaQNE7',
'https://bit.ly/3AY8YE4',
],
),
];

class Section {
final String title;
final List<String> urls;
const Section(this.title, this.urls);
}

extension ToWidgets on Section {
Iterable<Widget> toNetworkImageCards() {
return [
child: Text(
title,
style: TextStyle(
fontSize: 40,
),
),
),
...urls.expand(
(url) => [
NetworkImageCard(url: url),
SizedBox(height: 10),
],
),
];
}
}

class NetworkImageCard extends StatelessWidget {
final String url;
const NetworkImageCard({
Key? key,
required this.url,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: NetworkImageWithProgress(
url: url,
),
),
);
}
}

class NetworkImageWithProgress extends StatefulWidget {
final String url;

const NetworkImageWithProgress({Key? key, required this.url})
: super(key: key);

@override
_NetworkImageWithProgressState createState() =>
_NetworkImageWithProgressState();
}

class _NetworkImageWithProgressState extends State<NetworkImageWithProgress>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;

@override
void initState() {
super.initState();

_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);

_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
fit: BoxFit.fitWidth,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
opacity: _animation,
child: CustomBox(
child: child,
),
);
},
if (totalBytes != null && bytesLoaded != null) {
return CustomBox(
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
color: Colors.blue[900],
strokeWidth: 5.0,
),
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}

class CustomBox extends StatelessWidget {
final Widget child;

const CustomBox({Key? key, required this.child}) : super(key: key);

@override
Widget build(BuildContext context) {
return SizedBox(
height: 220.0,
width: MediaQuery.of(context).size.width,
child: child is ProgressIndicator ? Center(child: child) : child,
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemBuilder: (context, index) {
final section = allSections[index];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: section.toNetworkImageCards().toList(),
);
},
itemCount: allSections.length,
),
);
}
}``````

Circular Progress in Flutter

``````

import 'package:flutter/material.dart';

class CustomBox extends StatelessWidget {
final Widget child;

const CustomBox({Key? key, required this.child}) : super(key: key);

@override
Widget build(BuildContext context) {
return SizedBox(
height: 220.0,
width: MediaQuery.of(context).size.width,
child: Center(child: child),
);
}
}

class NetworkImageWithProgress extends StatefulWidget {
final String url;

const NetworkImageWithProgress({Key? key, required this.url})
: super(key: key);

@override
_NetworkImageWithProgressState createState() =>
_NetworkImageWithProgressState();
}

class _NetworkImageWithProgressState extends State<NetworkImageWithProgress>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;

@override
void initState() {
super.initState();

_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);

_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
fit: BoxFit.fitWidth,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
opacity: _animation,
child: CustomBox(
child: child,
),
);
},
if (totalBytes != null && bytesLoaded != null) {
return CustomBox(
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
color: Colors.blue[900],
strokeWidth: 5.0,
),
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}

final images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3ywzOla',
].map((url) => NetworkImageWithProgress(url: url)).expand(
(element) => [
element,
SizedBox(
height: 10.0,
)
],
);

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: images.toList(),
),
),
);
}
}``````

Displaying Scroll Wheels in Flutter

``````

import 'package:flutter/material.dart';

final String url;

const FadingNetworkImage({Key? key, required this.url}) : super(key: key);

@override
}

with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;

@override
void initState() {
super.initState();

_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));

_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
opacity: _animation,
child: child,
);
},
if (totalBytes != null && bytesLoaded != null) {
return LinearProgressIndicator(
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}

final images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3ywzOla',
].map((i) => NetworkImageCard(url: i));

class NetworkImageCard extends StatelessWidget {
final String url;
const NetworkImageCard({
Key? key,
required this.url,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Center(
child: Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
offset: Offset(0, 0),
color: Colors.black.withAlpha(40),
)
],
),
url: url,
),
),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListWheelScrollView(
itemExtent: 164.0,
squeeze: 0.9,
perspective: 0.003,
children: images.toList(),
),
);
}
}``````

Post Messages to Slack with Dart

``````

import 'dart:convert' show utf8;
import 'dart:convert' show json;

class SlackMessage {
final String? inChannel;
final String message;
final String? iconEmoji;

const SlackMessage({
required this.inChannel,
required this.message,
required this.iconEmoji,
});

Future<bool> send(String webhookUrl) async {
'text': message,
if (inChannel != null) 'channel': inChannel!,
if (iconEmoji != null) 'icon_emoji': iconEmoji!
};

final request = await HttpClient().postUrl(Uri.parse(webhookUrl));
final response = await request.close();
return response.statusCode == 200;
}
}

const webhookUrl = 'put your webhook url here';

void testIt() async {
final message = SlackMessage(
inChannel: 'dart',
message: 'Hello from Dart in Terminal',
iconEmoji: 'blue_heart:',
);
if (await message.send(webhookUrl)) {
print('Successfully sent the message');
} else {
print('Could not send the message');
}
}``````

Unwrap `List<T?>?` in Dart

``````

extension Unwrap<T> on List<T?>? {
List<T> unwrap() => (this ?? []).whereType<T>().toList();
}

void testOptionalListOfOptionals() {
final List<int?>? optionalListOfOptionals = [1, 2, null, 3, null];
final unwrapped = optionalListOfOptionals.unwrap(); // List<int>
print(unwrapped); // prints [1, 2, 3]
}

void testListOfOptionals() {
final listOfOptionals = [20, 30, null, 40]; // List<int?>
final unwrapped = listOfOptionals.unwrap(); // List<int>
print(unwrapped); // prints [20, 30, 40]
}

void testNormalList() {
final list = [50, 60, 70]; // List<int>
final unwrapped = list.unwrap(); // List<int>
print(unwrapped); // prints [50, 60, 70]
}``````

Avoiding UI Jitters When Switching Widgets in Flutter

``````

const imageUrls = [
'https://cnn.it/3xu58Ap', // spring
'https://bit.ly/2VcCSow', // summer
'https://bit.ly/3A3zStC', // autumn
'https://bit.ly/2TNY7wi' // winter
];

extension ToNetworkImage<T extends String> on List<T> {
List<Widget> toNetworkImages() => map((s) => Image.network(s)).toList();
}

class HomePage extends StatefulWidget {
@override
State createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
var _currentIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Indexed Stack')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IndexedStack(
index: _currentIndex,
children: imageUrls.toNetworkImages(),
),
TextButton(
onPressed: () {
setState(
() {
_currentIndex++;
if (_currentIndex >= imageUrls.length) {
_currentIndex = 0;
}
},
);
},
child: Text('Go to next season'),
)
],
),
),
);
}
}``````

Detect Redirects in Dart

``````

Future<bool> doesRedirect(String url) => HttpClient()
.then((req) => req..followRedirects = false)
.then((req) => req.close())
.then((resp) => resp.statusCode)
.then((statusCode) => [301, 302, 303, 307, 308].contains(statusCode));

void testIt() async {
final test1 = await doesRedirect('https://cnn.it/3xu58Ap');
assert(test1 == true);

final test2 = await doesRedirect('https://dart.dev');
assert(test2 == false);

final test3 = await doesRedirect('https://bit.ly/2VcCSow');
assert(test3 == true);
}``````

Proportional Constraints in Flutter

``````

class ProportionalWidthNetworkImage extends StatelessWidget {
final String url;
final double widthProportion;

const ProportionalWidthNetworkImage(
{Key? key, required this.url, required this.widthProportion})
: super(key: key);

@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return Image.network(
url,
final widget =
return Container(
width: constraints.maxWidth * widthProportion,
child: widget,
);
},
);
},
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ProportionalWidthNetworkImage(
url: 'https://cnn.it/3xu58Ap',
widthProportion: 0.8,
),
),
);
}
}``````

Displaying Cupertino Action Sheets in Flutter

``````

import 'package:flutter/cupertino.dart';

enum Season { spring, summer, autumn, winter }

extension Title on Season {
String get title => describeEnum(this).capitalized;
}

extension Caps on String {
String get capitalized => this[0].toUpperCase() + substring(1);
}

extension ToWidget on Season {
Widget toWidget() {
switch (this) {
case Season.spring:
return Image.network('https://cnn.it/3xu58Ap');
case Season.summer:
return Image.network('https://bit.ly/2VcCSow');
case Season.autumn:
return Image.network('https://bit.ly/3A3zStC');
case Season.winter:
return Image.network('https://bit.ly/2TNY7wi');
}
}
}

class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

Future<Season> _chooseSeason(
BuildContext context,
Season currentSeason,
) async {
CupertinoActionSheet actionSheet(BuildContext context) {
return CupertinoActionSheet(
actions: Season.values
.map(
(season) => CupertinoActionSheetAction(
onPressed: () {
Navigator.of(context).pop(season);
},
child: Text(season.title),
),
)
.toList(),
cancelButton: CupertinoActionSheetAction(
onPressed: () {
Navigator.of(context).pop(currentSeason);
},
child: Text('Cancel'),
),
);
}

return await showCupertinoModalPopup(
context: context,
builder: (context) => actionSheet(context),
);
}

class _HomePageState extends State<HomePage> {
var _season = Season.spring;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_season.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_season.toWidget(),
TextButton(
onPressed: () async {
_season = await _chooseSeason(
context,
_season,
);
setState(() {});
},
child: Text('Choose a season'),
),
],
),
);
}
}``````

Rotating `List<T>` in Dart

``````

extension Rotate<T> on List<T> {
int _rotationTimes(int places) {
if (isEmpty) {
return 0;
}
if (places == 0) {
throw ArgumentError('places should be more than 0');
}
return places % length;
}

List<T> rotatedRight(int places) {
final times = _rotationTimes(places);
if (times == 0) {
return this;
} else {
final cutOff = length - times;
}
}

List<T> rotatedLeft(int places) {
final times = _rotationTimes(places);
if (times == 0) {
return this;
} else {
}
}
}

extension Equality<T extends Comparable> on List<T> {
bool isEqualTo(List<T> other) {
if (other.length != length) {
return false;
}
for (var i = 0; i < length; i++) {
if (other[i] != this[i]) {
return false;
}
}
return true;
}
}

const arr = [1, 2, 3];

void testIt() {
assert(arr.rotatedRight(1).isEqualTo([3, 1, 2]));
assert(arr.rotatedRight(2).isEqualTo([2, 3, 1]));
assert(arr.rotatedRight(3).isEqualTo([1, 2, 3]));
assert(arr.rotatedRight(4).isEqualTo([3, 1, 2]));
assert(arr.rotatedLeft(1).isEqualTo([2, 3, 1]));
assert(arr.rotatedLeft(2).isEqualTo([3, 1, 2]));
assert(arr.rotatedLeft(3).isEqualTo([1, 2, 3]));
assert(arr.rotatedLeft(4).isEqualTo([2, 3, 1]));
}``````

Displaying SnackBars in Flutter

``````

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello world'),
),
body: Center(
child: TextButton(
onPressed: () {
final now = DateFormat('kk:mm:ss').format(DateTime.now());
ScaffoldMessenger.of(context).removeCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
behavior: SnackBarBehavior.floating,
elevation: 5.0,
backgroundColor:
Colors.blue[600]!.withOpacity(0.8).withAlpha(200),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.black.withOpacity(0.4),
width: 3.0,
),
),
content: Text('Some text \$now'),
),
);
},
child: Text('Show toast'),
),
),
);
}
}``````

Custom Tab Bar Using ToggleButtons in Flutter

``````

class TabBarButton extends StatelessWidget {
final IconData icon;
final double size;

const TabBarButton({Key? key, required this.icon, this.size = 60.0})
: super(key: key);

@override
Widget build(BuildContext context) {
child: Icon(
icon,
size: size,
),
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Toggle Buttons'),
),
body: Column(
children: [
CustomTabBar(),
],
),
);
}
}

class CustomTabBar extends StatefulWidget {
const CustomTabBar({Key? key}) : super(key: key);

@override
_CustomTabBarState createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar> {
var _selection = [false, false, false];

@override
Widget build(BuildContext context) {
return Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: SafeArea(
child: ToggleButtons(
isSelected: _selection,
onPressed: (index) {
setState(() {
_selection = List.generate(
_selection.length,
(i) => index == i ? true : false,
);
});
},
selectedColor: Colors.white,
fillColor: Colors.blue,
borderWidth: 4.0,
borderColor: Colors.blue[400],
selectedBorderColor: Colors.blue,
highlightColor: Colors.blue.withOpacity(0.2),
children: [
TabBarButton(icon: Icons.settings),
TabBarButton(icon: Icons.settings_remote)
],
),
),
),
);
}
}``````

Hashable Mixins in Dart

``````

enum PetType { cat, dog }

mixin Pet {
String get name;
int get age;
PetType get type;
@override
String toString() => 'Pet (\$type), name = \$name, age = \$age';
@override
int get hashCode => hashValues(name, age, type);
@override
bool operator ==(covariant Pet o) => o.hashCode == hashCode;
}

class Cat with Pet {
@override
final String name;
@override
final int age;
@override
final PetType type;
const Cat({required this.name, required this.age}) : type = PetType.cat;
}

void testIt() {
final cats = <Cat>{
Cat(name: 'Kitty 1', age: 2),
Cat(name: 'Kitty 2', age: 3),
Cat(name: 'Kitty 1', age: 2),
};
cats.forEach(print);
/* ๐๐ป prints the following:
Pet (PetType.cat), name = Kitty 1, age = 2
Pet (PetType.cat), name = Kitty 2, age = 3
*/
}``````

Flutter Tips and Tricks in Terminal

``````

import 'dart:convert' show utf8;
import 'dart:io' show HttpClient, exit, Process, stderr;
import 'dart:math' show Random;

const rawBlobRoot =

void main(List<String> args) async {
final url = Uri.https('bit.ly', '/2V1GKsC');
try {
final client = HttpClient();
final images = await client
.getUrl(url)
.then((req) => req.close())
.then((resp) => resp.transform(utf8.decoder).join())
.then((body) => body.split('\n').map((e) => e.trim()))
.then((iter) => iter.toList())
.then((list) => list..retainWhere((s) => s.endsWith('.jpg)')))
.then((imageList) => imageList.map((e) => e.replaceAll('![](', '')))
.then((imageList) => imageList.map((e) => e.replaceAll(')', '')))
.then((iter) => iter.toList());

final found = images[Random().nextInt(images.length)];
final result = '\$rawBlobRoot\$found';
await Process.run('open', [result]);
exit(0);
} catch (e) {
stderr.writeln('Could not proceed due to \$e');
exit(1);
}
}``````

Searching `List<List<T>>` in Dart

``````

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr = [arr1, arr2, arr3];

extension FlattenFind<T extends Comparable> on Iterable<Iterable<T>> {
bool containsElement(T value) {
for (final arr in this) {
if (arr.contains(value)) {
return true;
}
}
return false;
}
}

void testIt() {
assert(arr.containsElement(2));
assert(arr.containsElement(8));
assert(!arr.containsElement(10));
assert(!arr.containsElement(10));
}``````

Cloning Objects in Dart

``````

class Person {
final Map<String, Object> _values;
static const FIRST_NAME_KEY = 'FIRST_NAME';
static const LAST_NAME_KEY = 'LAST_NAME';

Person.from(Map<String, Object> props) : _values = props;

Person({
required String firstName,
required String lastName,
Map<String, Object>? props,
}) : _values = {
FIRST_NAME_KEY: firstName,
LAST_NAME_KEY: lastName,
};

@override
bool operator ==(covariant Person other) =>
other.firstName == firstName && other.lastName == lastName;

@override
String toString() => _values.toString();
}

extension Properties on Person {
String get firstName => _values[Person.FIRST_NAME_KEY].toString();
set firstName(String newValue) => _values[Person.FIRST_NAME_KEY] = newValue;

String get lastName => _values[Person.LAST_NAME_KEY].toString();
set lastName(String newValue) => _values[Person.LAST_NAME_KEY] = newValue;
}

extension Clone on Person {
}

extension Subscripts on Person {
Object? operator [](String key) => _values[key];
operator []=(String key, Object value) => _values[key] = value;
}

void testIt() {
final foo = Person(
firstName: 'Foo Firstname',
lastName: 'Foo Lastname',
);
print(foo); // {FIRST_NAME: Foo Firstname, LAST_NAME: Foo Lastname}
final copyOfFoo = foo.clone();
print(copyOfFoo); // {FIRST_NAME: Foo Firstname, LAST_NAME: Foo Lastname}
final bar = foo.clone({'age': 30});
print(bar); // {FIRST_NAME: Foo Firstname, LAST_NAME: Foo Lastname, age: 30}
assert(foo == copyOfFoo);
assert(foo == bar);
assert(foo['age'] == null);
assert(copyOfFoo['age'] == null);
assert(bar['age'] == 30);
}``````

Color Filters in Flutter

``````

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
var sliderValue = 0.0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Color Filters in Flutter!'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.orange.withOpacity(sliderValue),
BlendMode.colorBurn,
),
child: Image.network('https://tinyurl.com/4vtvh35h'),
),
Slider(
value: sliderValue,
onChanged: (value) {
setState(() {
sliderValue = value;
});
},
)
],
),
);
}
}``````

Flattening Lists in Dart

``````

class Person {
final String name;
const Person(this.name);
@override
String toString() => 'Person: \$name';
}

class House {
final List<Person>? tennants;
final List<Person> builders;
const House({
required this.tennants,
required this.builders,
});
}

const houses = [
House(tennants: null, builders: [
Person('Builder 1'),
]),
House(tennants: [
Person('Tennant 1'),
Person('Tennant 2'),
], builders: [
Person('Builder 3')
]),
];

extension OptionalFlattend<T> on Iterable<List<T>?> {
Iterable<T> flattened() => expand((e) => e ?? []);
}

void testOptionalFlatten() {
final allTennants = houses.map((h) => h.tennants).flattened();
print(allTennants); // Person: Tennant 1, Person: Tennant 2
}

extension Flattend<T> on Iterable<List<T>> {
Iterable<T> flattened() => expand((e) => e);
}

void testNonOptionalFlatten() {
final allBuilders = houses.map((h) => h.builders).flattened();
print(allBuilders); // Person: Builder 1, Person: Builder 2
}

void testIt() {
testOptionalFlatten();
testNonOptionalFlatten();
}``````

Managing Duplicates in `List<T>` in Dart

``````

extension Duplicates<T> on List<T> {
replaceRange(0, length, {
...([...this] + [...values])
});

int get numberOfDuplicates => length - {...this}.length;

bool get containsDuplicates => numberOfDuplicates > 0;

List<T> get uniques => [
...{...this}
];

void removeDuplicates() => replaceRange(
0,
length,
uniques,
);

List<T> get duplicates => [
for (var i = 0; i < length; i++)
[...this].skip(i + 1).contains(this[i]) ? this[i] : null
].whereType<T>().toList();
}

void testIt() {
final values = [3, 2, 10, 30, 40, 30, 100, 10];

assert(values.numberOfDuplicates == 2);
assert(values.containsDuplicates == true);

assert(values.uniques.length == values.length - 2);
print(values.uniques); // [3, 2, 10, 30, 40, 100]

values.removeDuplicates();
print(values); // [3, 2, 10, 30, 40, 100]

assert(values.numberOfDuplicates == 0);
assert(!values.containsDuplicates);
assert(values.duplicates.isEmpty);

print(values); // [3, 2, 10, 30, 40, 100, 200]
assert(values.containsDuplicates == false);
}``````

FlatMap and CompactMap in Dart

``````

extension CompactMap<T> on List<T> {
List<E> compactMap<E>(E? Function(T element) f) {
Iterable<E> imp(E? Function(T element) f) sync* {
for (final value in this) {
final mapped = f(value);
if (mapped != null) {
yield mapped;
}
}
}

return imp(f).toList();
}
}

extension FlatMap<T> on T? {
E? flatMap<E>(E? Function(T value) f) {
if (this != null) {
return f(this!);
} else {
return null;
}
}
}

void testIt() {
final foo = [1, 2, null, 3, null, 4];
final bar = foo.compactMap((element) => element.flatMap((e) => e * 2));
print(bar); // prints 2, 4, 6, 8
}``````

Equality of `List<T>` in Dart

``````

extension Equality<T extends Comparable> on List<T> {
bool isEqualTo(List<T> other) {
if (other.length != length) {
return false;
}
for (var i = 0; i < length; i++) {
if (other[i] != this[i]) {
return false;
}
}
return true;
}
}

int ascendingComparator<T extends Comparable>(T lhs, T rhs) =>
lhs.compareTo(rhs);
int descendingComparator<T extends Comparable>(T lhs, T rhs) =>
rhs.compareTo(lhs);

extension Sorted<T extends Comparable> on List<T> {
List<T> sorted({bool descending = false}) => descending
? ([...this]..sort(descendingComparator))
: ([...this]..sort(ascendingComparator));
}

void testIt() {
assert([1, 2, 3].isEqualTo([1, 2, 3]));
assert(![1, 2, 3].isEqualTo([1, 2, 2]));
assert([3, 1, 2].sorted().isEqualTo([1, 2, 3]));
assert(![3, 1, 2].sorted().isEqualTo([3, 1, 2]));
assert(['Foo', 'Bar', 'Baz'].isEqualTo(['Foo', 'Bar', 'Baz']));
assert(!['Foo', 'Bar', 'Baz'].isEqualTo(['foo', 'Bar', 'Baz']));
}``````

Constants in Dart

``````

class Person {
final String name;
final int age;
const Person({required this.name, required this.age});
}

const foo = Person(name: 'Foo', age: 20);
const foo2 = Person(name: 'Foo', age: 20);
const bar = Person(name: 'Bar', age: 20);

void assert_eq(Object lhs, Object rhs) {
assert(lhs == rhs);
}

void assert_ne(Object lhs, Object rhs) {
assert(lhs != rhs);
}

void testIt() {
assert_eq(foo, foo2);
assert_ne(foo, bar);
assert_ne(foo2, bar);
}``````

Displaying Scrollable Bottom Sheets in Flutter

``````

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Scrollable Sheet')),
body: DraggableScrollableSheet(
initialChildSize: 0.2,
minChildSize: 0.2,
maxChildSize: 0.8,
builder: (context, scrollController) {
return Container(
decoration: decoration(),
clipBehavior: Clip.antiAlias,
child: SingleChildScrollView(
controller: scrollController,
child: column(),
),
);
},
),
);
}
}

const urls = [
'https://tinyurl.com/4vtvh35h',
'https://tinyurl.com/pujhs55w',
'https://tinyurl.com/u5k7zueh',
];

List<Widget> imageWithLoremIpsum(String uri) => [
Image.network(uri),
SizedBox(height: 10),
loremIpsum(),
SizedBox(height: 10),
];

Column column() => Column(
children: imageWithLoremIpsum(urls[0]) +
imageWithLoremIpsum(urls[1]) +
imageWithLoremIpsum(urls[2]),
);

Text loremIpsum() => Text(
'Lorem ipsum ' * 10,
textAlign: TextAlign.center,
);

BoxDecoration decoration() => BoxDecoration(
border: Border.all(color: Colors.white),
),
color: Colors.white70,
);``````

``````

import 'dart:io' show stdout, stderr, exitCode;
import 'package:collection/collection.dart' show IterableExtension;

void main(List<String> args) async {
if (args.isEmpty) {
return;
}

args.firstWhereOrNull((element) => Uri.tryParse(element) != null);

exitCode = 1;
return;
}

try {
if (uri.scheme.toLowerCase() != 'https' ||
uri.queryParameters['v'] == null) {
throw FormatException();
} else {
final videoId = uri.queryParameters['v'];
final embedUri = Uri.parse('\${uri.scheme}://\${uri.host}/embed/\$videoId');
stdout.writeln(embedUri);
exitCode = 0;
}
} on FormatException catch (e) {
stderr.writeln('Invalid Uri, try again! err = \$e');
exitCode = 1;
return;
}
}``````

``````

const urls = [
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
];

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
var isShowingFirstImage = true;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: Center(
layoutBuilder: (topChild, topChildKey, bottomChild, bottomChildKey) {
return GestureDetector(
onTap: () {
setState(() {
isShowingFirstImage = !isShowingFirstImage;
});
},
topChild, topChildKey, bottomChild, bottomChildKey),
);
},
firstChild: Image.network(urls[0]),
secondChild: Image.network(urls[1]),
duration: Duration(milliseconds: 400),
),
),
);
}
}``````

Sort Descriptors in Dart

``````

int ascendingComparator<T extends Comparable>(T lhs, T rhs) =>
lhs.compareTo(rhs);
int descendingComparator<T extends Comparable>(T lhs, T rhs) =>
rhs.compareTo(lhs);

extension Sorted<T extends Comparable> on List<T> {
List<T> sorted({bool descending = false}) => descending
? (this..sort(descendingComparator))
: (this..sort(ascendingComparator));
}

class Person implements Comparable {
final int age;
final String name;
const Person({required this.age, required this.name});
@override
int compareTo(covariant Person other) => age.compareTo(other.age);
@override
String toString() => 'Person, name = \$name (\$age)';
}

void testIt() {
final people = [
Person(age: 39, name: 'Father Foo'),
Person(age: 40, name: 'Mother Bar'),
Person(age: 13, name: 'Son Baz'),
];

print('ascending sort');
people.sorted().forEach(print);
// prints Son Baz (13), Father Foo (39), Mother Bar (40)
print('descending sort');
people.sorted(descending: true).forEach(print);
// prints Mother Bar (40), Father Foo (39), Son Baz (13)
}``````

User Sortable Columns and Tables in Flutter

``````

class Language {
final String name;
final Image image;
const Language(this.name, this.image);
Language.dart()
: name = 'Dart',
image = Image.network('https://bit.ly/3yH1Ivj');
Language.rust()
: name = 'Rust',
image = Image.network('https://bit.ly/3lPTqhb');
Language.python()
: name = 'Python',
image = Image.network('https://bit.ly/3iCFCEP');

Language.java()
: name = 'Java',
image = Image.network('https://bit.ly/3CCapJH');
static List<Language> all = [
Language.dart(),
Language.rust(),
Language.python(),
Language.java(),
];
}

extension Sort on List<Language> {
void sortByName(bool ascending) => sort((lhs, rhs) =>
ascending ? lhs.name.compareTo(rhs.name) : rhs.name.compareTo(lhs.name));
}

List<DataRow> rows(List<Language> langs) => langs
.map(
(l) => DataRow(
cells: [
DataCell(
child: l.image,
),
),
DataCell(Text(l.name)),
],
),
)
.toList();

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
final List<Language> _langs = Language.all..sortByName(true);
int sortedColumnIndex = 1;
var isSortedAscending = true;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('WhatsApp')),
body: DataTable(
sortAscending: isSortedAscending,
sortColumnIndex: sortedColumnIndex,
columns: [
DataColumn(label: Text('Image')),
DataColumn(
label: Text('Name'),
onSort: (columnIndex, ascending) {
setState(() {
sortedColumnIndex = columnIndex;
isSortedAscending = ascending;
_langs.sortByName(ascending);
});
},
),
],
rows: rows(_langs),
),
);
}
}``````

Content-Length of `List<Uri>` in Dart

Recursive Dot Notation on Maps in Dart

``````

final person = {
'firstName': 'Foo',
'lastName': 'Bar',
'age': 30,
'street': {
'name': 'Baz street',
'numberOfHouses': 20,
},
'houseNumber': '#20',
'city': 'Stockholm',
'country': 'Sweden'
},
};

extension KeyPath on Map {
Object? valueFor({required String keyPath}) {
final keysSplit = keyPath.split('.');
final thisKey = keysSplit.removeAt(0);
final thisValue = this[thisKey];
if (keysSplit.isEmpty) {
return thisValue;
} else if (thisValue is Map) {
return thisValue.valueFor(keyPath: keysSplit.join('.'));
}
}
}

void testIt() {
assert(person.valueFor(keyPath: 'firstName') == 'Foo');
assert(person.valueFor(keyPath: 'age') == 30);
}``````

Allow User Selection of Text in Flutter

``````

const text = 'Flutter is an open-source UI software development'
' kit created by Google. It is used to develop cross platform applications'
' for Android, iOS, Linux, Mac, Windows, Google Fuchsia, '
'and the web from a single codebase.';

const imageUrl = 'https://bit.ly/3gT5Qk2';

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Selectable Text in Flutter'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(imageUrl),
SizedBox(height: 10.0),
child: SelectableText(
text,
textAlign: TextAlign.center,
showCursor: true,
cursorColor: Colors.blue,
toolbarOptions: ToolbarOptions(
copy: true,
selectAll: true,
),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w300,
),
),
),
],
),
);
}
}``````

Placing Constraints on Widgets in Flutter

``````

const dashes = [
'https://bit.ly/3gHlTCU',
'https://bit.ly/3wOLO1c',
'https://bit.ly/3cXWD9j',
'https://bit.ly/3gT5Qk2',
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ConstrainedBox in Flutter'),
),
body: InteractiveViewer(
minScale: 1.0,
maxScale: 2.0,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Table(
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children: dashes
.map(
(dash) => TableRow(
children: [
ConstrainedBox(
constraints: BoxConstraints(
minHeight: 300,
),
child: Image.network(dash),
),
],
),
)
.toList(),
),
),
),
);
}
}``````

Animating Position Changes in Flutter

``````

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
var isMovedUp = false;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('AnimatedPositioned in Flutter')),
body: Center(
child: GestureDetector(
onTap: () => setState(() => isMovedUp = !isMovedUp),
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Image.network('https://bit.ly/2VcCSow'),
Text(
'Summer ๐',
style: TextStyle(
fontSize: 30,
color: Colors.black,
),
),
AnimatedPositioned(
duration: Duration(seconds: 1),
bottom: isMovedUp ? 140 : 10.0,
curve: Curves.elasticInOut,
child: CircleAvatar(
backgroundImage: NetworkImage('https://bit.ly/3cXWD9j'),
backgroundColor: Colors.orange[300],
),
),
],
),
),
),
);
}
}``````

Transitioning Between Widgets in Flutter

``````

enum Season { spring, summer, autumn, winter }

extension Caps on String {
String get capitalized => this[0].toUpperCase() + substring(1);
}

extension Title on Season {
String get title => describeEnum(this).capitalized;
}

class TitledImage {
final String title;
final Uri uri;
final ValueKey key;
const TitledImage(this.title, this.uri, this.key);

TitledImage.spring()
: title = Season.spring.title,
uri = Uri.https('cnn.it', '/3xu58Ap'),
key = ValueKey(1);

TitledImage.summer()
: title = Season.summer.title,
uri = Uri.https('bit.ly', '/2VcCSow'),
key = ValueKey(2);

TitledImage.autumn()
: title = Season.autumn.title,
uri = Uri.https('bit.ly', '/3A3zStC'),
key = ValueKey(3);

TitledImage.winter()
: title = Season.winter.title,
uri = Uri.https('bit.ly', '/2TNY7wi'),
key = ValueKey(4);
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
var _img = TitledImage.summer();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(_img.title)),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedSwitcher(
switchInCurve: Curves.easeIn,
switchOutCurve: Curves.easeOut,
duration: Duration(milliseconds: 300),
transitionBuilder: (child, animation) {
},
child: Image.network(
_img.uri.toString(),
key: _img.key,
),
),
getButtons(),
],
),
);
}

Widget getButtons() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () => setState(() => _img = TitledImage.spring()),
child: Text(Season.spring.title),
),
TextButton(
onPressed: () => setState(() => _img = TitledImage.summer()),
child: Text(Season.summer.title),
),
TextButton(
onPressed: () => setState(() => _img = TitledImage.autumn()),
child: Text(Season.autumn.title),
),
TextButton(
onPressed: () => setState(() => _img = TitledImage.winter()),
child: Text(Season.winter.title),
),
],
);
}
}``````

``````

final String name;
final int age;
Person({
required this.name,
required this.age,
});

@override
String toString() => 'Person name = \$name, age = \$age';
}

void testIt() {
final dad = Person(name: 'Father Foo', age: 47);
final mom = Person(name: 'Mother Bar', age: 47);
final daughter = Person(name: 'Daughter Baz', age: 22);

print(persons.first.previous); // null
print(persons.first); // Person name = Father Foo, age = 47
print(persons.first.next); // Person name = Mother Bar, age = 47
print(persons.last.previous); // Person name = Mother Bar, age = 47
print(persons.first.next?.next); // Person name = Daughter Baz, age = 22
print(persons.last.next); // null
}``````

Reordering Items Inside List Views in Flutter

``````

class Item {
final Color color;
final String text;
final UniqueKey uniqueKey;
Item(this.color, this.text) : uniqueKey = UniqueKey();
}

extension ToListItem on Item {
Widget toListItem() => LimitedBox(
key: uniqueKey,
maxHeight: 200,
child: Container(
color: color,
child: Text(
text,
style: TextStyle(
color: Colors.white,
fontSize: 100,
),
),
),
),
);
}

class _HomePageState extends State<HomePage> {
var items = [
Item(Colors.deepPurple, 'Foo'),
Item(Colors.blueGrey, 'Bar'),
Item(Colors.lightGreen, 'Baz')
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Reordered List View in Flutter'),
),
body: ReorderableListView(
onReorder: (oldIndex, newIndex) {
setState(() {
final item = items.removeAt(oldIndex);
items.insert(newIndex, item);
});
},
children: items.map((i) => i.toListItem()).toList(),
),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}``````

Custom Stream Transformers in Dart

``````

in this example we have created our own string transformer that
can trim a Stream<String> by trimming whitespace from both
beginning and end of the string
*/

import 'dart:convert' show utf8;

class StringTrimmer extends StreamTransformerBase<String, String> {
const StringTrimmer();
@override
Stream<String> bind(Stream<String> stream) =>
Stream.fromFuture(stream.join(' ')).map((str) => str.trim());
}

final string =
'''   A long line of text with spaces in the beginning and the end,
divided into three lines just for the purpose of this demonstration    ''';

void testIt() async {
final bytes = utf8.encode(string);
final result = await Stream.value(bytes)
.transform(utf8.decoder)
.transform(LineSplitter())
.transform(StringTrimmer())
.join();
print(result);
}``````

Expanding Stream Elements in Dart

``````/*

in this example we expand every element inside our Stream<int> to
a stream that in turn contains n+1 elements where n is the index generated
by our main stream, that's to say, 0, 1, 2, 3, 4, etc

*/
Stream<int> nestedEvents(int count) {
return Stream.periodic(
Duration(seconds: 1),
(e) => e,
).take(count).asyncExpand(
(i) => Stream.fromIterable(
Iterable.generate(i + 1),
),
);
}

void testIt() async {
/*
prints the followings in this order
0, 1
0, 1, 2
0, 1, 2, 3
0, 1, 2, 3, 4
*/
await for (final value in nestedEvents(5)) {
print('Value is \$value');
}
}``````

Consume Streams for a Duration in Dart

``````extension TakeFor<T> on Stream<T> {
Stream<T> takeFor(Duration duration) {
return takeWhile((_) {
final now = DateTime.now();
return now.isBefore(upTo) | now.isAtSameMomentAs(upTo);
});
}
}

Stream<DateTime> source() => Stream.periodic(
Duration(milliseconds: 500),
(_) => DateTime.now(),
);

void testIt() async {
await for (final dateTime in source().takeFor(
Duration(seconds: 4),
)) {
print('date time is \$dateTime');
}
}``````

Shortening URLs in Dart

``````import 'dart:convert' show json;

Future<Uri> shortenUri(Uri uri, String bitlyToken) async {
final client = HttpClient();

final endpoint = Uri.https('api-ssl.bitly.com', '/v4/shorten');

final response = await client.postUrl(endpoint).then(
(req) {

final body = {
'long_url': uri.toString(),
'domain': 'bit.ly',
};
final bodyBytes = utf8.encode(json.encode(body));

return req.close();
},
);

final responseBody = await response.transform(utf8.decoder).join();
final responseJson = json.decode(responseBody) as Map<String, dynamic>;
}

void testIt() async {
print(await shortenUri(
Uri.parse('https://pixolity.se'),
'XXX',
));
}``````

LimitedBox Widget as ListView Items in Flutter

``````const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/3jRSRCu',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

extension ToListItemImage on String {
Widget toListItemImage() {
return LimitedBox(
maxHeight: 150.0,
child: Image.network(
this,
fit: BoxFit.fitWidth,
),
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Limited Box in Flutter')),
body: ListView(
children: images.map((str) => str.toListItemImage()).toList(),
),
);
}
}``````

Generically Convert Anything to Int in Dart

``````extension ToInt on Object {
int toInt() {
final list = [
if (this is Iterable<Object>)
...(List.of(this as Iterable<Object>))
else if (this is int)
[this as int]
else
(double.tryParse(toString()) ?? 0.0).round()
];
return list
.map((e) => (double.tryParse(e.toString()) ?? 0.0).round())
.reduce((lhs, rhs) => lhs + rhs);
}
}

void testIt() {
assert(1.toInt() == 1);
assert((2.2).toInt() == 2);
assert((2.0).toInt() == 2);
assert('3'.toInt() == 3);
assert(['4', '5'].toInt() == 9);
assert([4, 5].toInt() == 9);
assert(['2.4', '3.5'].toInt() == 6);
assert(['2', '3.5'].toInt() == 6);
assert({'2', 3, '4.2'}.toInt() == 9);
assert(['2', 3, '4.2', 5.3].toInt() == 14);
}``````

Validating URL Certificates in Dart

``````import 'dart:io' show HttpClient;

Future<bool> isSecuredWithValidCert(String uriString) async {
final uri = Uri.parse(uriString);
final client = HttpClient();
try {
return true;
} on HandshakeException {
return false;
}
}

void testIt() async {
}``````

``````enum ImageAction { copy }

value: ImageAction.copy,
child: TextButton.icon(
icon: Icon(Icons.copy),
label: Text('Copy'),
onPressed: onPressed,
),
);

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter'),
),
body: Center(
elevation: 10,
offset: Offset(0, 50),
itemBuilder: (_) => [
copyButton(
onPressed: () {
print('Copy the image...');
},
),
],
child: Image.network('https://bit.ly/3ywI8l6'),
),
),
);
}
}``````

Implementing Drag and Drop in Flutter

``````class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
String? _imageUrl;

bool shouldAccept(String? value) => Uri.tryParse(value ?? '') != null;

Widget dragTargetBuilder(
BuildContext context,
List<String?> incoming,
dynamic rejected,
) {
final emptyContainer = Container(
color: Colors.grey[200],
height: 200,
child: Center(
child: Text('Drag an image here'),
),
);

if (incoming.isNotEmpty) {
_imageUrl = incoming.first;
}

if (_imageUrl == null) {
return emptyContainer;
}

try {
final uri = Uri.parse(_imageUrl ?? '');
return Container(
color: Colors.grey[200],
height: 200,
child: Center(
child: Image.network(uri.toString()),
),
);
} on FormatException {
return emptyContainer;
}
}

static final firstImageUrl = 'https://bit.ly/3xnoJTm';
static final secondImageUrl = 'https://bit.ly/3hIuC78';
final firstImage = Image.network(firstImageUrl);
final secondImage = Image.network(secondImageUrl);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Tooltips in Flutter')),
child: Column(
children: [
DragTarget<String>(
onWillAccept: shouldAccept,
builder: dragTargetBuilder,
),
SizedBox(height: 10.0),
DraggableImage(
imageWidget: firstImage,
imageUrl: firstImageUrl,
),
SizedBox(height: 10.0),
DraggableImage(
imageWidget: secondImage,
imageUrl: secondImageUrl,
),
],
),
),
);
}
}

class DraggableImage extends StatelessWidget {
const DraggableImage({
Key? key,
required this.imageWidget,
required this.imageUrl,
}) : super(key: key);

final Image imageWidget;
final String imageUrl;

@override
Widget build(BuildContext context) {
return Draggable<String>(
data: imageUrl,
feedback: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.black,
),
],
),
child: imageWidget,
),
child: imageWidget,
);
}
}``````

Dismissing List Items in Flutter

``````const gridImages = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3dLJNeD',
'https://bit.ly/3ywI8l6',
'https://bit.ly/3jRSRCu',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
CustomAppBar(),
CustomGridView(),
CustomListView(
imageUrls: gridImages,
),
],
),
);
}
}

class _CustomListViewState extends State<CustomListView> {
@override
Widget build(BuildContext context) {
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
final url = widget.imageUrls[index];
return Dismissible(
key: ValueKey(url),
onDismissed: (_) {
widget.imageUrls.remove(url);
},
background: Container(
color: Colors.red,
child: FittedBox(
alignment: Alignment.centerRight,
fit: BoxFit.fitHeight,
child: Icon(Icons.delete, color: Colors.white),
),
),
child: Image.network(url),
),
);
},
childCount: widget.imageUrls.length,
),
),
);
}
}

class CustomListView extends StatefulWidget {
final List<String> imageUrls;

const CustomListView({
Key? key,
required this.imageUrls,
}) : super(key: key);

@override
_CustomListViewState createState() => _CustomListViewState();
}

class CustomGridView extends StatelessWidget {
const CustomGridView({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
width: 100,
height: 100,
child: Image.network(gridImages[index]),
);
},
childCount: gridImages.length,
),
),
);
}
}

class CustomAppBar extends StatelessWidget {
const CustomAppBar({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return SliverAppBar(
backgroundColor: Colors.orange[300],
forceElevated: true,
pinned: false,
snap: false,
floating: true,
expandedHeight: 172,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'Flutter',
style: TextStyle(
fontSize: 30,
color: Colors.white,
decoration: TextDecoration.underline,
),
),
collapseMode: CollapseMode.parallax,
background: Image.network('https://bit.ly/3x7J5Qt'),
),
);
}
}``````

Animating Widgets with Ease in Flutter

``````class Ball extends StatefulWidget {
const Ball({Key? key}) : super(key: key);

@override
_BallState createState() => _BallState();
}

class _BallState extends State<Ball> with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation _animation;

@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 4),
reverseDuration: Duration(seconds: 4),
);
_animation = Tween(begin: 0.0, end: 2 * pi).animate(_controller);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
_controller.repeat();
return AnimatedBuilder(
animation: _animation,
builder: (context, image) {
return Transform.rotate(
angle: _animation.value,
child: image,
);
},
child: Image.network('https://bit.ly/3xspdrp'),
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Builder in Flutter'),
),
body: Center(
child: Ball(),
),
);
}
}``````

Displaying Tool Tips in Flutter

``````const imagesAndInfo = [
['https://bit.ly/3xnoJTm', 'Stockholm, Sweden'],
['https://bit.ly/3hIuC78', 'Dalarna, Sweden'],
['https://bit.ly/3wi9mdG', 'Brighton, UK'],
['https://bit.ly/3dSSMuy', 'Hove, UK'],
['https://bit.ly/3xoWCmV', 'Kerala, India'],
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Tooltips in Flutter')),
body: ListView.builder(
itemCount: imagesAndInfo.length,
itemBuilder: (_, index) {
padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
child: Tooltip(
decoration: BoxDecoration(
color: Colors.black,
color: Colors.white.withAlpha(180),
offset: Offset.zero,
),
],
),
textStyle: TextStyle(fontSize: 20, color: Colors.white),
message: imagesAndInfo[index][1],
child: Image.network(
imagesAndInfo[index][0],
),
),
);
},
),
);
}
}``````

Displaying Assorted Widgets Inside TableView in Flutter

``````const natureUrls = [
'https://bit.ly/3dAtFwy',
'https://bit.ly/36cHehe',
'https://bit.ly/365uqt1',
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3jBvJYU',
'https://bit.ly/3yhbHHi'
];

extension ToImage on String {
child: Image.network(this),
);
}

extension ToImages on List<String> {
}

extension ToTableRow on List<Widget> {
TableRow toTableRow() => TableRow(children: this);
}

class ListPaginator<T> extends Iterable {
final List<List<T>> list;
ListPaginator({required List<T> input, required int itemsPerPage})
: list = [
for (var i = 0; i < input.length; i += itemsPerPage)
input.getRange(i, min(input.length, i + itemsPerPage)).toList(),
];

@override
Iterator get iterator => list.iterator;
}

class HomePage extends StatelessWidget {
final provider = ListPaginator<String>(
input: natureUrls,
itemsPerPage: 3,
);
HomePage({Key? key}) : super(key: key);

Iterable<TableRow> getRows() sync* {
for (final List<String> urlBatch in provider) {
yield TableRow(children: networkImages);
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TableView in Flutter'),
),
body: SingleChildScrollView(
child: Table(
defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
children: getRows().toList(),
),
),
);
}
}``````

Page Indicator with Page View in Flutter

``````const dashes = [
'https://bit.ly/3gHlTCU',
'https://bit.ly/3wOLO1c',
'https://bit.ly/3cXWD9j',
'https://bit.ly/3gT5Qk2',
];

class PageText extends StatelessWidget {
final int current;
final int total;

const PageText({
Key? key,
required this.current,
required this.total,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Text(
'Page \${current + 1} of \$total',
offset: Offset(0.0, 1.0),
color: Colors.black.withAlpha(140),
)
]),
);
}
}

class _HomePageState extends State<HomePage> {
var _index = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Page Indicator')),
body: SafeArea(
child: Column(
children: [
Expanded(
child: PageView.builder(
onPageChanged: (pageIndex) {
setState(() => _index = pageIndex);
},
scrollDirection: Axis.horizontal,
itemCount: dashes.length,
itemBuilder: (context, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(dashes[index]),
Text('Dash #\${index + 1}'),
],
);
},
),
),
PageText(current: _index, total: dashes.length)
],
),
),
);
}
}``````

Animating and Moving a Floating Action Button in Flutter

``````class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

const List<FloatingActionButtonLocation> locations = [
FloatingActionButtonLocation.centerDocked,
FloatingActionButtonLocation.startDocked,
FloatingActionButtonLocation.startFloat,
FloatingActionButtonLocation.centerFloat,
FloatingActionButtonLocation.endFloat,
FloatingActionButtonLocation.endDocked
];

extension GoAround<T> on List<T> {
T elementByGoingAround(int index) {
final finalIndex = index >= length ? index.remainder(length) : index;
return this[finalIndex];
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
var _locationIndex = 0;

FloatingActionButtonLocation get location =>
locations.elementByGoingAround(_locationIndex);

@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(
title: Text('Floating Action Button'),
),
floatingActionButtonLocation: location,
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() => _locationIndex += 1);
},
),
backgroundColor: Colors.yellow[600],
selectedItemColor: Colors.black,
items: [
icon: Icon(Icons.bedtime),
label: 'Item 1',
),
icon: Icon(Icons.access_alarms),
label: 'Item 2',
)
],
currentIndex: 0,
),
);
}
}``````

Fading Network Image Widget in Flutter

``````class FadingNetworkImage extends StatefulWidget {
final String url;

const FadingNetworkImage({Key? key, required this.url}) : super(key: key);

@override
}

with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;

@override
void initState() {
super.initState();

_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));

_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
},
if (totalBytes != null && bytesLoaded != null) {
return LinearProgressIndicator(
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}

const dashes = [
'https://bit.ly/3gHlTCU',
'https://bit.ly/3wOLO1c',
'https://bit.ly/3cXWD9j',
'https://bit.ly/3gT5Qk2',
];

extension GoAround<T> on List<T> {
T elementByGoingAround(int index) {
final finalIndex = index >= length ? index.remainder(length) : index;
return this[finalIndex];
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
int _index = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: Center(
child: Column(
children: [
url: dashes.elementByGoingAround(_index),
),
TextButton(
onPressed: () {
setState(() => _index += 1);
},
),
],
)),
);
}
}``````

``````TextStyle get whiteTextStyle => TextStyle(color: Colors.white);

Future<void> showTextDialog({
required BuildContext context,
required String text,
}) {
return showDialog(
context: context,
builder: (context) {
shape: RoundedRectangleBorder(
),
side: BorderSide(
color: Colors.white,
style: BorderStyle.solid,
width: 2,
),
),
backgroundColor: Colors.black.withAlpha(150),
titleTextStyle: whiteTextStyle,
contentTextStyle: whiteTextStyle,
content: Text(text),
actions: [
TextButton(
style: TextButton.styleFrom(primary: Colors.white),
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
)
],
);
},
);
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Rounded Corder Dialog',
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network('https://bit.ly/3ywI8l6'),
TextButton(
onPressed: () async {
await showTextDialog(
context: context,
text: 'Hello world',
);
},
child: Text('Show dialog'),
),
],
),
);
}
}``````

Network Image Size in Dart

``````import 'dart:ui' as ui;

Future<Size> getImageSize(String uri) {
final image = Image.network('https://bit.ly/3dAtFwy');
final comp = Completer<ui.Image>();
image.image
.resolve(
ImageConfiguration.empty,
)
ImageStreamListener(
(ImageInfo info, _) => comp.complete(info.image),
),
);
return comp.future.then(
(image) => Size(
image.width.toDouble(),
image.height.toDouble(),
),
);
}

void testIt() async {
final imageSize = await getImageSize('https://bit.ly/3dAtFwy');
print(imageSize);
assert(imageSize.width == 2048.0);
assert(imageSize.height == 1365.0);
print(imageSize.aspectRatio);
}``````

Animated Icons in Flutter

``````class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final Animation<double> _animation;
late final AnimationController _controller;

@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
_controller.repeat(reverse: true);
return Scaffold(
appBar: AppBar(
title: Text('Animated Icons in Fluter'),
),
body: Center(
child: AnimatedIcon(
color: Colors.green[300],
size: MediaQuery.of(context).size.width,
icon: AnimatedIcons.search_ellipsis,
progress: _animation,
),
),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}``````

Custom Scroll Views in Flutter

``````const gridImages = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3dLJNeD',
'https://bit.ly/3ywI8l6',
'https://bit.ly/3jRSRCu',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
CustomAppBar(),
CustomGridView(),
CustomListView(),
],
),
);
}
}

class CustomListView extends StatelessWidget {
const CustomListView({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
child: Image.network(gridImages[index]),
);
},
childCount: gridImages.length,
),
),
);
}
}

class CustomGridView extends StatelessWidget {
const CustomGridView({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
width: 100,
height: 100,
child: Image.network(gridImages[index]),
);
},
childCount: gridImages.length,
),
),
);
}
}

class CustomAppBar extends StatelessWidget {
const CustomAppBar({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return SliverAppBar(
backgroundColor: Colors.orange[300],
forceElevated: true,
pinned: false,
snap: false,
floating: true,
expandedHeight: 172,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'Flutter',
style: TextStyle(
fontSize: 30,
color: Colors.white,
decoration: TextDecoration.underline,
),
),
collapseMode: CollapseMode.parallax,
background: Image.network('https://bit.ly/3x7J5Qt'),
),
);
}
}``````

Parallax App Bar in Flutter

JSON HTTP Requests in Dart

URL Timeouts in Dart

Detecting URL File Types in Dart

Paginated Lists in Dart

Requesting DELETE on APIs in Dart

Animated Containers in Flutter

Hiding Widgets in Flutter

Simple Opacity Animation in Flutter

Vignette Widget in Flutter

Drop Down Button Configuration and Usage in Flutter

Expandable List Items in Flutter

Infinite Scrolling in Flutter

Infinite Arrays in Dart

Custom Color Picker Component in Flutter

Displaying and Reacting to Switches in Flutter

Displaying Bottom Bars in Flutter

Displaying Buttons on AppBar in Flutter

Displaying Bottom Sheets in Flutter

Converting Enums to Radio Buttons in Flutter

Check Existence of Websites in Flutter

Simple Grid View in Flutter

Rendering Bullet Points in Flutter

Retrying Futures in Flutter

Containers as ClipOvals in Flutter

Rich Texts in Flutter

Wrapping Widgets in Flutter

`Stream` and `StreamBuilder` in Flutter

Blur Effect in Flutter

Convert Enums to Strings in Dart

Replacing Text in TextField in Flutter

Aspect Ratio in Flutter

Zoom and Pan in Flutter

Resizing Images in Flutter to Fit Screen Height

Validating URLs in Flutter

FrameBuilder for Network Images in Flutter

Calculating Median of Lists in Dart

Generic Functions with Reduce in Dart

Passing Back Data From a Screen to the Previous One in Flutter

Flinging an Animation in Flutter

Throttling User Input in Flutter

Censoring TextFields in Flutter

Customizing TextButton in Flutter

Multiline TextFields in Flutter

Filtering TextField Input in Flutter

Focusing Manually on TextFields in Flutter

Data Streams Over HTTP/HTTPs in Dart

Catching Nonexistent Accessors or Methods in Dart

Using Expando in Dart

Implementing Custom Maps in Dart

Dynamically Calling Functions in Dart

Factory Constructors in Dart

Calculating the Sum of List Items in Dart

Removing Duplicate Strings in Lists in Dart (Case-Insensitive)

Implementing Range in Dart

Converting Lists to Maps in Dart

Implementing Hashable in Dart

Random Name Generator in Dart

Capturing Stack Traces in Dart Exceptions

Removing Duplicates from Lists in Dart

Calling Optional Functions in Dart

Odd-Even Sort in Dart

Implementing Zip and Tuples in Dart

Swapping Values in Lists with XOR in Dart

Waiting for Multiple Futures in Dart

Using Queues as Stacks in Dart

Custom Iterators in Dart

Iterables as Ranges and Transform in Dart

Errors vs Exceptions in Dart

Custom Annotations in Dart

Classes as Enums in Dart

Spread Operator in Collection Literals in Dart

`StreamBuilder` and `StreamController` in Dart

Almost Equal in Dart

Enum Associated Values in Dart

Implementing `Comparable` in Dart

Implementing Custom Integer Types in Dart

Custom Subscripts in Dart

Dart List Enumeration with Index

Applying Mixins to Other Mixins in Dart

Parameter Types in Dart

Custom Exceptions in Dart

`rethrow`ing Exceptions in Dart

`mixin`s and JSON Parsing in Dart

`mixin`s vs `abstract class`es in Dart

Drawing Shapes in Flutter with `LayoutBuilder`, `CustomPaint` and `CustomPainter`

Generic Type Aliases in Dart

Callable Classes in Dart

Synchronous Generators in Dart

Implicit Interfaces in Dart

Did you know that in #Dart, every #class implicitly exports an #interface that can be #implemented (as opposed to #extended) by other classes? This is called "implicit interface".

Do you know how "const" constructors work in #Dart?

Did you know that in #Dart, it is actually preferred to use #async and #await over using raw #Futures?

In #Dart, you can use a combination of #Initializer #List plus default values for your class #member #fields to create elegant and handy convenience initializers

Did you know that in #Dart, you can extract elements of a certain type from your Lists using the #whereType #generic #function instead of calculating the #equality yourselves?

Do you know about #Type #Promotion in Dart?

"address" is an optional field of the "Person" class. If you look at the "doThis()" function you see that I'm saving the value of address in a local variable and then comparing it with null and then returning if it's null. The Dart compiler is intelligent enough to understand that after the if-statement, "address" is NOT null anymore since you've already compared it with null and returned from the function.

If you look at the "insteadOfThis" function, the first one, the Dart compiler cannot make the same assumption if you don't first store the value of address in a local variable. In that first function the Dart compiler, even after the if-statement, needs you to refer to address as an optional, using "address?" syntax.

The mechanism the Dart compiler uses in the "doThis()" function is called Type Promotion.

4 lines of #Dart code that include the #spread operator, #cascade #operator, #generics, #extensions, #private prefix and #getters

Functions as First Class Citizens in Dart

#flutter #dart #programming #developer

1628993180

## Creating Discord Bots for Dart Language

### Features

• Commands framework included
A fast way to create a bot with command support. Implementing the framework is simple - and everything is done automatically.
• Cross Platform
Nyxx works on the command line, in the browser, and on mobile devices.
• Fine Control
Nyxx allows you to control every outgoing HTTP request or WebSocket message.
• Complete
Nyxx supports nearly all Discord API endpoints.

## Quick example

Basic usage:

``````void main() {
var bot = Nyxx("TOKEN");

if (event.message.content == "!ping") {
event.message.channel.send(content: "Pong!");
}
});
}
``````

Commands:

``````void main() {
final bot = Nyxx("TOKEN");

Commander(bot, prefix: "!!!")
..registerCommand("ping", (context, message) => context.reply(content: "Pong!"));
}
``````

## More examples

Nyxx examples can be found here.

Commander examples can be found here

## Documentation, help and examples

Dartdoc documentation is hosted on pub. This wiki just fills gap in docs with more descriptive guides and tutorials.

#### Discord API docs

Discord API documentation features rich descriptions about all topics that nyxx covers.

#### Discord API Guild

The unofficial guild for Discord Bot developers. To get help with nyxx check #dart_nyxx channel.

#### Dartdocs

The dartdocs page will always have the documentation for the latest release.

#### Dev docs

You can read about upcoming changes in the library on my website.

#### Wiki

Wiki documentation are designed to match the latest Nyxx release.

## Use this package as a library

### Depend on it

Run this command:

With Dart:

`` \$ dart pub add nyxx``

With Flutter:

`` \$ flutter pub add nyxx``

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

``````
dependencies:
nyxx: ^1.0.2
``````

### Import it

Now in your Dart code, you can use:

``import 'package:nyxx/nyxx.dart';``

1626983580

## 2021 Dart Programming Language Tutorial for Beginners #7 Functions

Welcome to my 2021 Dart programming language tutorial to beginners #7. In this series you will
be introduced to functions, named parameter, positional parameter, recursion, higher order function, nested function, function closure, function scope and learn how to use them in Dart.

Source Code: https://github.com/Rea2er/dart-tutorial

#dart programming language #dart programming #dart #tutorial

1626979920

## 2021 Dart Programming Language Tutorial for Beginners #6 Classes

Welcome to my 2021 Dart programming language tutorial to beginners #6. In this series you will
be introduced to classes, constructor, getter, setter, inheritance, singleton and learn how to use them in Dart.

Source Code: https://github.com/Rea2er/dart-tutorial

#dart programming language #dart programming #dart #tutorial

1626965402

## 2021 Dart Programming Language Tutorial for Beginners #3 Operators

Welcome to my Dart programming language tutorial#3. In this series you will
be introduced to operators and learn how to use them in Dart.

Source Code: https://github.com/Rea2er/dart-tutorial

#dart programming #dart #dart programming language