Range Header Parser for Dart

Angel3 Range Header

DEPRECATED: Replaced by belatuk_range_header package

Range header parser for Angel3. Can be used by any dart backend.

Installation

In your pubspec.yaml:

dependencies:
  angel3_range_header: ^3.0.0

Usage

handleRequest(HttpRequest request) async {
  // Parse the header
  var header = RangeHeader.parse(request.headers.value(HttpHeaders.rangeHeader));

  // Optimize/canonicalize it
  var items = RangeHeader.foldItems(header.items);
  header = RangeHeader(items);

  // Get info
  header.items;
  header.rangeUnit;
  print(header.items[0].toContentRange(fileSize));

  // Serve the file
  var transformer = RangeHeaderTransformer(header);
  await file.openRead().transform(transformer).pipe(request.response);
}

Use this package as a library

Depend on it

Run this command:

With Dart:

 $ dart pub add angel3_range_header

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  angel3_range_header: ^3.0.3

Alternatively, your editor might support dart pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:angel3_range_header/angel3_range_header.dart';

example/main.dart

import 'dart:io';
import 'package:angel3_range_header/angel3_range_header.dart';

var file = File('some_video.mp4');

void handleRequest(HttpRequest request) async {
  // Parse the header
  var header =
      RangeHeader.parse(request.headers.value(HttpHeaders.rangeHeader)!);

  // Optimize/canonicalize it
  var items = RangeHeader.foldItems(header.items);
  header = RangeHeader(items);

  // Get info
  header.items;
  header.rangeUnit;
  header.items.forEach((item) => item.toContentRange(400));

  // Serve the file
  var transformer =
      RangeHeaderTransformer(header, 'video/mp4', await file.length());
  await file
      .openRead()
      .cast<List<int>>()
      .transform(transformer)
      .pipe(request.response);
} 

Download Details:

Author: dukefirehawk

Source Code: https://github.com/dukefirehawk/angel/tree/angel3/packages/range_header

#dart 

What is GEEK

Buddha Community

A Collection of Flutter and Dart Tips and Tricks

Table of Contents

• 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
• Password Mask 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
• Breadcrumbs 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
• Loading Dialog in Flutter
• 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
• Generic Dialog in Flutter
• GitHub API in Flutter
• ChangeNotifier in Flutter
• Refresh Indicator in Flutter
• FlatMap in Dart
• OrientationBuilder in Flutter
• Linear Gradient in Flutter
• Bloc Text Editing Controller in Flutter
• Blurred TabBar in Flutter
• Play YouTube 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
• YouTube Ad Remover in Dart
• 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
• Images inside AlertDialog in Flutter
• Returning Values from AlertDialog 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
• Sweep Gradients 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
• Adding Shadow to Icons 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
• Fade Animations 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
• rethrowing Exceptions in Dart
• mixins and JSON Parsing in Dart
• mixins vs abstract classes 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 Futures 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 {
  Future<Uint8List> localFileData() => rootBundle.load(this).then(
        (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) {
      allData.add(
        NetworkAssetBundle(Uri.parse(url))
            .load(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 {
  Future<Uint8List> localFileData() => rootBundle.load(this).then(
        (byteData) => byteData.buffer.asUint8List(),
      );
}

CancelableOperation<Uint8List> getImageOperation(String url) =>
    CancelableOperation.fromFuture(
      NetworkAssetBundle(Uri.parse(url))
          .load(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 {
  Future<Uint8List> localFileData() => rootBundle.load(this).then(
        (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))
            .load(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
class LoginApi with FutureConvertible<bool> {
  @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 shouldLogin,
  required bool shouldSignUp,
}) {
  final group = FutureGroup<bool>();
  if (shouldLogin) {
    group.add(LoginApi().toFuture());
  }
  if (shouldSignUp) {
    group.add(SignUpApi().toFuture());
  }
  group.close();
  return group.future.then((bools) => bools.flatten());
}

void testIt() async {
  final success = await startup(
    shouldLogin: true,
    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';

  Future<bool> downloadAndSave() => NetworkAssetBundle(Uri.parse(url))
      .load(url)
      .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),
    ),
    (NetworkImageAsset asset) => asset.downloadAndSave(),
  );
}

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
  void addAll(Iterable<String> iterable) => _list.addAll(iterable);

  @override
  void add(String element) => _list.add(element);
}

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

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

Optional Chaining in Dart

@immutable
class Address {
  final String? firstLine;
  final String? secondLine;
  const Address(this.firstLine, this.secondLine);
}

@immutable
class Person {
  final Person? father;
  final Address? address;
  const Person(this.father, this.address);
}

extension GetFathersFirstAddressLine on Person {
  String? get firstAddressLineOfFather => father?.address?.firstLine;
}

MapList in Flutter

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

Future<bool> in Flutter

Future<bool> uploadImage({
  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>(
      create: (context) => AppBloc()..add(const AppEventInitialize()),
      child: MaterialApp(
        title: 'Photo Library',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        debugShowCheckedModeBanner: false,
        home: BlocConsumer<AppBloc, AppState>(
          listener: (context, state) {
            // handle loading
            if (state.isLoading) {
              LoadingScreen().show(
                context: context,
                text: 'Loading...',
              );
            } else {
              LoadingScreen().hide();
            }
            
            ... 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;
}

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

  @override
  Widget build(BuildContext context) {
    final emailController = useTextEditingController(
      text: 'foo@bar.com'.ifDebugging,
    );
    final passwordController = useTextEditingController(
      text: 'foobarbaz'.ifDebugging,
    );
    
    // rest of your code would be here ...

Keyboard Appearance in Flutter

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Log in'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: const [
            TextField(
              keyboardType: TextInputType.emailAddress,
              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()) {
    on<LoadNextUrlEvent>(
      (event, emit) {
        emit(
          const AppState(
            isLoading: true,
            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(
        title: const Text('Home Page'),
      ),
      body: persons.toListView(),
    );
  }
}

Password Mask in Flutter

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

  final TextEditingController passwordController;

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: passwordController,
      obscureText: true,
      obscuringCharacter: '◉',
      decoration: const InputDecoration(
        hintText: 'Enter your password here...',
      ),
    );
  }
}

Fast Object.toString() in Dart

@immutable
class AppState {
  final bool isLoading;
  final Object? loginError;
  final String? loginHandle;
  final Iterable<String>? fetchedNotes;

  @override
  String toString() => {
        'isLoading': isLoading,
        'loginError': loginError,
        'loginHandle': loginHandle,
        'fetchedNotes': fetchedNotes
      }.toString();

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

Copying Bloc State in Flutter

@immutable
class AppState {
  final bool isLoading;
  final LoginHandle? loginHandle;
  final Iterable<Note>? fetchedNotes;

  const AppState.empty()
      : isLoading = false,
        loginHandle = null,
        fetchedNotes = null;

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

  AppState copiedWith({
    bool? isLoading,
    LoginHandle? loginHandle,
    Iterable<Note>? fetchedNotes,
  }) =>
      AppState(
        isLoading: isLoading ?? this.isLoading,
        loginHandle: loginHandle ?? this.loginHandle,
        fetchedNotes: fetchedNotes ?? this.fetchedNotes,
      );
}

Iterable Subscripts in Dart

// Free Flutter Course 💙 https://linktr.ee/vandadnp
// Want to support my work 🤝? https://buymeacoffee.com/vandad

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(
            (tab) => Padding(
              padding: const EdgeInsets.all(8.0),
              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

class Address with IterableMixin {
  final String line1;
  final String line2;
  final String postCode;

  Address({
    required this.line1,
    required this.line2,
    required this.postCode,
  });

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

void testIt() {
  final address = Address(
    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

extension AddRemoveItems<T> on Iterable<T> {
  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: () {
      controller.sink.add(0.0);
    });

    return Scaffold(
      appBar: AppBar(
        title: const Text('Home page'),
      ),
      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: () {
                  controller.sink.add(rotation + 10.0);
                },
                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(
        title: const Text('Home Page'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Opacity(
          opacity: state == AppLifecycleState.resumed ? 1.0 : 0.0,
          child: Container(
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  blurRadius: 10,
                  color: Colors.black.withAlpha(100),
                  spreadRadius: 10,
                ),
              ],
            ),
            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;
        }

        controller.addListener(listener);
        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() {
  final rp = ReceivePort();
  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 loadingWidget;
  final Widget errorWidget;
  final String url;
  final Retrier retrier;

  final _controller = StreamController<Uint8List>.broadcast();

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

  void getData() async {
    while (true == true) {
      try {
        final networkAsset = NetworkAssetBundle(Uri.parse(url));
        final loaded = await networkAsset.load(url);
        final bytes = loaded.buffer.asUint8List();
        _controller.sink.add(bytes);
        break;
      } catch (e) {
        final strategy = retrier(url, e);
        if (strategy.shouldRetry) {
          await Future.delayed(strategy.waitBeforeRetry);
        } else {
          _controller.sink.addError(e);
          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 {
            return loadingWidget;
          }
        }
      },
    );
  }
}

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!'),
        loadingWidget: const Text('Loading...'),
        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(
        title: const Text('Home Page'),
      ),
      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) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      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) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 7.0),
      child: Container(
        decoration: customDecoration(),
        child: ListTile(
          leading: Icon(
            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),
    borderRadius: BorderRadius.circular(10.0),
    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: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 6.0),
        child: Container(
          decoration: BoxDecoration(
            color: const Color.fromARGB(255, 202, 255, 127),
            borderRadius: BorderRadius.circular(10.0),
            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(
      padding: const EdgeInsets.only(top: 80.0),
      child: Padding(
        padding: const EdgeInsets.only(
          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,
      shadowColor: Colors.white.withAlpha(200),
      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

class BreadCrumb {
  final bool isActive;
  final String name;
  BreadCrumb({
    required this.isActive,
    required this.name,
  });
  BreadCrumb activated() => BreadCrumb(
        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(
        title: const Text('Home Page'),
      ),
      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) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          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();
        }
      }),
    );
  }
}

Breadcrumbs in Flutter

@immutable
class BreadCrumbPath {
  final String title;
  final bool isActive;
  const BreadCrumbPath({
    required this.title,
    required this.isActive,
  });
  BreadCrumbPath activated() {
    return BreadCrumbPath(
      title: title,
      isActive: true,
    );
  }

  @override
  String toString() => title;
}

class BreatCrumbPathView extends StatelessWidget {
  final BreadCrumbPath path;

  const BreatCrumbPathView({
    Key? key,
    required this.path,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final title = path.isActive ? '${path.title} →' : path.title;
    return Padding(
      padding: const EdgeInsets.all(2.0),
      child: Text(
        title,
        style: TextStyle(
          height: 1.0,
          fontSize: 20.0,
          color: path.isActive ? Colors.blueAccent : Colors.black,
        ),
      ),
    );
  }
}

typedef OnBreadCrumbPathTapped = void Function(BreadCrumbPath path);

class BreadCrumbView extends StatelessWidget {
  final OnBreadCrumbPathTapped onTapped;
  final Stream<List<BreadCrumbPath>> paths;
  const BreadCrumbView({
    Key? key,
    required this.paths,
    required this.onTapped,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<BreadCrumbPath>>(
      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> {
  List<BreadCrumbPath> _paths = [];
  late final TextEditingController _textController;
  late final StreamController<List<BreadCrumbPath>> _pathsController;

  @override
  void initState() {
    _pathsController = StreamController<List<BreadCrumbPath>>.broadcast(
      onListen: () {
        _pathsController.add(_paths);
      },
    );
    _textController = TextEditingController();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Breadcrumb in Flutter'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            BreadCrumbView(
              paths: _pathsController.stream,
              onTapped: (path) async {
                await showBreadCrumbPathTappedDialog(
                  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()),
                  BreadCrumbPath(
                    title: _textController.text,
                    isActive: false,
                  ),
                ];
                _pathsController.add(_paths);
                _textController.clear();
              },
              child: const Center(
                child: Text('Add new path'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Future<void> showBreadCrumbPathTappedDialog(
  BuildContext context,
  BreadCrumbPath path,
) {
  return showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        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'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(16.0),
        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'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        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,
          );
        },
        loadingBuilder: (context, child, loadingProgress) {
          final totalBytes = loadingProgress?.expectedTotalBytes;
          final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
          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) {
      req.add(utf8.encode('url=$longUrl'));
      return req.close();
    }).then(
      (resp) async {
        try {
          final location = resp.headers[HttpHeaders.locationHeader]?.first;
          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(
      'https://github.com/vandadnp/flutter-tips-and-tricks');
  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(
            padding: const EdgeInsets.all(0.0),
            itemCount: options.length,
            itemBuilder: (context, index) {
              final option = options.elementAt(index);
              return GestureDetector(
                onTap: () => onSelected(controller.text + option),
                child: ListTile(
                  horizontalTitleGap: 2.0,
                  leading: Image.network(
                    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'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(16.0),
        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;
}

Future<Iterable<Person>> downloadAndParsePersons(Uri uri) => HttpClient()
    .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(
    downloadAndParsePersons,
    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.pleaseEnterYourEmail:
        return 'Please enter your email';
      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() {
    _hint = ValueNotifier<String?>(Hint.pleaseEnterYourEmail.text);
    _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'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            DynamicToolTipTextField(
              hint: _hint,
              controller: _controller,
              keyboardType: TextInputType.emailAddress,
            ),
            TextButton(
              onPressed: () async {
                final email = _controller.text;
                if (email.trim().isEmpty) {
                  _hint.value = Hint.youForgotToEnterYourEmail.text;
                  await Future.delayed(const Duration(seconds: 2));
                  _hint.value = Hint.pleaseEnterYourEmail.text;
                }
              },
              child: const Text('Log in'),
            )
          ],
        ),
      ),
    );
  }
}

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;
  final defaultHintText = 'Please enter your email here 😊';
  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,
        )..addStatusListener(
        (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'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            AnimatedBuilder(
              animation: _offsetAnim,
              builder: (context, child) {
                return Container(
                  margin: const EdgeInsets.symmetric(
                    horizontal: animationWidth,
                  ),
                  padding: EdgeInsets.only(
                    left: _offsetAnim.value + animationWidth,
                    right: animationWidth - _offsetAnim.value,
                  ),
                  child: TextField(
                    controller: _textController,
                    keyboardType: TextInputType.emailAddress,
                    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;
                    });
                  }
                },
                child: const Text('Login'))
          ],
        ),
      ),
    );
  }
}

Throw Enums in Dart

import 'dart:developer' as dev show log;

enum Exceptions { invalidUserName, invalidPassword }

void thisMethodThrows() {
  throw Exceptions.invalidPassword;
}

void testIt() {
  try {
    thisMethodThrows();
  } on Exceptions catch (e) {
    switch (e) {
      case (Exceptions.invalidUserName):
        dev.log("Invalid user name");
        break;
      case (Exceptions.invalidPassword):
        dev.log("Invalid password");
        break;
    }
  }
}

Future Error Test in Flutter

import 'dart:developer' as dev show log;

@immutable
abstract class UserException implements Exception {}

class InvalidUserNameException extends UserException {}

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 ]+$'))) {
      throw InvalidUserNameException();
    } 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(
        handleInvalidUsernameException,
        test: (e) => e is InvalidUserNameException,
      )
      .catchError(
        handleInvalidAgeException,
        test: (e) => e is InvalidUserAgeException,
      );
  dev.log(user.toString());
}

User handleInvalidUsernameException(Object? e) {
  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: Padding(
          padding: const EdgeInsets.all(16.0),
          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);
    result.add(value);
  }
  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) {
      req.headers.add('email', email);
      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(
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    );
    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());
  }
}

Loading Dialog in Flutter

typedef CloseDialog = void Function();

CloseDialog showLoadingScreen({
  required BuildContext context,
  required String text,
}) {
  final dialog = AlertDialog(
    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 {
  final closeDialog = showLoadingScreen(
    context: context,
    text: 'Loading data...',
  );
  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',
};

void insteadOfThis() {
  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

typedef GradientContainersBuilder = Map<LinearGradient, Widget?> Function();

class GradientContainers extends StatelessWidget {
  final GradientContainersBuilder builder;

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

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

class GradientContainer extends StatelessWidget {
  final LinearGradient gradient;
  final Widget? child;

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GradientContainers(
        builder: () => {
          topLeftToBottomRightGradient: null,
          rightToLeftGradient: null,
          leftToRightGradinet: null,
          bottomRightGradient: Image.network('https://bit.ly/3otHHog'),
        },
      ),
    );
  }
}

const transparent = Color(0x00FFFFFF);

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

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

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

const leftToRightGradinet = LinearGradient(
  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);
}

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

void readOddNumbers() async {
  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;
  }
}

Generic Dialog in Flutter

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) {
      return AlertDialog(
        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 'dart:io' show HttpHeaders, HttpClient;
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) {
          req.headers
            ..set(HttpHeaders.authorizationHeader, 'Bearer $accessToken')
            ..set(HttpHeaders.contentTypeHeader, 'application/json');
          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 username;
  final String avatarUrl;

  GithubUser.fromJson(Map<String, dynamic> json)
      : username = json['login'] as String,
        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(
                    title: Text(user.username),
                    leading: CircularAvatar(url: user.avatarUrl),
                  );
                },
              );
            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 = [];

  var _isLoading = false;
  bool get isLoading => _isLoading;

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

  void loadNextImage() async {
    if (_items.length < allImages.length) {
      // time to load more
      _isLoading = true;
      notifyListeners();
      final imageUrl = allImages[_items.length];
      final networkAsset = NetworkAssetBundle(Uri.parse(imageUrl));
      final loaded = await networkAsset.load(imageUrl);
      final bytes = loaded.buffer.asUint8List();
      final imageData = ImageData(bytes);
      _items.insert(0, imageData);
      _isLoading = false;
      notifyListeners();
    } else {
      if (isLoading) {
        _isLoading = false;
        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: () {
                  value.loadNextImage();
                },
                icon: const Icon(Icons.add_box_outlined),
              );
            },
          )
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Consumer<Images>(
          builder: (context, value, child) {
            final images = value.items;
            final isLoading = value.isLoading;
            return ListView.builder(
              itemBuilder: (context, index) {
                if (index == 0 && isLoading) {
                  return Center(
                    child: Column(
                      children: const [
                        CircularProgressIndicator(),
                        SizedBox(height: 16.0),
                      ],
                    ),
                  );
                } else {
                  final imageIndex = isLoading ? index - 1 : index;
                  final imageData = images[imageIndex].imageData;
                  return Column(
                    children: [
                      RoundedImageWithShadow(imageData: imageData),
                      const SizedBox(height: 16.0),
                    ],
                  );
                }
              },
              itemCount: isLoading ? images.length + 1 : images.length,
            );
          },
        ),
      ),
    );
  }
}

class RoundedImageWithShadow extends StatelessWidget {
  final Uint8List imageData;
  const RoundedImageWithShadow({Key? key, required this.imageData})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            blurRadius: 2,
            color: Colors.black.withAlpha(40),
            spreadRadius: 2,
          ),
        ],
      ),
      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(),
          padding: const EdgeInsets.all(16),
          itemCount: _images.length,
          itemBuilder: (context, index) {
            final imageUrl = _images[index];
            return Column(
              children: [
                RoundedImageWithShadow(url: imageUrl),
                const SizedBox(height: 16),
              ],
            );
          },
        ),
      ),
    );
  }
}

class RoundedImageWithShadow extends StatelessWidget {
  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(
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            blurRadius: 2,
            color: Colors.black.withAlpha(40),
            spreadRadius: 2,
          ),
        ],
      ),
      child: Image.network(url),
    );
  }
}

FlatMap in Dart

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

AuthUser? get insteadOfThis {
  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';

class RoundedImageWithShadow extends StatelessWidget {
  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(
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            blurRadius: 2,
            color: Colors.black.withAlpha(40),
            spreadRadius: 2,
          ),
        ],
      ),
      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(
              padding: const EdgeInsets.all(8.0),
              crossAxisCount: count,
              mainAxisSpacing: 8.0,
              crossAxisSpacing: 8.0,
              children: images
                  .map((url) => RoundedImageWithShadow(url: url))
                  .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',
];

Linear Gradient in Flutter

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'),
      ),
      body: const ImageWithShadow(url: 'https://bit.ly/3otHHog'),
    );
  }
}

class ImageWithShadow extends StatelessWidget {
  final String url;

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Stack(
        children: [
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    blurRadius: 10.0,
                    color: Colors.black.withOpacity(0.5),
                    offset: const Offset(0.0, 3.0),
                  )
                ],
                borderRadius: const BorderRadius.all(Radius.circular(20)),
                gradient: const LinearGradient(
                  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() {
    addListener(() {
      if (text.isEmpty) {
        bloc?.add(ClearSearch());
      } else {
        bloc?.add(SearchEvent(text));
      }
    });
  }
}

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'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        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: Padding(
                padding: const EdgeInsets.only(bottom: 15),
                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
                },
              )
            ],
          )
        ],
      ),
    );
  }
}

Play YouTube in Flutter

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,
            initialUrl: 'https://www.youtube.com/embed/$videoId',
            javascriptMode: JavascriptMode.unrestricted,
          ),
        ),
      ),
    );
  }
}

class YouTubeVideoThumbnail extends StatelessWidget {
  final String videoId;
  final String thumbnailUrl;

  const YouTubeVideoThumbnail({Key? key, required this.videoId})
      : thumbnailUrl = 'https://img.youtube.com/vi/$videoId/maxresdefault.jpg',
        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(
          boxShadow: [
            BoxShadow(
              blurRadius: 10.0,
              color: Colors.black.withAlpha(50),
              spreadRadius: 10.0,
            ),
          ],
          borderRadius: BorderRadius.circular(20),
          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];
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: YouTubeVideoThumbnail(videoId: videoId),
          );
        },
      ),
    );
  }
}

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(
        borderRadius: BorderRadius.circular(20),
        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(
          padding: EdgeInsets.zero,
          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 = ',',
  }) =>
      toRadixString(2)
          .padLeft(len, '0')
          .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 src = padLeft(expectedLength, filler);
    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 src = padLeft(expectedLength, filler);
    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'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Container(
              height: 250.0,
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                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,
        ),
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(10),
          bottomRight: Radius.circular(10),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.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(
      headerBuilder: (context, isExpanded) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          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: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              details,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20, color: Colors.white, shadows: [
                Shadow(
                  blurRadius: 1.0,
                  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 {
  final _controller = StreamController<List<Person>>.broadcast();
  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();
      _controller.add(_persons);
      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
      final readResult = await db.query(
        '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);
        _controller.add(_persons);
        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);
      _persons.add(person);
      _controller.add(_persons);

      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);
        _persons.add(person);
        _controller.add(_persons);
        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) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      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(
            'Add to list',
            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) {
      return AlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Enter your udpated values here:'),
            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) {
      return AlertDialog(
        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) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      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(
            'Add to list',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ]),
    );
  }
}

class _HomePageState extends State<HomePage> {
  late final Database db;
  bool hasSetUpAlready = false;

  Future<bool> setupDatabase() async {
    if (hasSetUpAlready == false) {
      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);
        hasSetUpAlready = true;
        return true;
      } catch (e) {
        print('error = $e');
        hasSetUpAlready = false;
        return false;
      }
    } else {
      return true;
    }
  }

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

    try {
      // read the existing data if any
      final readResult = await db.query(
        '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 {
                      await addPerson(firstName, lastName);
                      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,
      loadingBuilder: (context, child, loadingProgress) {
        final totalBytes = loadingProgress?.expectedTotalBytes;
        final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
        if (totalBytes != null && bytesLoaded != null) {
          return SizedCircularProgressIndicator(
            height: 100,
            width: 100,
            progress: bytesLoaded / totalBytes,
          );
        } 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,
  });

  Person.vandad()
      : profileUrl = 'https://bit.ly/3jwusS0',
        name = 'Vandad Nahavandipoor',
        email = 'vandad.np@gmail.com',
        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],
          borderRadius: BorderRadius.circular(16.0),
          border: Border.all(color: Colors.white, width: 3.0),
          boxShadow: [
            BoxShadow(
              blurRadius: 30.0,
              color: Colors.black.withAlpha(50),
              spreadRadius: 20.0,
            ),
          ]),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircleAvatar(
              radius: 100.0,
              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(
            person: Person.vandad(),
          ),
        ),
      ),
    );
  }
}

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 {
  final bool isBlinking;
  BoxPainter({required this.isBlinking});

  @override
  void paint(Canvas canvas, Size size) {
    if (isBlinking) {
      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;
}

class ReadyPainter 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: 'READY',
      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 {
  final bool isBlinking;

  late final List<CustomPainter> painters;

  Commodore64Painter({required this.isBlinking}) {
    painters = [
      BorderPainter(),
      BackgroundPainter(),
      TitlePainter(),
      SubTitlePainter(),
      ReadyPainter(),
      BoxPainter(isBlinking: isBlinking)
    ];
  }

  @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> {
  bool _isBlinking = false;

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

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

  @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(
          painter: Commodore64Painter(isBlinking: _isBlinking),
        ),
      );
    });
  }
}

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,
      loadingBuilder: (context, child, loadingProgress) {
        final totalBytes = loadingProgress?.expectedTotalBytes;
        final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
        if (totalBytes != null && bytesLoaded != null) {
          return LinearProgressIndicator(
            value: bytesLoaded / totalBytes,
          );
        } 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(
          borderRadius: BorderRadius.circular(20.0),
        ),
        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'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        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) {
                _enabledItems.add(item);
              } else {
                _enabledItems.remove(item);
              }
            });
          },
        );
      },
      itemCount: Item.values.length,
    );
  }

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

  Widget get readyButton {
    final onPressed = () async {
      // program this
      await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            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,
        child: Text('Ready!'),
      ),
    );
  }

  @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),
            readyButton,
          ],
        ),
      ),
    );
  }
}

- 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 loadingSequence = ['⢿', '⣻', '⣽', '⣾', '⣷', '⣯', '⣟', '⡿'];
const escape = '\x1B[38;5;';
const color = '${escape}1m';
const textColor = '${escape}6m';

String progress({required int value, required String text}) {
  final progress = '$color${loadingSequence[value % loadingSequence.length]}';
  final coloredText = '$textColor$text';
  return '$progress\t$coloredText';
}

Future<T> performWithProgress<T>({
  required Future<T> task,
  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');
    },
  );

  task.whenComplete(() {
    stdout.write('\r ✅\t$progressText');
    stdout.write('\n');
    subscription.cancel();
  });

  return task;
}

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(
    task: task1,
    progressText: 'Loading task 1',
  );
  print('\tTask 1 result: $result');
  result = await performWithProgress(
    task: task2,
    progressText: 'Loading task 2',
  );
  print('\tTask 2 result: $result');
  result = await performWithProgress(
    task: task3,
    progressText: 'Loading task 3',
  );
  print('\tTask 3 result: $result');
}

Move Widget Shadows with Animation

import 'package:flutter/material.dart';

class ImageTransition extends AnimatedWidget {
  final String imageUrl;

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

  const ImageTransition(this.imageUrl, {shadowXOffset})
      : super(listenable: shadowXOffset);

  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        boxShadow: [
          BoxShadow(
            blurRadius: 10,
            offset: Offset(shadowXOffset.value, 20.0),
            color: Colors.black.withAlpha(100),
            spreadRadius: -10,
          )
        ],
      ),
      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(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: ImageTransition(
            'https://bit.ly/3x7J5Qt',
            shadowXOffset: _animation,
          ),
        ),
      ),
    );
  }
}

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(
        child: Padding(
          padding: const EdgeInsets.only(
            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,
      shadowColor: Colors.white.withAlpha(200),
      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(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(
            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();
        return FadeTransition(
          opacity: _animation,
          child: CustomBox(
            child: child,
          ),
        );
      },
      loadingBuilder: (context, child, loadingProgress) {
        final totalBytes = loadingProgress?.expectedTotalBytes;
        final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
        if (totalBytes != null && bytesLoaded != null) {
          return CustomBox(
            child: CircularProgressIndicator(
              backgroundColor: Colors.white70,
              value: bytesLoaded / totalBytes,
              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(
      borderRadius: BorderRadius.all(Radius.circular(8.0)),
      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: Padding(
        padding: const EdgeInsets.all(8.0),
        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();
        return FadeTransition(
          opacity: _animation,
          child: CustomBox(
            child: child,
          ),
        );
      },
      loadingBuilder: (context, child, loadingProgress) {
        final totalBytes = loadingProgress?.expectedTotalBytes;
        final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
        if (totalBytes != null && bytesLoaded != null) {
          return CustomBox(
            child: CircularProgressIndicator(
              backgroundColor: Colors.white70,
              value: bytesLoaded / totalBytes,
              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()
            .headUrl(Uri.parse(url))
            .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 [
      Padding(
        padding: const EdgeInsets.all(8.0),
        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();
        return FadeTransition(
          opacity: _animation,
          child: CustomBox(
            child: child,
          ),
        );
      },
      loadingBuilder: (context, child, loadingProgress) {
        final totalBytes = loadingProgress?.expectedTotalBytes;
        final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
        if (totalBytes != null && bytesLoaded != null) {
          return CustomBox(
            child: CircularProgressIndicator(
              backgroundColor: Colors.white70,
              value: bytesLoaded / totalBytes,
              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();
        return FadeTransition(
          opacity: _animation,
          child: CustomBox(
            child: child,
          ),
        );
      },
      loadingBuilder: (context, child, loadingProgress) {
        final totalBytes = loadingProgress?.expectedTotalBytes;
        final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
        if (totalBytes != null && bytesLoaded != null) {
          return CustomBox(
            child: CircularProgressIndicator(
              backgroundColor: Colors.white70,
              value: bytesLoaded / totalBytes,
              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';

class FadingNetworkImage extends StatefulWidget {
  final String url;

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

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

class _FadingNetworkImageState extends State<FadingNetworkImage>
    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();
        return FadeTransition(
          opacity: _animation,
          child: child,
        );
      },
      loadingBuilder: (context, child, loadingProgress) {
        final totalBytes = loadingProgress?.expectedTotalBytes;
        final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
        if (totalBytes != null && bytesLoaded != null) {
          return LinearProgressIndicator(
            value: bytesLoaded / totalBytes,
          );
        } 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(
          borderRadius: BorderRadius.circular(20.0),
          boxShadow: [
            BoxShadow(
              blurRadius: 5,
              offset: Offset(0, 0),
              color: Colors.black.withAlpha(40),
              spreadRadius: 5,
            )
          ],
        ),
        child: FadingNetworkImage(
          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? userName;
  final String message;
  final String? iconEmoji;

  const SlackMessage({
    required this.inChannel,
    required this.userName,
    required this.message,
    required this.iconEmoji,
  });

  Future<bool> send(String webhookUrl) async {
    final payload = {
      'text': message,
      if (inChannel != null) 'channel': inChannel!,
      if (userName != null) 'username': userName!,
      if (iconEmoji != null) 'icon_emoji': iconEmoji!
    };

    final request = await HttpClient().postUrl(Uri.parse(webhookUrl));
    final payloadData = utf8.encode(json.encode(payload));
    request.add(payloadData);
    final response = await request.close();
    return response.statusCode == 200;
  }
}

const webhookUrl = 'put your webhook url here';

void testIt() async {
  final message = SlackMessage(
    inChannel: 'dart',
    userName: 'Flutter',
    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()
    .headUrl(Uri.parse(url))
    .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,
          loadingBuilder: (context, child, loadingProgress) {
            final widget =
                loadingProgress == null ? child : LinearProgressIndicator();
            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(
      title: Text('Choose your favorite season:'),
      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;
      return sublist(cutOff)..addAll(sublist(0, cutOff));
    }
  }

  List<T> rotatedLeft(int places) {
    final times = _rotationTimes(places);
    if (times == 0) {
      return this;
    } else {
      return sublist(times)..addAll(sublist(0, times));
    }
  }
}

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(
                  borderRadius: BorderRadius.circular(10),
                  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) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      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,
            borderRadius: BorderRadius.circular(10.0),
            borderWidth: 4.0,
            borderColor: Colors.blue[400],
            selectedBorderColor: Colors.blue,
            highlightColor: Colors.blue.withOpacity(0.2),
            children: [
              TabBarButton(icon: Icons.settings),
              TabBarButton(icon: Icons.add),
              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 =
    'https://raw.githubusercontent.com/vandadnp/flutter-tips-and-tricks/main/';

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 {
  Person clone([Map<String, Object>? additionalProps]) =>
      Person.from(Map.from(_values)..addAll(additionalProps ?? {}));
}

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> {
  void addAllByAvoidingDuplicates(Iterable<T> values) =>
      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);

  values.addAllByAvoidingDuplicates([3, 2, 10, 200]);
  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),
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10),
        topRight: Radius.circular(10),
      ),
      color: Colors.white70,
    );

YouTube Ad Remover in Dart

import 'dart:io' show stdout, stderr, exitCode;
import 'package:collection/collection.dart' show IterableExtension;

// example argument: https://www.youtube.com/watch?v=mtETXtSP0pA
void main(List<String> args) async {
  if (args.isEmpty) {
    stdout.writeln('usage: dart youtube.dart "https://..."');
    return;
  }

  final link =
      args.firstWhereOrNull((element) => Uri.tryParse(element) != null);

  if (link == null) {
    stderr.writeln('No YouTube url found');
    exitCode = 1;
    return;
  }

  try {
    final uri = Uri.parse(link);
    if (uri.scheme.toLowerCase() != 'https' ||
        uri.host.toLowerCase() != 'www.youtube.com' ||
        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;
  }
}

Fade Between Widgets in Flutter

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(
        title: Text('AnimatedCrossFade in Flutter'),
      ),
      body: Center(
        child: AnimatedCrossFade(
          layoutBuilder: (topChild, topChildKey, bottomChild, bottomChildKey) {
            return GestureDetector(
              onTap: () {
                setState(() {
                  isShowingFirstImage = !isShowingFirstImage;
                });
              },
              child: AnimatedCrossFade.defaultLayoutBuilder(
                  topChild, topChildKey, bottomChild, bottomChildKey),
            );
          },
          firstChild: Image.network(urls[0]),
          secondChild: Image.network(urls[1]),
          crossFadeState: isShowingFirstImage
              ? CrossFadeState.showFirst
              : CrossFadeState.showSecond,
          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(
            Padding(
              padding: const EdgeInsets.all(8.0),
              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,
  'address': {
    '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);
  assert(person.valueFor(keyPath: 'address.street.name') == 'Baz street');
  assert(person.valueFor(keyPath: 'address.houseNumber') == '#20');
}

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),
          Padding(
            padding: const EdgeInsets.all(8.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(
                  radius: 100,
                  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) {
              return FadeTransition(opacity: animation, child: child);
            },
            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),
        ),
      ],
    );
  }
}

Doubly Linked Lists in Dart

class Person extends LinkedListEntry<Person> {
  final String name;
  final int age;
  Person({
    required this.name,
    required this.age,
  });

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

void testIt() {
  final persons = LinkedList<Person>();
  final dad = Person(name: 'Father Foo', age: 47);
  final mom = Person(name: 'Mother Bar', age: 47);
  final daughter = Person(name: 'Daughter Baz', age: 22);
  persons.addAll([dad, mom, daughter]);

  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: Padding(
            padding: const EdgeInsets.all(20),
            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) {
    final upTo = DateTime.now().add(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) {

      req.headers
        ..set(HttpHeaders.contentTypeHeader, 'application/json')
        ..set(HttpHeaders.authorizationHeader, 'Bearer $bitlyToken');

      final body = {
        'long_url': uri.toString(),
        'domain': 'bit.ly',
      };
      final bodyBytes = utf8.encode(json.encode(body));
      req.add(bodyBytes);

      return req.close();
    },
  );

  final responseBody = await response.transform(utf8.decoder).join();
  final responseJson = json.decode(responseBody) as Map<String, dynamic>;
  return Uri.parse(responseJson['link']);
}

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 {
    await client.headUrl(uri).then((r) => r.close());
    return true;
  } on HandshakeException {
    return false;
  }
}

void testIt() async {
  await isSecuredWithValidCert('https://expired.badssl.com');
  await isSecuredWithValidCert('https://wrong.host.badssl.com');
  await isSecuredWithValidCert('https://self-signed.badssl.com');
  await isSecuredWithValidCert('https://untrusted-root.badssl.com');
  await isSecuredWithValidCert('https://revoked.badssl.com');
}

Displaying Popup Menus in Flutter

enum ImageAction { copy }

PopupMenuItem<ImageAction> copyButton({VoidCallback? onPressed}) =>
    PopupMenuItem<ImageAction>(
      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(
        child: PopupMenuButton<ImageAction>(
          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')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        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(
          boxShadow: [
            BoxShadow(
              blurRadius: 30,
              color: Colors.black,
              spreadRadius: 10,
            ),
          ],
        ),
        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) {
    return SliverPadding(
      padding: EdgeInsets.all(8.0),
      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: Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                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) {
    return SliverPadding(
      padding: EdgeInsets.all(8.0),
      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'],
  ['https://bit.ly/3hGmjZC', 'Salvador da Bahia, Brazil']
];

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) {
          return Padding(
            padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
            child: Tooltip(
              decoration: BoxDecoration(
                color: Colors.black,
                boxShadow: [
                  BoxShadow(
                    color: Colors.white.withAlpha(180),
                    offset: Offset.zero,
                    spreadRadius: 30.0,
                    blurRadius: 30.0,
                  ),
                ],
                borderRadius: BorderRadius.all(Radius.circular(8.0)),
              ),
              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 {
  Widget toPaddedNetworkImage() => Padding(
        padding: const EdgeInsets.all(8.0),
        child: Image.network(this),
      );
}

extension ToImages on List<String> {
  List<Widget> toPaddedNetworkImages() =>
      map((str) => str.toPaddedNetworkImage()).toList();
}

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) {
      final networkImages = urlBatch.toPaddedNetworkImages();
      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',
      style: TextStyle(fontSize: 30.0, shadows: [
        Shadow(
          offset: Offset(0.0, 1.0),
          blurRadius: 20.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);
        },
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.yellow[600],
        selectedItemColor: Colors.black,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.bedtime),
            label: 'Item 1',
          ),
          BottomNavigationBarItem(
            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
  _FadingNetworkImageState createState() => _FadingNetworkImageState();
}

class _FadingNetworkImageState extends State<FadingNetworkImage>
    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();
        return FadeTransition(opacity: _animation, child: child);
      },
      loadingBuilder: (context, child, loadingProgress) {
        final totalBytes = loadingProgress?.expectedTotalBytes;
        final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
        if (totalBytes != null && bytesLoaded != null) {
          return LinearProgressIndicator(
            value: bytesLoaded / totalBytes,
          );
        } 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(
        title: Text('Faded Image'),
      ),
      body: Center(
          child: Column(
        children: [
          FadingNetworkImage(
            url: dashes.elementByGoingAround(_index),
          ),
          TextButton(
            onPressed: () {
              setState(() => _index += 1);
            },
            child: Text('Load next Dash'),
          ),
        ],
      )),
    );
  }
}

Transparent Alert Dialogs in Flutter

TextStyle get whiteTextStyle => TextStyle(color: Colors.white);

Future<void> showTextDialog({
  required BuildContext context,
  required String text,
}) {
  return showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ),
          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,
      )
      .addListener(
        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) {
    return SliverPadding(
      padding: EdgeInsets.all(8.0),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            return Padding(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: Image.network(gridImages[index]),
            );
          },
          childCount: gridImages.length,
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SliverPadding(
      padding: EdgeInsets.all(8.0),
      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

Images inside AlertDialog in Flutter

Returning Values from AlertDialog 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

Sweep Gradients 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

Adding Shadow to Icons 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

Fade Animations 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 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

rethrowing Exceptions in Dart

mixins and JSON Parsing in Dart

mixins vs abstract classes 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

Download Details: 
Author: vandadnp
Source Code: https://github.com/vandadnp/flutter-tips-and-tricks

#flutter #dart #programming #developer 

Build a Single Page App with Laravel 9, Jetstream, Vuejs, Inertiajs, MySQL, Tailwind CSS and Docker

In this tutorial, you will learn how to build a single page application. I'll take you through the process step by step, using cutting edge technologies like Laravel 9, Jetstream, Vuejs, Inertiajs, MySQL, Tailwind CSS, and Docker.

Let's get started.

What you need to follow this guide:

To follow along you will need:

• a computer
• to know how to install software
• a basic understanding of HTML, CSS, JavaScript, and PHP
• knowledge of at least one JavaScript framework and an understanding of the MVC design pattern.

This guide is organized into 10 chapters and is based off a live coding series that I record. The live coding series is completely unscripted, so there will be bugs and gotchas there that you won't find in this guide.

You can find the complete playlist at the end of this article.

Everything here should just work, but if it doesn't feel free to ask for help by joining my community on Slack. There you can share code snippets and chat with me directly.

Table of Contents

• What Tech Are We Using?
• How to Setup Your Machine
• How to build the app with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3
• How to Refactor the Admin Dashboard and Create New Admin Pages
• How to Submit Forms with Files
• How to Add the Form to the Component
• How to Store Data
• How to Update Operations
• How to Delete a Resourse
• Wrap up and what's next
• Conclusion

Original article source at https://www.freecodecamp.org

What Tech Are We Using?

First, let's go over the different tools we'll be using in this project.

Docker

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.

To simplify this concept, Docker lets you package applications and dependencies in a container.

A containerized application allows you to have a flexible development environment so that you can run different applications without worrying about dependencies, their requirements, and conflicts between different versions. You can easily run applications that, for instance, require two different versions of PHP and MySQL.

Each team member can quickly reproduce the same environment of your application by simply running the same container's configuration.

If you want to learn more about Docker, its Documentation is a great place to start.

Here's a Handbook on Docker essentials, as well, so you can practice your skills.

Mysql

MySQL is an open-source relational database management system. You can use it to organize data into one or more tables with data that may be related to each other.

We need to store data somewhere and here is where MySQL comes into play.

Here are the Docs if you want to read up more. Here's a full free course on MySQL if you want to dive deeper.

Laravel

Laravel is a free, open-source PHP web framework that helps you develop web applications following the model–view–controller architectural pattern.

Laravel is an amazing PHP framework that you can use to create bespoke web applications.

Here's the Laravel Documentation for more info, and here's a full project-based course to help you learn Laravel.

Laravel Sail

Laravel Sail is a lightweight command-line interface for interacting with Laravel's default Docker development environment.

Sail provides a great starting point for building a Laravel application using PHP, MySQL, and Redis without requiring prior Docker experience.

Usually, creating a development environment to build such applications means you have to install software, languages, and frameworks on your local machine – and that is time-consuming. Thanks to Docker and Laravel Sail we will be up and running in no time!

Laravel Sail is supported on macOS, Linux, and Windows via WSL2.

Here's the Documentation if you want to read up on it.

Laravel Jetstream

When building web applications, you likely want to let users register and log in to use your app. That is why we will use Jetstream.

Laravel Jetstream is a beautifully designed application starter kit for Laravel and provides the perfect starting point for your next Laravel application.

It uses Laravel Fortify to implement all the back end authentication logic.
Here are the Docs.

Vuejs

Vue.js is an open-source model–view–ViewModel front end JavaScript framework for building user interfaces and single-page applications.

Vue is a fantastic framework that you can use as a stand-alone to build single-page applications, but you can also use it with Laravel to build something amazing.

Here's the Vue Documentation if you want to read up. And here's a great Vue course to get you started.

Inertia JS

Inertia is the glue between Laravel and Vuejs that we will use to build modern single-page applications using classic server-side routing.

You can learn more about it in the Documentation here.

Tailwind

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that you can use to build any design, directly in your markup

We'll use it in this project to build our design. Here's a quick guide to get you up and running if you aren't familiar with Tailwind.

How to Set Up Your Machine

To follow along with my live coding (and this tutorial), you will need to install Docker desktop on your machine. If you are using Windows, you will also need to enable WSL in your system settings.

Visit the Docker getting started page to install Docker Desktop.

If you are on Windows, enable WSL2 by following the steps here.

If you have any trouble, feel free to reach out or join my community on Slack to get help.

Laravel Installation with Sail

If you have successfully installed Docker Desktop on your machine, we can open the terminal and install Laravel 9.

Open a terminal window and browse to a folder where you want to keep your project. Then run the command below to download the latest Laravel files. The command will put all files inside a folder called my-example-app, which you can tweak as you like.

# Download laravel
curl -s "https://laravel.build/my-example-app" | bash
# Enter the laravel folder
cd my-example-app

Deploy Laravel on Docker using the sail up command

With Docker Desktop up and running, the next step is to start Laravel sail to build all the containers required to run our application locally.

Run the following command from the folder where all Laravel files have been downloaded:

vendor/bin/sail up

It will take a minute. Then visit http://localhost and you should see your Laravel application.

If you run sail up and you get the following error, it is likely that you need to update Docker Desktop:

ERROR: Service 'laravel.test' failed to build:

How to Build the App with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3

In this section, we will define a basic roadmap, install Laravel 9 with Laravel Sail, Run sail, and build the containers.

I will also take you on a tour of Laravel Sail and the sail commands.

Then we will install Jetstream and scaffold Vue and Inertia files and have a look at the files and available features.

Next, we will populate our database and add the front end provided by Jetstream to register an account and log into a fresh Laravel application.

Finally, we will have a look at the Jetstream dashboard, and the Inertia/Vue Components and then start playing around.

Along the way, we'll disable the registration, enable the Jetstream user profile picture feature, and then add our first Inertia page where we'll render some data taken from the database.

Here's the live coding video if you want to follow along that way:

 

And if you prefer following along in this written tutorial, here are all the steps.

Just a reminder – you should have Laravel installed with Sail and have Docker set up on your machine. You can follow the steps above to do so if you haven't already.

Laravel Sail Overview – Sail Commands

With Laravel Sail installed, our usual Laravel commands have sligtly changed.

For instance, instead of running the Laravel artisan command using PHP like php artisan, we now have to use Sail, like so: sail artisan.

The sail artisan command will return a list of all available Laravel commands.

Usually, when we work with Laravel, we also have to run the npm and composer commands.

Again, we need to prefix our commands with sail to make them run inside the container.

Below you'll find a list of some commands you will likely have to run:

# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require <packageName> # it was: composer require <packageName>
# Use npm commands
sail npm run dev # it was: npm run dev

You can read more in the Sail documentation.

Install Jetstream and Scaffold Vue and Inertia

Let's now install the Laravel Jetstream authentication package and use the Inertia scaffolding with Vue3.

cd my-example-app
sail composer require laravel/jetstream 

Remember to prefix the composer command with sail.

The command above has added a new command to Laravel. Now we need to run it to install all the Jetstream components:

sail artisan jetstream:install inertia

Next we need to compile all static assets with npm:

sail npm install
sail npm run dev

Before we can actually see our application, we will need to run the database migrations so that the session table, required by Jetstream, is present.

sail artisan migrate

Done! Jetstream is now installed in our application. If you visit http://localhost in your browser you should see the Laravel application with two links at the top to register and log in.

Populate the Database and Create a User Account

Before creating a new user, let's have a quick look at the database configuration that Laravel Sail has created for us in the .env file.

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password

As you can see, Laravel Sail configures everything we need to access the database container that is running on Docker. The DB_DATABASE is the name of the database and it is the same as the project folder. This is why in the previous step we were able to run the migrate command without issues.

Since we already migrated all database tables, we can now use the Laravel built-in user factory to create a new user then use its details to log in our user dashboard.

Let's open artisan tinker to interact with our application.

sail artisan tinker

The command above will open a command line interface that we can use to interact with our application. Let's create a new user.

User::factory()->create()

The command above will create a new user and save its data in our database. Then it will render the user data onto the screen. Make sure to copy the user email so we can use it later to log in. Then exit by typing exit;.

The default password for every user created with a factory is password.

Let's visit the login page and access our application dashboard.

Jetstream Dashboard

After login you are redirected to the Jetstream dashboard, which looks amazing by default. We can customize it as we like, but it is just a starting point.

Jetstream/Vue Components and Inertia Overview

The first thing you may notice after installing Jetstram is that there are a number of Vue components registered in our application. Not only that, also Inertia brings in Vue components.

To use Inertia, we need to get familiar with it when defining routes.

When we installed Jetstream, it created inside the resources/js directory a number of subfolders where all our Vue components live. There are not just simple components but also Pages components rendered by inertia as our Views.

The Jetstream inertia scaffolding created:

• resources/js/Jetstream Here we have 27 components used by Jetstream, but we can use them in our application too if we want.
• resources/js/Layouts In this folder there is the layout component used by inertia to render the dashboard page
• resources/js/Pages This is where we will place all our Pages (views) components. You will find the Dashboard page as well as the Laravel Welcome page components here.

The power of Inertia mostly comes from how it connects Vue and Laravel, letting us pass data (Database Models and more) as props to our Vue Pages components.

When you open the routes/web.php file you will notice that we no longer return a view but instead we use Inertia to render a Page component.

Let's examine the / homepage route that renders the Welcome component.

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

It looks like our usual Route definition, exept that in the closure we are returning an \Inertia\Response by calling the render method of the Inertia class Inertia::render().

This method accepts two parameters. The first is a component name. Here we passed the Welcome Page component, while the second parameter is an associative array that will turn into a list of props to pass to the component. Here is where the magic happens.

Looking inside the Welcome component, you will notice that in its script section, we simply define four props matching with the keys of our associative array. Then inertia will do the rest.

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },
        // 👇 Define the props 
        props: {
            canLogin: Boolean, 
            canRegister: Boolean,
            laravelVersion: String,
            phpVersion: String,
        }
    })
</script>

We can then just call the props inside the template. If you look at the template section you will notice that laravelVersion and phpVersion are referenced in the code as you normally would do with props in Vuejs.

<div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
  Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
</div>

The dashboard component is a little different. In fact it uses the Layout defined under Layouts/AppLayout.vue and uses the Welcome component to render the Dashboard page content, which is the same as the laravel Welcome page.

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <welcome /> 
                </div>
            </div>
        </div>
    </app-layout>
</template>

Inside the layout component you will notice the two inertia components Head and Link.

We can use the Head component to add head elements to our page, like meta tags, page title, and so on. The Link component is a wrapper aroud a standard anchor tag that incercepts click events and prevents full page reload as you can read in the Inertia documentation.

Link Component
Head Component

Disable the Registration Feature

If you are following along, the next step I'll take is to disable one on the features Jetstream provides – register an account.

To do that, we can navigate to config/fortify.php and comment out line 135 Features::registration() from the features array.

'features' => [
        //Features::registration(),
        Features::resetPasswords(),
        // Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirmPassword' => true,
        ]),
    ],

If we visit the welcome page we will notice that the register link is gone. Also, the route is no longer listed when we run sail artisan route:list.

Enable Jetstream User Profile Picture

Now let's try to enable the Jetstream feature called ProfilePhotos. As you can guess, this will allow the user to add a profile picture.

To do that we need to visit config/jetstream.php and uncomment line 59 Features::profilePhoto.

    'features' => [
        // Features::termsAndPrivacyPolicy(),
        Features::profilePhotos(), // 👈
        // Features::api(),
        // Features::teams(['invitations' => true]),
        Features::accountDeletion(),
    ],

If you log in you will see that in the user profile, a new section is available to upload a profile picture.

But before doing anything else we need to run sail artisan storage:link so that Laravel creates a symlink to the storage/app/public folder where we will save all user profile images.

Now try to visit the user profile and update the profile picture. If you get a 404 on the image this is because by default Laravel sail assumes we are using Laravel valet and sets the app URL like so APP_URL=http://my-example-app.test in the .env file. Let's change it and use localhost instead.

APP_URL=http://localhost

Now we should be good to go and be able to see and change our profile image!🥳

How to Add our First Inertia Page and Render Records from the DB

Since we are rendering Vue components instead of blade views, it is wise to start sail npm run watch to watch and recompile our Vue components as we create or edit them. Next let's add a new Photos page.

I will start by creating a new Route inside web.php:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos');
});

In the code above I defined a new GET route and then rendered a component that I will place inside the resources/js/Pages/Guest and call Photos. Let's create it.

Create a Guest folder:

cd resources/js/Pages
mkdir Guest
cd Guest
touch Photos.vue

Then let's define a basic component:

<template>
  <h1>Photos Page</h1>
</template>

If we visit http://localhost/photos/ we will see our new page, cool! Let's copy over the page structure from the Welcome page so that we get the login and dashboard links as well.

The component will change to this:

<template>
    <Head title="Phots" />

    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
        <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
            <Link v-if="$page.props.user" :href="route('admin.dashboard')" class="text-sm text-gray-700 underline">
                Dashboard
            </Link>

            <template v-else>
                <Link :href="route('login')" class="text-sm text-gray-700 underline">
                    Log in
                </Link>

                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
                    Register
                </Link>
            </template>
        </div>

        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <h1>Photos</h1>
            
        </div>
    </div>
</template>

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },

        props: {
            canLogin: Boolean,
            canRegister: Boolean,
          
        }
    })
</script>

The next step is to render a bunch of data onto this new page. For that we will build a Model and add some records to the database.

saild artisan make:model Photo -mfcr

This command creates a Model called Photo, plus a database migration table class, a factory, and a resource controller.

Now let's define the database table inside the migration we just creted. Visit the database/migrations folder and you should see a file with a name similar to this: 2022_02_13_215119_create_photos_table (yours will be sligly different).

Inside the migration file we can define a basic table like the following:

 public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('path');
            $table->text('description');
            $table->timestamps();
        });
    }

For our table we defined just two new columns, path and description, plus the id, created_at and updated_at that will be created by the $table->id() and by the $table->timestamps() methods.

After the migration we will define a seeder and then run the migrations and seed the database.

At the top of the database/seeders/PhotoSeeder.php file we will import our Model and Faker:

use App\Models\Photo;
use Faker\Generator as Faker;

Next we will implement the run method using a for loop to create 10 records in the database.

    public function run(Faker $faker)
    {
        for ($i = 0; $i < 10; $i++) {
            $photo = new Photo();
            $photo->path = $faker->imageUrl();
            $photo->description = $faker->paragraphs(2, true);
            $photo->save();
        }
    }

We are ready to run the migrations and seed the database.

sail artisan migrate
sail artisan db:seed --class PhotoSeeder

We are now ready to show the data on the Guest/Photos page component.
First update the route and pass a collection of Photos as props to the rendered component:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos', [
        'photos' => Photo::all(), ## 👈 Pass a collection of photos, the key will become our prop in the component
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
    ]);
});

Second, pass the prop to the props in the script section of the Guest/Photos component:

props: {
    canLogin: Boolean,
    canRegister: Boolean,
    photos: Array // 👈 Here
}

Finally loop over the array and render all photos in the template section, just under the h1:

<section class="photos">
    <div v-for="photo in photos" :key="photo.id" class="card" >
        <img :src="photo.path" alt="">
    </div>
</section>

Done! if you visit the /photos page you should see ten photos. 🥳

How to Refactor the Admin Dashboard and Create New Admin Pages

In this chapter we will Re-route the Jetstream dashboard and make a route group for all admin pages.

Then we will see how to add a new link to the dashboard and add a new admin page.

Finally we will take a collection of data from the db and render them in a basic table. The default table isn't cool enough, so for those reading this article, I decided to add a Tailwind table component.

Re-route the Jetstream Dashboard

If we look at the config/fortify.php file we can see that around line 64 there is a key called home. It is calling the Home constant of the Route service provider.

This means that we can tweek the constant and redirect the authenticated user to a different route.

Lets go through it step-by-step:

• update the HOME Constant
• make a route group and redirect logged in users to admin/ instead of '/dashboard'

Our application will have only a single user, so once they're logged in it is clearly the site admin – so makes sense to redirect to an admin URI.

Change the HOME constant in app/Providers/RouteServiceProvider.php around line 20 to match the following:

public const HOME = '/admin';

How to Add an Admin Pages Route Group

Next let's update our route inside web.php. We will change the route registered by Jetstream from this:

Route::middleware(['auth:sanctum', 'verified'])->get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

To this:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // other admin routes here
});

The route above is a route group that uses the auth:sanctum middleware for all routes within the group, a prefix of admin, and adds a admin suffix to each route name.

The end result is that we will be able to refer to the dashboard route by name, which now will be admin.dashboard. When we log in, we will be redirected to the admin route. Our dashboard route will respond since it's URI is just / but the goup prefix will prefix every route in the group and make their URI start with admin.

If you now run sail artisan route:list you will notice that the dashboard route has changed as we expected.

Before moving to the next step we need to update both the /layouts/AppLayout.vue and /Pages/Welcome.vue components.

Do you remeber that the dashboard route name is now admin.dashboard and not just dashboard?

Let's inspect the two components and update every reference of route('dahsboard') to this:

route('admin.dahsboard')

and also every reference of route().current('dashboard') to this:

route().current('admin.dashboard')

After all the changes, make sure to recompile the Vue components and watch changes by running sail npm run watch. Then visit the home page to check if everything is working.

How to Add a New Link to the Dashboard

Now, to add a new admin page where we can list all photos stored in the database, we need to add a new route to the group we created earlier. Let's hit the web.php file and make our changes.

In the Route group we will add a new route:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // 👇 other admin routes here 👇

    Route::get('/photos', function () {
        return inertia('Admin/Photos');
    })->name('photos'); // This will respond to requests for admin/photos and have a name of admin.photos

});

In the new route above we used the inertia() helper function that does the same exact thing – returns an Inertia/Response and renders our Page component. We placed the component under an Admin folder inside Pages and we will call it Photos.vue.

Before we create the component, let's add a new link to the dashboard that points to our new route.

Inside AppLayout.vue, find the Navigation Links comment and copy/paste the jet-nav-link component that is actually displaing a link to the dashboard and make it point to our new route.

You will end up having something like this:

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <jet-nav-link :href="route('admin.dashboard')" :active="route().current('admin.dashboard')">
        Dashboard
    </jet-nav-link>
    <!-- 👇 here it is our new link -->
      <jet-nav-link :href="route('admin.photos')" :active="route().current('admin.photos')">
        Photos
    </jet-nav-link>
</div>

Our link above uses route('admin.photos') to point to the correct route in the admin group.

If you visit localhost/dashboard and open the inspector, you should see an error:

Error: Cannot find module `./Photos.vue`

It is fine – we haven't created the Photos page component yet. So let's do it now!

How to Add a New Admin Page Component

Make a file named Photos.vue inside the Pages/Admin folder. Below are the bash commands to create the folder and the file via terminal, but you can do the same using your IDE's graphical interface.

cd resources/js/Pages
mkdir Admin
touch Admin/Photos.vue

To make this new page look like the Dashboard page, we will copy over its content. You should end up having something like this:

<template>
  <app-layout title="Dashboard"> <!-- 👈 if you want you can update the page title -->
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
    </template>

    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <!-- 👇  All photos for the Admin page down here -->
          <h1 class="text-2xl">Photos</h1>
           
        </div>
      </div>
    </div>
  </app-layout>
</template>

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
});
</script>

I removed a few pieces from the Dashboard template so make sure to double check the code above. The welcome component was removed from the template as it is not required in this page, and also its reference in the script section. The rest is identical.

Feel free to update the page title referenced as prop on the <app-layout title="Dashboard">.

Now when you visit localhost/admin you can click on the Photos menu item and see our Photos page component content. It's not much for now, just an h1.

How to Render Records in the Admin Page as a Table

Now it's time to render the data onto a table. To make things work let's first add our markup and fake that we already have access to as an array of objects and loop over them inside our table. Than we will figure out how to make things work for real.

 <table class="table-auto w-full text-left">
  <thead>
    <tr>
      <th>ID</th>
      <th>Photo</th>
      <th>Desciption</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="photo in photos">
      <td>{{ photo.id }}</td>
      <td><img width="60" :src="photo.path" alt="" /></td>
      <td>{{photo.description}}</td>
      <td>View - Edit - Delete</td>

    </tr>
  </tbody>
</table>

Ok, since we assumed that our component has access to a list of Photos, let's pass a new prop to the component from the Route.

Update the route in web.php and pass to the inertia() function a second argument that will be an associative array. It will have its keys passed as props to the Vue Page component.

In it we will call Photo::all() to have a collection to assign to a photos key, but you can use other eloquent methods if you want to paginate the results, for example.

Route::get('/photos', function () {
    return inertia('Admin/Photos', [
        'photos' => Photo::all()
    ]);
})->name('photos');

To connect the prop to our Page component we need to define the prop also inside the component.

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
  /* 👇 Pass the photos array as a props 👇 */
  props: {
    photos: Array,
  },
});
</script>

Extra: How to use a Tailwind table component

Tailwind is a CSS framework similar to Bootstrap. There are a number of free to use components that we can grab from the documentation, tweak, and use.

This table component is free and looks nice:https://tailwindui.com/components/application-ui/lists/tables.

We can tweek the Photos page template and use the Tailwind table component to get a nice looking table like so:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                              <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                              View - Edit - Delete
                                              </a>
                                          </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

How to Submit Forms with Files

For the next section we will look into how to submit a form so that we can add a new photo to the database.

• Add a create button
• Add a create route
• Define the PhotosCreate component
• Add a form
• Validate data
• Show validation errors
• Save the file to the filesystem
• Save the model

How to Create a New Photo

Add a link that points to a create route:

<a class="px-4 bg-sky-900 text-white rounded-md" :href="route('admin.photos.create')">Create</a>

Create the route within the admin group:

Route::get('/photos/create', function () {
    return inertia('Admin/PhotosCreate');
})->name('photos.create');

Let's add also the route that will handle the form submission for later:

Route::post('/photos', function () {
    dd('I will handle the form submission')   
})->name('photos.store');

Create the Admin/PhotosCreate.vue component:

    <template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <h1 class="text-2xl">Add a new Photo</h1>
                <!-- 👇 Photo creation form goes here -->

            </div>
        </div>
    </app-layout>
</template>


<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },

});
</script>

How to Add the Form to the Component

The next step is to add the form to the page and figure out how to submit it.

If you hit the Inertia documentation you will find out that there is a useForm class that we can use to simplify the process.

First, import the module inside the script tag of the Admin/PhotosCreate.vue component:

import { useForm } from '@inertiajs/inertia-vue3';

Next we can use it in the setup function (Vue 3 composition API):

setup () {
    const form = useForm({
      path: null,
      description: null,
    })

    return { form }
  }

In the code above we defined the function called setup() then a constant called form to have the useForm() class assigned to it.

Inside its parentheses we defined two properties, path and description which are the column names of our photos model.

Finally we returned the form variable for the setup function. This is to make the variable available inside our template.

Next we can add the form markup:

<form @submit.prevent="form.post(route('admin.photos.store'))">

<div>
    <label for="description" class="block text-sm font-medium text-gray-700"> Description </label>
    <div class="mt-1">
        <textarea id="description" name="description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="lorem ipsum" v-model="form.description"/>
    </div>
    <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
        <div class="text-red-500" v-if="form.errors.description">{{form.errors.description}}</div>
</div>
<div>
    <label class="block text-sm font-medium text-gray-700"> Photo </label>
    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
    <div class="space-y-1 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <div class="flex text-sm text-gray-600">
        <label for="path" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
            <span>Upload a file</span>
            <input id="path" name="path" type="file" class="sr-only" @input="form.path = $event.target.files[0]" />
        </label>
        <p class="pl-1">or drag and drop</p>
        </div>
        <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
    </div>
    </div>
</div>
<div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div>

<button type="submit" :disabled="form.processing" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
</form>

The code above uses the Vue v-on directive short end syntax @submit.prevent="form.post(route('admin.photos.store'))" on the form tag, and the dom event submit with the prevent modifier.

Then it uses the form variable that we created earlier and a post method. This is available because we are using the useForm class.

Next we point the form to the route named admin.photos.store that we created earlier.

Inside the form we have two groups of inputs. First, we have the textarea that uses the v-model to bind it to the property form.description that we declared before.

The second group uses the form.path in a Tailwind component (showing the markup for a drop file area).

Right now we are allowing users to upload only a single photo using the v-on directive on the input DOM event @input="form.path = $event.target.files[0]".

The last two things to notice are the error handling done via <div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div> for the path and also for the description.

Finally we use form.processing to disable the submit button while the form is processing.

The next step is to define the logic to save the data inside the database.

How to Store Data

To store the data, we can edit the route we defined earlier like so:

Route::post('/photos', function (Request $request) {
    //dd('I will handle the form submission')  
    
    //dd(Request::all());
    $validated_data = $request->validate([
        'path' => ['required', 'image', 'max:2500'],
        'description' => ['required']
    ]);
    //dd($validated_data);
    $path = Storage::disk('public')->put('photos', $request->file('path'));
    $validated_data['path'] = $path;
    //dd($validated_data);
    Photo::create($validated_data);
    return to_route('admin.photos');
})->name('photos.store');

The code above uses dependency injection to allow us to use the parameter $request inside the callback function.

We first validate the request and save the resulting array inside the variable $validated_data. Then we use the Storage facades to save the file in the filesystem and obtain the file path that we store inside the $path variable.

Finally we add a path key to the associative array and pass to it the $path variable. Next we create the resource in the database using the Photo::create method and redirect the user to the admin.photos page using the new to_route() helper function.

Make sure to import the Request class and the Storage facades at the top of the web.php file like so:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

Now we can add a new photo in the database and show a list of photos for both the admin and standard visitors.

Next we need to complete the CRUD operations and allow the user to edit/update a photo and delete it.

How to Update Operations

Let's start by adding the routes responsible for showing the forms used to edit the resource and update its values onto the database.

Just under the other routes in the Admin group, let's add the following code:

Route::get('/photos/{photo}/edit', function(Photo $photo){
     return inertia('Admin/PhotosEdit', [
            'photo' => $photo
        ]);
})->name('photos.edit');

The route above uses dependency injection to inject inside the function the current post, selected by the URI /photos/{photo}/edit.

Next it returns the Inertia response via the inertia() function that accepts the Component name 'Admin/PhotosEdit' as its first parameter and an associative array as its second.

Doing ['photo' => $photo] will allow us to pass the $photo model as a prop to the component later.

Next let's add the new Page component under resources/js/Pages/Admin/PhotosEdit.vue

This will be its template:

<template>
    <app-layout title="Edit Photo">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Edit Photo</h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">
                    <div>
                        <label
                            for="description"
                            class="block text-sm font-medium text-gray-700"
                        >Description</label>
                        <div class="mt-1">
                            <textarea
                                id="description"
                                name="description"
                                rows="3"
                                class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                placeholder="lorem ipsum"
                                v-model="form.description"
                            />
                        </div>
                        <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
                        <div
                            class="text-red-500"
                            v-if="form.errors.description"
                        >{{ form.errors.description }}</div>
                    </div>

                    <div class="grid grid-cols-2">
                        <div class="preview p-4">
                            <img :src="'/storage/' + photo.path" alt />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Photo</label>
                            <div
                                class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
                            >
                                <div class="space-y-1 text-center">
                                    <svg
                                        class="mx-auto h-12 w-12 text-gray-400"
                                        stroke="currentColor"
                                        fill="none"
                                        viewBox="0 0 48 48"
                                        aria-hidden="true"
                                    >
                                        <path
                                            d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                    <div class="flex text-sm text-gray-600">
                                        <label
                                            for="path"
                                            class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
                                        >
                                            <span>Upload a file</span>
                                            <input
                                                id="path"
                                                name="path"
                                                type="file"
                                                class="sr-only"
                                                @input="form.path = $event.target.files[0]"
                                            />
                                        </label>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
                                </div>
                            </div>
                            <div class="text-red-500" v-if="form.errors.path">{{ form.errors.path }}</div>
                        </div>
                    </div>

                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >Update</button>
                </form>
            </div>
        </div>
    </app-layout>
</template>

The template is actually identical to the Create component, except for a few things. The form points to a route that expects a paramenter that we pass as the second argument to the funtion route. It looks like this: <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">.

There is a section where we can see the original photo next to the upload form group:

 <div class="preview p-4">
    <img :src="'/storage/' + photo.path" alt />
</div>

The rest is identical, and here we have the script section:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { useForm } from '@inertiajs/inertia-vue3';

export default defineComponent({
    components: {
        AppLayout,
    },
    props: {
        photo: Object
    },
    setup(props) {
        const form = useForm({
            _method: "PUT",
            path: null,
            description: props.photo.description,
        })

        return { form }
    },

});

Notice that we are passing a props object with the photo key, which allows us to reference the model in the template.

Next, this _method: "PUT", line of code is required to be able to submit a PUT request instead of the POST request called on the form tag.

Now let's implement the logic to handle the form submission inside the Route below.

In web.php just under the previous route, let's add one that responds to the PUT request submitted by our form.

Route::put('/photos/{photo}', function (Request $request, Photo $photo)
    {
        //dd(Request::all());

        $validated_data = $request->validate([
            'description' => ['required']
        ]);

        if ($request->hasFile('path')) {
            $validated_data['path'] = $request->validate([
                'path' => ['required', 'image', 'max:1500'],

            ]);

            // Grab the old image and delete it
            // dd($validated_data, $photo->path);
            $oldImage = $photo->path;
            Storage::delete($oldImage);

            $path = Storage::disk('public')->put('photos', $request->file('path'));
            $validated_data['path'] = $path;
        }

        //dd($validated_data);

        $photo->update($validated_data);
        return to_route('admin.photos');
    })->name('photos.update');

The route logic is straigthforward. First we validate the description, next we check if a file was uploaded and if so we validate it.

Then we delete the previously uploaded image Storage::delete($oldImage); before storing the new image onto the datadabse and update the resource using $photo->update($validated_data);.

As before with the store route, we redirect to the admin.photos route using return to_route('admin.photos');.

How to Delete a Resource

The last step we need to take is to write the logic to delete the photo. Let's start by adding the route.

Right below the previous route we can write:

Route::delete('/photos/{photo}', function (Photo $photo)
{
    Storage::delete($photo->path);
    $photo->delete();
    return to_route('admin.photos');
})->name('photos.delete');

This route is also using a wildcard in its URI to identify the resource. Next, its second paramenter is the callback that uses the dependency injection as before. Inside the callback we first delete the image from the filesystem using Storage::delete($photo->path);.

Then we remove the resource from the database $photo->delete(); and redirect the user back return to_route('admin.photos'); like we did in the previous reoute.

Now we need to add a delete button to the table we created in one of the previous steps to show all photos.

Inside the template section of the component Admin/Photos.vue within the v-for, we can add this Jetstream button:

<jet-danger-button @click="delete_photo(photo)">
    Delete
</jet-danger-button>

Find the table cell that has the ACTIONS comment and replace the DELETE text with the button above.

So the final code will be:

<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

As you can see there is a @click event listener on the button. It calls a method delete_photo(photo) that we need to define along with a bunch of other methods to have a nice modal opening to ask for confirmation from the user.

First import the Inertia helper function useForm:

// 0. Import the useForm class at the top of the script section along with all required components
import { useForm } from '@inertiajs/inertia-vue3';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";

Remember to register the component JetDangerButton inside the components object before moving forward.

Next add the setup() function in the script section and implement the logic required to submit the form and show a modal. The comments in the code will guide you thorought all the steps.

// 1. add the setup function
setup() {
    // 2. declare a form variable and assign to it the Inertia useForm() helper function 
    const form = useForm({
        // 3. override the form method to make a DELETE request
        _method: "DELETE",
    });
    // 4. define a reactive object with show_modal and photo property
    // this will be used to figure out when to show the modal and the selected post values
    const data = ref({
        show_modal: false,
        photo: {
            id: null,
            path: null,
            description: null,
        }
    })

    // 5. define the delete_photo function and update the values of the show_modal and photo properties
    // of the reactive object defined above. This method is called by the delete button and will record the details 
    // of the selected post
    const delete_photo = (photo) => {
        //console.log(photo);
        //console.log(photo.id, photo.path, photo.description);
        data.value = {
            photo: {
                id: photo.id,
                path: photo.path,
                description: photo.description
            },
            show_modal: true
        };
    }
    // 6. define the method that will be called when our delete form is submitted
    // the form will be created next
    const deleting_photo = (id) => {
        form.post(route('admin.photos.delete', id))
        closeModal();
    }
    // 7. delare a method to close the modal by setting the show_modal to false
    const closeModal = () => {
        data.value.show_modal = false;
    }
    // 8. remember to return from the setup function the all variables and methods that you want to expose 
    // to the template.
    return { form, data, closeModal, delete_photo, deleting_photo }

}

Finally outside the v-for loop add the modal using the following code. You can place this where you want but not inside the loop.

 <JetDialogModal :show="data.show_modal">
    <template #title>
        Photo {{ data.photo.description.slice(0, 20) + '...' }}
    </template>
    <template #content>
        Are you sure you want to delete this photo?

    </template>
    <template #footer>
        <button @click="closeModal" class="px-4 py-2">Close</button>
        <form @submit.prevent="deleting_photo(data.photo.id)">
            <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
        </form>
    </template>
</JetDialogModal>

This is our final JavaScript code:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import TableComponent from "@/Components/TableComponent.vue";
import { Link } from '@inertiajs/inertia-vue3';
import { useForm } from '@inertiajs/inertia-vue3';
import JetDialogModal from '@/Jetstream/DialogModal.vue';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";
export default defineComponent({
    components: {
        AppLayout,
        Link,
        TableComponent,
        JetDialogModal,
        JetDangerButton
    },
    props: {
        photos: Array,
    },

    setup() {

        const form = useForm({
            _method: "DELETE",
        });
        const data = ref({
            show_modal: false,
            photo: {
                id: null,
                path: null,
                description: null,
            }

        })


        const delete_photo = (photo) => {
            //console.log(photo);
            console.log(photo.id, photo.path, photo.description);
            data.value = {
                photo: {
                    id: photo.id,
                    path: photo.path,
                    description: photo.description
                },
                show_modal: true
            };
        }
        const deleting_photo = (id) => {
            form.post(route('admin.photos.delete', id))
            closeModal();
        }

        const closeModal = () => {
            data.value.show_modal = false;


        }

        return { form, data, closeModal, delete_photo, deleting_photo }

    }
});
</script>

And here we have the HTML:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                         <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                            View - Edit - 

                                            <jet-danger-button @click="delete_photo(photo)">
                                                Delete
                                            </jet-danger-button>
                                            </a>
                                        </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
         <JetDialogModal :show="data.show_modal">
            <template #title>
                Photo {{ data.photo.description.slice(0, 20) + '...' }}
            </template>
            <template #content>
                Are you sure you want to delete this photo?

            </template>
            <template #footer>
                <button @click="closeModal" class="px-4 py-2">Close</button>
                <form @submit.prevent="deleting_photo(data.photo.id)">
                    <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
                </form>
            </template>
        </JetDialogModal>
    </app-layout>
</template>

That's it. If you did everything correctly you should be able to see all photos, create new photos as well as edit and delete them.

I will leave you some home work. Can you figure out how to implement the view and edit links before the delete button in the section below?

<!-- ACTIONS -->
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

Wrapup and What's next

During this guide we took our first steps and learned how to build a single page application using Laravel as our backend framework and Vue3 for the front end. We glued them together with Inertia js and built a simple photo application that lets a user manage photos.

We are just at the beginning of a fantastic journey. Learning new technologies isn't easy, but thanks to their exaustive documentations we can keep up and build awesome applications.

Your next step to master Laravel, Vue3, Inertia and all the tech we have been using so far is to hit their documentation and keep learning. Use the app we have build if you want, and improve it or start over from scratch.

Conclusion

This is just an overview of how I'd build a single page application using these technologies.

If you are familiar with server-side routing and Vuejs then you will enjoy bulding a single page application with Laravel, Inertia, and Vuejs. The learning curve isn't that steep plus you have great documentation to help you out.

You can find the source code for this guide here.

#laravel #laravel9 #jetstream #vuejs #inertiajs #mysql #tailwindcss #docker
 

Understanding CSS's !important declaration

!important in CSS is a special notation that we can apply to a CSS declaration to override other conflicting rules for the matching selector.

When we work on web projects, it is natural that we have some style declarations that other styles overrule.

This is not an issue for an experienced developer who understands the core mechanism of CSS. However, it can be difficult for beginners to understand why the style declarations they expect are not applied by the browser.

So, instead of them focusing on resolving the issue naturally, they tend to go for the quick fix by adding the !important declaration to enforce the style they expect. While this approach might work for that moment, it can also initiate another complex problem.

In this guide, we will review the following, including how to use !important and when we should use it:

• The CSS core mechanism
• Understanding the !important declaration before we use it
• :is() and other related pseudo-class functions
• When exactly can we use !importantdeclaration?
  • Utility classes
  • The style rules we cannot override

Enough said, let’s dive in.

The CSS core mechanism

Understanding the core principles of CSS will naturally enable us to know when it’s obvious to use the !important declaration. In this section, we will walk through some of these mechanisms.

Consider the HTML and CSS code below, what color do you think the heading text will be?

First, the HTML:

<h2 class="mytitle">This is heading text</h2>

Then, the CSS:

h2 {
  color: blue;
}
h2 {
  color: green;
}

The text will render green! This is basic CSS fundamental. With the CSS cascade algorithm, the ordering of CSS rules matters. In this case, the declaration that comes last in the source code wins.

Normally, this is logical. In the first place, we should not repeat the same selector as we did above. CSS does not want repetition, so it uses the last declaration rule.

However, there are cases whereby we create generic styles for the root elements, like the h2, and then add classes to style specific elements. Let’s consider the following example as well, starting with the HTML:

<h2>This is heading text</h2>
<h2 class="mytitle">This is heading text</h2>

Then, let’s see the CSS:

.mytitle {
  color: blue;
}
h2 {
  color: green;
}

In the above code, the first h2 element has no class applied, so it is obvious that it gets the green color of the h2 selector.

However, the second h2 element uses the rule for the class selector, .mytitle, even when the element selector rule comes last in the CSS code. The reason for that is that the class selector has a higher specificity when compared to the element selector.

In other words, the weight applied to the declaration in a class selector is more than element selector’s weight.

Similarly, the declaration in an ID selector is more than that of the class selector. In this case, the red color in the code below takes precedence:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

Followed by the CSS:

.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

Furthermore, an inline style attribute takes precedence over the ID selector, starting with the HTML:

<h2 id="maintitle" style="color: black;" class="mytitle">This is heading text</h2> 

 

Then followed by the CSS:

.mytitle {/*...*/}

#maintitle {/*...*/}

h2 {/*...*/}

This is the ideal priority flow in CSS and must be maintained to avoid anomalies. The !important declaration most of the time comes when we are oblivious of these basic rules.

The inline style attribute and each of the selectors have values that browsers assign to them. That way, it knows which one has higher or lower priority. Think of this value as a number of four single digits with the style attribute assigned the strongest weight value of 1000.

This follows the ID with a value of 0100, then class with 0010, and finally the element selector with 0001.

Sometimes we can combine selectors targeting specific elements, as seen in the example below:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

 

Followed by the CSS:

h2.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

The specificity of the h2.mytitle selector in the CSS above is the addition of h2 and .mytitle. That is, 0001 + 0010 = 0011. This total value, however, is less than that of the #maintitle ID that is 0100.

So, the browser uses the declaration in the ID selector to override other conflicting rules. In a case of equal weight, the last rule declaration wins.

Now that we know which rules are most relevant and why the browser applies them, it will become naturally obvious whether or not to use this !important declaration.

Understanding the !important declaration before we use it

Before we consider using the !important notation, we must ensure that we follow the specificity rule and use the CSS cascade.

In the code below, we have the h2 and h3 elements styled to be a red color:

<h2 class="mytitle">This is heading II text</h2>
<h3 class="mytitle">This is heading III text</h3>

Then, .mytitle in CSS:

.mytitle {
  color: red;
}

But, let’s say at some point, we want to give the h3 element a blue color. Adding a style rule like the one below would not change the color because the class has more weight and it’s more specific than the element selector, as we’ve learned:

.mytitle {...}
h3 {
  color: blue;
}

However, using the !important on the lesser weight makes the browser enforce that declaration over other conflicting rules:

.mytitle {...}
h3 {
  color: blue !important;
}

This is because the !important notation increases the weight of the declaration in the cascade order of precedence. What this means is that we’ve disrupted the normal priority flow. Hence, bad practice, and can lead to difficulties in code maintenance and debugging.

If at some other point, we want to override the above important rule, we can apply another !important notation on a declaration with higher specificity (or the same if it is lower down in the source). It can then lead to something like this:

h3 {
  color: blue !important;
}

/* several lines of rules */

.mytitle {
  color: green !important;
}

This is bad and should be avoided. Instead, we should check if:

1. Rearranging the rule or rewriting the selectors can solve the cascading issue
2. Increasing the specificity of the target element can solve the issue

Well, let’s find out. Back to our style rules, we can enforce a blue color on the h3 element by increasing the specificity score.

As seen below, we can combine selectors until their specificity score supersedes the conflicting rule. The h3.mytitle selector gives a specificity score of 0011, which is more than the .mytitle of 0010 score:

.mytitle {...}
h3.mytitle {
  color: blue;
}

As we can see, instead of using the !important declaration to enforce a rule, we focus on increasing the specificity score.

:is() and other related pseudo-class functions

Sometimes, we may trace issues to a pseudo-class function. So, knowing how it works can save us a lot of stress. Let’s see another example.

Imagine we are working on a project and see the following code:

<h1 id="header">
  heading <span>span it</span>
  <a href="#">link it</a>
</h1>
<p class="paragraph">
  paragraph <span>span it</span>
  <a href="">link it</a>
</p>

Using the following CSS rules gives us the output after:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Now, let’s say we want to give the span and the link text in the paragraph another color of blue. We can do this by adding the following rule:

.paragraph span,
.paragraph a {
  color: blue;
}

The earlier rule will override the blue color despite being further down the line:

As a quick fix, we can enforce our blue color by using the !important notation like so:

:is(#header, p) span,
:is(#header, p) a {...}

.paragraph span,
.paragraph a {
  color: blue !important;
}

But, as you may guess, that is bad practice, so we must not be quick to use the !important notation. Instead, we can start by analyzing how every selector works. The :is() is used in the code is a pseudo-class function for writing mega selectors in a more compressed form.

So, here is the following rule in the above code:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Which is equivalent to the following:

#header span,
p span,
#header a,
p a {
  color: red;
}

So, why is .paragraph span and .paragraph a not overriding the color despite having a specificity score of 0011, which is higher than 0002 of the p span and p a.

Well, every selector in the :is() uses the highest specificity in the list of arguments. In that case, both the #header and the p in the :is(#header, p) uses the specificity score of the #header, which is 0100. Thus, the browser sticks to its value because it has a higher specificity.

Thus, anytime we see this type of conflict, we are better off not using the pseudo-class function and sticking to its equivalent like the following:

#header span,
p span,
#header a,
p a {
  color: red;
}

Now, we should be able to see the expected result without using the !important notation that disrupts cascade order.

You can see for yourself on CodeSandbox.

When exactly can we use !important declaration?

Below are a few occasions where using the !important notation is recommended.

Utility classes

Assuming we want to style all buttons on a page to look the same, we can write a CSS rule that can be reused across a page. Let’s take a look at the following markup and style below:

<p>Subscribe button : <a class="btn" href="#">Subscribe</a></p>

<section class="content">
  <p>
    This <a href="#" class="btn">button</a> style is affected by a higher
    specificity value .
  </p>
  A link here: <a href="#">Dont click</a>
</section>

Followed by the CSS:

.btn {
  display: inline-block;
  background: #99f2f5;
  padding: 8px 10px;
  border: 1px solid #99f2f5;
  border-radius: 4px;
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.content a {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

In the above code, we can see that the button link within the section element is targeted by both selectors in the CSS. And, we learned that for conflicting rules, the browser will use the most specific rule. As we expect, .content a has a score of 0011 while .btn has a score of 0010.

The page will look like this:

In this case, we can enforce the .btn rule by adding the !important notation to the conflicting declarations like this:

.btn {
  /* ... */
  color: black !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

The page now looks as we expect:

See for yourself on CodeSandbox.

The style rules we cannot override

This mostly happens when we don’t have total control over the working code. Sometimes, when we work with a content management system like WordPress, we may find that an inline CSS style in our WordPress theme is overruling our custom style.

In this case, the !important declaration is handy to override the theme inline style.

Conclusion

The !important declaration is never meant to be used as we desire. We must only use it if absolutely necessary, such as a situation where we have less control over the code or very extreme cases in our own code.

Whether or not we use it depends on how we understand the core CSS mechanism, and in this tutorial, we covered that as well.

I hope you enjoyed reading this post. If you have questions or contributions, share your thought in the comment section and remember to share this tutorial around the web.

Source: https://blog.logrocket.com/understanding-css-important-declaration/

#css 

Comprender La Declaración !important De CSS

!importanten CSS es una notación especial que podemos aplicar a una declaración de CSS para anular otras reglas en conflicto para el selector coincidente.

Cuando trabajamos en proyectos web, es natural que tengamos algunas declaraciones de estilo que anulan otros estilos.

Este no es un problema para un desarrollador experimentado que comprende el mecanismo central de CSS. Sin embargo, puede ser difícil para los principiantes entender por qué el navegador no aplica las declaraciones de estilo que esperan.

Entonces, en lugar de enfocarse en resolver el problema de forma natural, tienden a buscar la solución rápida agregando la !importantdeclaración para hacer cumplir el estilo que esperan. Si bien este enfoque podría funcionar en ese momento, también puede iniciar otro problema complejo.

En esta guía, revisaremos lo siguiente, incluido cómo usarlo !importanty cuándo debemos usarlo:

• El mecanismo central de CSS
• Comprender la !importantdeclaración antes de usarla
• :is()y otras funciones de pseudoclase relacionadas
• ¿Cuándo exactamente podemos usar la !importantdeclaración?
  • Clases de utilidad
  • Las reglas de estilo que no podemos anular

Suficiente dicho, vamos a sumergirnos.

El mecanismo central de CSS

Comprender los principios básicos de CSS naturalmente nos permitirá saber cuándo es obvio usar la !importantdeclaración. En esta sección, analizaremos algunos de estos mecanismos.

Considere el código HTML y CSS a continuación, ¿de qué color cree que será el texto del encabezado?

Primero, el HTML:

<h2 class="mytitle">This is heading text</h2>

Entonces, el CSS:

h2 {
  color: blue;
}
h2 {
  color: green;
}

¡El texto se volverá verde! Esto es CSS básico fundamental. Con el algoritmo de cascada de CSS , el orden de las reglas de CSS importa. En este caso, gana la última declaración en el código fuente.

Normalmente, esto es lógico. En primer lugar, no debemos repetir el mismo selector que hicimos anteriormente. CSS no quiere repetición, por lo que usa la última regla de declaración.

Sin embargo, hay casos en los que creamos estilos genéricos para los elementos raíz, como el h2, y luego agregamos clases para diseñar elementos específicos. Consideremos también el siguiente ejemplo, comenzando con el HTML:

<h2>This is heading text</h2>
<h2 class="mytitle">This is heading text</h2>

Entonces, veamos el CSS:

.mytitle {
  color: blue;
}
h2 {
  color: green;
}

En el código anterior, el primer h2elemento no tiene clase aplicada, por lo que es obvio que obtiene el color verde del h2selector.

Sin embargo, el segundo h2elemento usa la regla para el selector de clase .mytitle, incluso cuando la regla del selector de elementos viene en último lugar en el código CSS. La razón de esto es que el selector de clase tiene una mayor especificidad en comparación con el selector de elementos.

En otras palabras, el peso aplicado a la declaración en un selector de clase es mayor que el peso del selector de elementos.

De manera similar, la declaración en un selector de ID es más que la del selector de clase. En este caso, el color rojo en el siguiente código tiene prioridad:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

Seguido por el CSS:

.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

Además, un styleatributo en línea tiene prioridad sobre el selector de ID, comenzando con el HTML:

<h2 id="maintitle" style="color: black;" class="mytitle">This is heading text</h2> 

 

Luego seguido por el CSS:

.mytitle {/*...*/}

#maintitle {/*...*/}

h2 {/*...*/}

Este es el flujo de prioridad ideal en CSS y debe mantenerse para evitar anomalías. La !importantdeclaración la mayoría de las veces llega cuando nos olvidamos de estas reglas básicas.

El atributo de estilo en línea y cada uno de los selectores tienen valores que les asignan los navegadores. De esa manera, sabe cuál tiene mayor o menor prioridad. Piense en este valor como un número de cuatro dígitos individuales con el styleatributo asignado al valor de ponderación más fuerte de 1000.

Esto sigue al ID con un valor de 0100, luego a la clase con 0010, y finalmente al selector de elementos con 0001.

A veces podemos combinar selectores dirigidos a elementos específicos, como se ve en el siguiente ejemplo:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

 

Seguido por el CSS:

h2.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

La especificidad del h2.mytitleselector en el CSS anterior es la adición de h2y .mytitle. Es decir, 0001 + 0010 = 0011. Este valor total, sin embargo, es menor que el del #maintitleID que es 0100.

Entonces, el navegador usa la declaración en el selector de ID para anular otras reglas en conflicto. En un caso de igual peso, gana la declaración de la última regla.

Ahora que sabemos qué reglas son las más relevantes y por qué el navegador las aplica, será obvio si usar o no esta !importantdeclaración.

Comprender la !importantdeclaración antes de usarla

Antes de considerar el uso de la !importantnotación, debemos asegurarnos de que seguimos la regla de especificidad y usamos la cascada CSS.

En el siguiente código, tenemos los elementos h2y h3diseñados para ser un redcolor:

<h2 class="mytitle">This is heading II text</h2>
<h3 class="mytitle">This is heading III text</h3>

Luego, .mytitleen CSS:

.mytitle {
  color: red;
}

Pero digamos que en algún momento queremos darle un color al h3elemento . blueAgregar una regla de estilo como la siguiente no cambiaría el color porque la clase tiene más peso y es más específica que el selector de elementos, como hemos aprendido:

.mytitle {...}
h3 {
  color: blue;
}

Sin embargo, usar !importanton the lesserweight hace que el navegador aplique esa declaración sobre otras reglas en conflicto:

.mytitle {...}
h3 {
  color: blue !important;
}

Esto se debe a que la !importantnotación aumenta el peso de la declaración en el orden de precedencia en cascada. Lo que esto significa es que hemos interrumpido el flujo de prioridad normal. Por lo tanto, es una mala práctica y puede generar dificultades en el mantenimiento y la depuración del código.

Si en algún otro punto, queremos anular la regla importante anterior, podemos aplicar otra !importantnotación en una declaración con mayor especificidad (o lo mismo si está más abajo en la fuente). Entonces puede conducir a algo como esto:

h3 {
  color: blue !important;
}

/* several lines of rules */

.mytitle {
  color: green !important;
}

Esto es malo y debe evitarse. En su lugar, debemos comprobar si:

1. Reorganizar la regla o reescribir los selectores puede resolver el problema en cascada
2. El aumento de la especificidad del elemento de destino puede resolver el problema

Bueno, averigüémoslo. Volviendo a nuestras reglas de estilo, podemos imponer un bluecolor en el h3elemento aumentando la puntuación de especificidad.

Como se ve a continuación, podemos combinar selectores hasta que su puntaje de especificidad reemplace la regla en conflicto. El h3.mytitleselector otorga una puntuación de especificidad de 0011, que es mayor que la puntuación .mytitlede :0010

.mytitle {...}
h3.mytitle {
  color: blue;
}

Como podemos ver, en lugar de usar la !importantdeclaración para hacer cumplir una regla, nos enfocamos en aumentar el puntaje de especificidad.

:is()y otras funciones de pseudoclase relacionadas

A veces, podemos rastrear problemas hasta una función de pseudoclase. Entonces, saber cómo funciona puede ahorrarnos mucho estrés. Veamos otro ejemplo.

Imagina que estamos trabajando en un proyecto y vemos el siguiente código:

<h1 id="header">
  heading <span>span it</span>
  <a href="#">link it</a>
</h1>
<p class="paragraph">
  paragraph <span>span it</span>
  <a href="">link it</a>
</p>

El uso de las siguientes reglas CSS nos da el resultado después:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Ahora, digamos que queremos darle al spany al texto del enlace en el párrafo otro color de blue. Podemos hacer esto agregando la siguiente regla:

.paragraph span,
.paragraph a {
  color: blue;
}

La regla anterior anulará el bluecolor a pesar de estar más abajo en la línea:

Como una solución rápida, podemos hacer cumplir nuestro bluecolor usando la !importantnotación de esta manera:

:is(#header, p) span,
:is(#header, p) a {...}

.paragraph span,
.paragraph a {
  color: blue !important;
}

Pero, como puede suponer, esa es una mala práctica, por lo que no debemos apresurarnos a usar la !importantnotación. En cambio, podemos comenzar analizando cómo funciona cada selector. La :is()que se usa en el código es una función de pseudoclase para escribir megaselectores en una forma más comprimida.

Entonces, aquí está la siguiente regla en el código anterior:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Lo cual es equivalente a lo siguiente:

#header span,
p span,
#header a,
p a {
  color: red;
}

Entonces, ¿por qué .paragraph spany .paragraph ano anula el color a pesar de tener un puntaje de especificidad de 0011, que es más alto que 0002el de p spany p a.

Bueno, cada selector en :is()usa la especificidad más alta en la lista de argumentos. En ese caso, tanto the #headercomo the pin the :is(#header, p)usan la puntuación de especificidad de #header, que es 0100. Por lo tanto, el navegador mantiene su valor porque tiene una mayor especificidad.

Por lo tanto, cada vez que vemos este tipo de conflicto, es mejor no usar la función de pseudoclase y apegarnos a su equivalente como el siguiente:

#header span,
p span,
#header a,
p a {
  color: red;
}

Ahora, deberíamos poder ver el resultado esperado sin usar la !importantnotación que interrumpe el orden en cascada.

Puedes verlo por ti mismo en CodeSandbox .

¿Cuándo exactamente podemos usar la !importantdeclaración?

A continuación se presentan algunas ocasiones en las !importantque se recomienda usar la notación.

Clases de utilidad

Suponiendo que queremos diseñar todos los botones de una página para que tengan el mismo aspecto, podemos escribir una regla CSS que se puede reutilizar en una página. Echemos un vistazo al siguiente marcado y estilo a continuación:

<p>Subscribe button : <a class="btn" href="#">Subscribe</a></p>

<section class="content">
  <p>
    This <a href="#" class="btn">button</a> style is affected by a higher
    specificity value .
  </p>
  A link here: <a href="#">Dont click</a>
</section>

Seguido por el CSS:

.btn {
  display: inline-block;
  background: #99f2f5;
  padding: 8px 10px;
  border: 1px solid #99f2f5;
  border-radius: 4px;
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.content a {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

En el código anterior, podemos ver que el enlace del botón dentro del sectionelemento está dirigido por ambos selectores en el CSS. Y aprendimos que para las reglas en conflicto, el navegador usará la regla más específica. Como esperábamos, .content atiene una puntuación de 0011while .btntiene una puntuación de 0010.

La página se verá así:

En este caso, podemos hacer cumplir la .btnregla agregando la !importantnotación a las declaraciones en conflicto como esta:

.btn {
  /* ... */
  color: black !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

La página ahora se ve como esperamos:

Compruébelo usted mismo en CodeSandbox .

Las reglas de estilo que no podemos anular

Esto sucede principalmente cuando no tenemos control total sobre el código de trabajo. A veces, cuando trabajamos con un sistema de administración de contenido como WordPress, podemos encontrar que un estilo CSS en línea en nuestro tema de WordPress anula nuestro estilo personalizado.

En este caso, la !importantdeclaración es útil para anular el estilo en línea del tema.

Conclusión

La !importantdeclaración nunca está destinada a ser utilizada como deseamos. Solo debemos usarlo si es absolutamente necesario, como una situación en la que tenemos menos control sobre el código o casos muy extremos en nuestro propio código.

Si lo usamos o no depende de cómo entendamos el mecanismo central de CSS, y en este tutorial también cubrimos eso.

Espero que hayas disfrutado leyendo esta publicación. Si tiene preguntas o contribuciones, comparta su opinión en la sección de comentarios y recuerde compartir este tutorial en la web.

Fuente: https://blog.logrocket.com/understanding-css-important-declaration/

#css 

CSSの！important宣言を理解する

!importantCSSでは、CSS宣言に適用して、一致するセレクターの他の競合するルールをオーバーライドできる特別な表記法です。

Webプロジェクトで作業する場合、他のスタイルが無効にするスタイル宣言があるのは当然です。

これは、CSSのコアメカニズムを理解している経験豊富な開発者にとっては問題ではありません。ただし、初心者にとって、期待するスタイル宣言がブラウザによって適用されない理由を理解するのは難しい場合があります。

そのため、問題を自然に解決することに集中するのではなく、!important宣言を追加して期待するスタイルを適用することで、迅速な修正を行う傾向があります。このアプローチはその瞬間は機能するかもしれませんが、別の複雑な問題を引き起こす可能性もあります。

このガイドでは、使用方法と使用!important時期を含め、以下を確認します。

• CSSコアメカニズム
• !important使用する前に宣言を理解する
• :is()およびその他の関連する疑似クラス関数
• いつ正確に!important宣言を使用できますか？
  • ユーティリティクラス
  • オーバーライドできないスタイルルール

十分に言った、飛び込みましょう。

CSSコアメカニズム

!importantCSSのコア原則を理解することで、宣言を使用することが明らかな時期を自然に知ることができます。このセクションでは、これらのメカニズムのいくつかについて説明します。

以下のHTMLおよびCSSコードを検討してください。見出しのテキストはどのような色になると思いますか？

まず、HTML：

<h2 class="mytitle">This is heading text</h2>

次に、CSS：

h2 {
  color: blue;
}
h2 {
  color: green;
}

テキストが緑色になります！これは基本的なCSSの基本です。CSSカスケードアルゴリズムでは、CSSルールの順序が重要です。この場合、ソースコードの最後にある宣言が優先されます。

通常、これは論理的です。そもそも、上記と同じセレクターを繰り返すべきではありません。CSSは繰り返しを望まないため、最後の宣言ルールを使用します。

ただし、のようなルート要素のジェネリックスタイルを作成してh2から、特定の要素のスタイルにクラスを追加する場合があります。HTMLから始めて、次の例も考えてみましょう。

<h2>This is heading text</h2>
<h2 class="mytitle">This is heading text</h2>

次に、CSSを見てみましょう。

.mytitle {
  color: blue;
}
h2 {
  color: green;
}

上記のコードでは、最初の要素にはクラスが適用されていないため、セレクターh2の緑色を取得していることは明らかです。h2

ただし、2番目の要素は、要素セレクタールールがCSSコードの最後にある場合でもh2、クラスセレクターのルールを使用します。.mytitleその理由は、要素セレクターと比較した場合、クラスセレクターの特異性が高いためです。

つまり、クラスセレクターの宣言に適用される重みは、要素セレクターの重みよりも大きくなります。

同様に、IDセレクターでの宣言は、クラスセレクターの宣言よりも多くなります。この場合、以下のコードの赤い色が優先されます。

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

CSSが続きます：

.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

さらに、インラインstyle属性は、HTMLから始まるIDセレクターよりも優先されます。

<h2 id="maintitle" style="color: black;" class="mytitle">This is heading text</h2> 

 

次にCSSが続きます。

.mytitle {/*...*/}

#maintitle {/*...*/}

h2 {/*...*/}

これはCSSの理想的な優先フローであり、異常を回避するために維持する必要があります。ほとんどの!important場合、宣言は、これらの基本的なルールを知らないときに行われます。

インラインスタイル属性と各セレクターには、ブラウザーが割り当てる値があります。そうすれば、どちらが優先度が高いか低いかがわかります。styleこの値は、属性に最も強い重み値が割り当てられた4桁の数字と考えてください1000。

これは、値が。のID 0100、次にクラス0010、最後に。の要素セレクターの後に続きます0001。

以下の例に示すように、特定の要素をターゲットとするセレクターを組み合わせることができる場合があります。

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

 

CSSが続きます：

h2.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

h2.mytitle上記のCSSのセレクターの特異性は、h2との追加です.mytitle。つまり、0001 + 0010 = 0011。ただし、この合計値は、#maintitleIDの合計値よりも小さくなります0100。

そのため、ブラウザはIDセレクタの宣言を使用して、他の競合するルールを上書きします。重みが等しい場合は、最後のルール宣言が優先されます。

!importantどのルールが最も関連性があり、ブラウザがそれらを適用する理由がわかったので、この宣言を使用するかどうかは当然明らかになります。

使用する前に宣言を理解する!important

表記法の使用を検討する前に!important、特異性ルールに従い、CSSカスケードを使用していることを確認する必要があります。

以下のコードでは、h2とh3要素がred色になるようにスタイル設定されています。

<h2 class="mytitle">This is heading II text</h2>
<h3 class="mytitle">This is heading III text</h3>

次に、.mytitleCSSで：

.mytitle {
  color: red;
}

h3しかし、ある時点で、要素にblue色を付けたいとしましょう。以下のようなスタイルルールを追加しても、クラスの重みが大きく、要素セレクターよりも具体的であるため、色は変更されません。

.mytitle {...}
h3 {
  color: blue;
}

ただし、!importantより小さな重みでを使用すると、ブラウザは他の競合するルールに対してその宣言を強制します。

.mytitle {...}
h3 {
  color: blue !important;
}

これは、!important表記によって宣言の重みがカスケード優先順位で増加するためです。これが意味するのは、通常の優先フローを中断したということです。したがって、悪い習慣であり、コードの保守とデバッグが困難になる可能性があります。

他の時点で、上記の重要なルールをオーバーライドしたい場合は、!importantより高い特異性を持つ宣言に別の表記法を適用できます（または、ソースの下位にある場合は同じ）。次に、次のような結果になる可能性があります。

h3 {
  color: blue !important;
}

/* several lines of rules */

.mytitle {
  color: green !important;
}

これは悪いことであり、避けるべきです。代わりに、次のことを確認する必要があります。

1. ルールを再配置したり、セレクターを書き直したりすると、カスケードの問題を解決できます
2. ターゲット要素の特異性を高めることで問題を解決できます

さて、調べてみましょう。スタイルルールに戻ると、特異性スコアを上げることblueで要素に色を適用できます。h3

以下に示すように、セレクターの特異性スコアが競合するルールに優先するまで、セレクターを組み合わせることができます。h3.mytitleセレクターは、スコアの0011よりも大きい特異.mytitle性スコアを与え0010ます。

.mytitle {...}
h3.mytitle {
  color: blue;
}

ご覧のとおり、!important宣言を使用してルールを適用するのではなく、特異性スコアを上げることに重点を置いています。

:is()およびその他の関連する疑似クラス関数

場合によっては、問題を疑似クラス関数にトレースすることがあります。したがって、それがどのように機能するかを知ることは、私たちに多くのストレスを節約することができます。別の例を見てみましょう。

プロジェクトに取り組んでいて、次のコードが表示されているとします。

<h1 id="header">
  heading <span>span it</span>
  <a href="#">link it</a>
</h1>
<p class="paragraph">
  paragraph <span>span it</span>
  <a href="">link it</a>
</p>

次のCSSルールを使用すると、次の出力が得られます。

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

spanここで、段落内のとリンクテキストに別の色を付けたいとしましょうblue。これを行うには、次のルールを追加します。

.paragraph span,
.paragraph a {
  color: blue;
}

以前のルールは、blueさらに下にあるにもかかわらず、色をオーバーライドします。

簡単な修正として、次のような表記blueを使用して色を適用できます。!important

:is(#header, p) span,
:is(#header, p) a {...}

.paragraph span,
.paragraph a {
  color: blue !important;
}

!importantしかし、ご想像のとおり、これは悪い習慣です。そのため、この表記をすぐに使用してはなりません。代わりに、すべてのセレクターがどのように機能するかを分析することから始めることができます。コードで使用されているの:is()は、メガセレクターをより圧縮された形式で記述するための疑似クラス関数です。

したがって、上記のコードには次のルールがあります。

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

これは、次と同等です。

#header span,
p span,
#header a,
p a {
  color: red;
}

したがって、とのよりも高い特異性スコアを持っているにもかかわらず、なぜ色をオーバーライド.paragraph spanしないのですか。.paragraph a00110002p spanp a

さて、のすべてのセレクターは、:is()引数のリストで最も高い特異性を使用します。その場合、のとの両方が#header、pの:is(#header, p)特異性スコアを使用します。#headerこれは0100です。したがって、ブラウザはより高い特異性を持っているため、その値に固執します。

したがって、このタイプの競合が発生した場合は、疑似クラス関数を使用せず、次のような同等の関数を使用することをお勧めします。

#header span,
p span,
#header a,
p a {
  color: red;
}

!importantこれで、カスケード順序を乱す表記を使用せずに、期待される結果を確認できるはずです。

CodeSandboxで自分の目で確かめることができます。

いつ正確に!important宣言を使用できますか？

!important以下は、表記の使用が推奨されるいくつかの機会です。

ユーティリティクラス

ページ上のすべてのボタンのスタイルを同じにしたいと仮定すると、ページ全体で再利用できるCSSルールを記述できます。以下のマークアップとスタイルを見てみましょう。

<p>Subscribe button : <a class="btn" href="#">Subscribe</a></p>

<section class="content">
  <p>
    This <a href="#" class="btn">button</a> style is affected by a higher
    specificity value .
  </p>
  A link here: <a href="#">Dont click</a>
</section>

CSSが続きます：

.btn {
  display: inline-block;
  background: #99f2f5;
  padding: 8px 10px;
  border: 1px solid #99f2f5;
  border-radius: 4px;
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.content a {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

上記のコードでは、section要素内のボタンリンクがCSSの両方のセレクターのターゲットになっていることがわかります。また、競合するルールについては、ブラウザーが最も具体的なルールを使用することを学びました。予想どおり、.content aスコアは0011while.btnで、スコアは0010。です。

ページは次のようになります。

この場合、次のように競合する宣言に表記を.btn追加することで、ルールを適用できます。!important

.btn {
  /* ... */
  color: black !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

ページは期待どおりに表示されます。

CodeSandboxで自分の目で確かめてください。

オーバーライドできないスタイルルール

これは主に、動作するコードを完全に制御できない場合に発生します。WordPressのようなコンテンツ管理システムを使用している場合、WordPressテーマのインラインCSSスタイルがカスタムスタイルを覆していることに気付くことがあります。

この場合、!important宣言はテーマのインラインスタイルを上書きするのに便利です。

結論

宣言は、!important私たちが望むように使用されることを意図したものではありません。コードを制御できない状況や、独自のコードの非常に極端な場合など、絶対に必要な場合にのみ使用する必要があります。

使用するかどうかは、コアCSSメカニズムをどのように理解しているかによって異なります。このチュートリアルでは、それについても説明しました。

この投稿を楽しんでいただけたでしょうか。質問や貢献がある場合は、コメントセクションで考えを共有し、このチュートリアルをWeb上で共有することを忘れないでください。

ソース：https ：//blog.logrocket.com/understanding-css-important-declaration/

#css