1673230200
Source for Dart website
The Dart language site (dart.dev)
The https://dart.dev site, built with Jekyll and hosted on Firebase.
We welcome contributions, and we're first-timer friendly!
Getting started
Start by looking for an issue that catches your interest, or create an issue with your proposed change. Ask for the issue to be assigned to you.
To update this site, fork the repo, make your changes, and generate a pull request. For simple changes (such as to CSS and text), you probably don't need to build this site. Often you can make changes using the GitHub UI.
NOTE: If you clone this repo locally, see the instructions below on cloning with its submodule.
If your change involves code samples, adds/removes pages, or affects navigation, you'll need to build and test your work before submitting.
If you want or need to build, follow the steps below.
Help us improve these instructions! If you have any problems getting set up to build or performing the actual build, please edit this README or file an issue (or both).
Before you build this site
For changes beyond simple text and CSS tweaks, we recommend building the site.
1. Get the prerequisites
Install the following tools, if you don't have them already:
bash, the Bourne shell. These instructions assume you're using bash, and setup might not work if you use another shell.
GNU Make. On Windows the easiest way to install Make is choco install make using command prompt or powershell as an admin. Other options include using a subsystem.
Docker. We use Docker for local dev, tests, and building the site. Install it from https://docs.docker.com/get-docker/.
Firebase CLI, for hosting the site locally. One way to get this is to run npm install -g firebase-tools. For full setup details, read the Firebase CLI documentation.
2. Clone this repo and its submodules
Note: This repo has git submodules, which affects how you clone it. The GitHub documentation has general help on forking and cloning repos.
If you're not a member of the Dart organization, we recommend you create a fork of this repo under your own account, and then submit a PR from that fork.
Once you have a fork (or you're a Dart org member), choose one of the following submodule-cloning techniques:
Clone the repo and its submodule at the same time using the --recurse-submodules option:
$ git clone --recurse-submodules https://github.com/dart-lang/site-www.gitOR
If you've already cloned the repo without its submodule, then run this command from the repo root:
$ git submodule update --init --recursiveNote: At any time during development you can use the
git submodulecommand to refresh submodules:$ git pull; git submodule update --init --recursive
Setting up your local environment and serve changes
Optional: After cloning the repo and its submodules, create a branch for your changes:
$ git checkout -b <BRANCH_NAME>If the Docker Desktop application isn't already running on your machine, start it. Look for the Docker status icon: if it has an exclamation point (!), then update Docker Desktop before proceeding.
Run the initial local setup command:
$ make setupServe the site locally (via docker-compose):
$ make upThe site is generated, and then the development server runs in the Docker container, with the generated _site directory visible locally as a mirrored volume from inside the container.
View your changes in the browser by navigating to http://localhost:4000.
Note: Unless you're editing files under
site-shared, you can safely ignoreERROR: directory is already being watchedmessages. For details, see #1363.
Make your changes to the local repo.
The site will rebuild and the browser will autoreload to reflect the changes.
Tip: If you aren't seeing the changes you expect (e.g. src/_data),
ctrl-Cout of your running dev server and rebuild the site from scratch using the following commands:$ make down && make clean && make up
Commit your changes to the branch and submit your PR.
When you've finished developing, shut down the Docker container:
$ make downTip: To find additional commands, read the Makefile. For example, if you need to debug the Docker setup, you can run:
$ make run
Pre-push site checks
Checking documentation and example code
If you've made changes to this site's documentation and/or example code, and committed locally, then run the following command before pushing your work:
# Enter a running Docker container shell
make run
# Check/validate example code
tool/test.sh
# Check links for 404 errors
tool/check-links.shIf these scripts report errors or warnings, then address those issues and rerun the above commands. Otherwise, you can push your changes.
Deploying to a staging site
You can deploy your local edits to a personal Firebase hosting staging site as follows:
If you don't already have a Firebase project,
Navigate to the Firebase Console and create your own Firebase project (for example, dart-dev-staging).
Head back to your local repo shell and verify that you are logged in.
$ firebase loginEnsure that your project exists and activate that project:
$ firebase projects:list
$ firebase use <your-project>Build the site via Docker:
$ make buildThis will build the site and copy it to your local _site directory. If that directory previously existed, it will be replaced.
Deploy to your activated Firebase project's default hosting site:
$ FIREBASE_PROJECT=<your-project> make deployTIP: Add your
FIREBASE_PROJECTenv var to your.envfile and it will overwrite the default every time you deploy without specifying.
Navigate to your PR on GitHub and update it with the location of the staged version, the names of your reviewers, and so on.
Creating and/or editing DartPad example code
Most of the code used to create DartPad examples is hosted on GitHub. However, this repo also contains some *.dart files responsible for DartPad example code.
Refresh DartPad HTML tooltips
Files that require DartPad HTML to be manually updated include instructions at the top that specify running:
$ tool/create_code_with_tooltips.dartFollow the instructions in those files to refresh the appropriate code.
DartPad picker
The DartPad example picker must be manually compiled if changes are made. This will regenerate the associated JavaScript file in src/assets/dash/js:
$ tool/compile.shDockerfile Maintenance
Dart SDK and Node PPA Checksum values
Since both the Dart SDK and Node PPA curl remote files, it's important to verify checksum values. Both installs use latest and lts respectively, so these files may be periodically updated. When this happens, local checksums may fail and This will break the Docker/Compose setup/build. You will see the relevant output in your shell e.g. DART CHECKSUM FAILED!.... When this happens, run the following command:
make run
make fetch-sumsThis command will output the updated checksum values for both Node and Dart, and that output will be formatted similar or the same as what is currently in the Dockerfile. Copy this output and replace the relevant install code in the Dockerfile, then rerun your setup/build again.
Download details:
Author: dart-lang
Source code: https://github.com/dart-lang/site-www
License: View license
What is GEEK
Buddha Community
1648873833
A Collection of Flutter and Dart Tips and Tricks
Table of Contents
LazyStreamin Flutter and Dart- Cancelable APIs in Flutter
- Asset Data in Flutter
- API Caching in Flutter
FutureGroupin 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
StringData in Dart Stream.startWithin Flutter- Optional Functions in Dart
AnnotatedRegionin Flutter- Unordered
MapEquality in Dart IterabletoListViewin Flutter- Password Mask in Flutter
- Fast
Object.toString()in Dart - Copying Bloc State in Flutter
IterableSubscripts in DartuseStatein Flutter Hooks- Folding Iterables in Dart
- Custom Iterables in Dart
- Class Clusters in Dart
Iterable+/- in Dart- Periodic Streams in Dart
EmptyOnErrorin DartStream<T>Initial Value in FlutterDouble.normalizein Dart- Hide Sensitive Information in Flutter
Iterable.compactMapin DartuseEffectin Flutter Hooks- Merging Streams in Dart
IsolateStream in Dart- Network Image Retry in Flutter
- Reusable APIs in Flutter
ListTileShadow in Flutter- Transparent AppBar in Flutter
- Constructors on Abstract Classes in Dart
@useResultin Dart@mustCallSuperin DartObject.hashin Dart- Expanded Equally in Flutter
- Random Iterable Value in Dart
- Hardcoded Strings in Flutter
- Manually Scroll in List View in Flutter
AsyncSnapshottoWidgetin Flutter- Breadcrumbs in Flutter
- Unique
MapValues in Dart - Smart Quotes/Dashes in Flutter
- Haptic Feedback in Flutter
- Localization Delegates in Flutter
- Extending Functions in Dart
- Paginated
ListViewin 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
Objectin Dart - Compute in Flutter
- Filter on
Mapin Dart - Type Alias in Dart
ValueNotifierin 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
FutureError Test in Flutter- Generic URL Retrieval in Dart
- Custom Error Widget in Flutter
- Handle Multiple
FutureErrors in Dart FutureError 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
ChangeNotifierin Flutter- Refresh Indicator in Flutter
- FlatMap in Dart
OrientationBuilderin 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
CheckboxListTilein Flutter-Operator onStringin 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
StreamandStreamBuilderin 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
StreamBuilderandStreamControllerin Dart- Almost Equal in Dart
- Enum Associated Values in Dart
- Implementing
Comparablein 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 Dartmixins and JSON Parsing in Dartmixins vsabstract classes in Dart- Drawing Shapes in Flutter with
LayoutBuilder,CustomPaintandCustomPainter - Generic Type Aliases in Dart
- Callable Classes in Dart
- Synchronous Generators in Dart
- Implicit Interfaces in Dart
constConstructors in Dartasync-awaitOver RawFutures 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
1642405260
Build an Android application with Kivy Python framework
If you’re a Python developer thinking about getting started with mobile development, then the Kivy framework is your best bet. With Kivy, you can develop platform-independent applications that compile for iOS, Android, Windows, macOS, and Linux. In this article, we’ll cover Android specifically because it is the most used.
We’ll build a simple random number generator app that you can install on your phone and test when you are done. To follow along with this article, you should be familiar with Python. Let’s get started!
Getting started with Kivy
First, you’ll need a new directory for your app. Make sure you have Python installed on your machine and open a new Python file. You’ll need to install the Kivy module from your terminal using either of the commands below. To avoid any package conflicts, be sure you’re installing Kivy in a virtual environment:
pip install kivy
//
pip3 install kivy Once you have installed Kivy, you should see a success message from your terminal that looks like the screenshots below:
Kivy installation
Successful Kivy installation
Next, navigate into your project folder. In the main.py file, we’ll need to import the Kivy module and specify which version we want. You can use Kivy v2.0.0, but if you have a smartphone that is older than Android 8.0, I recommend using Kivy v1.9.0. You can mess around with the different versions during the build to see the differences in features and performance.
Add the version number right after the import kivy line as follows:
kivy.require('1.9.0')Now, we’ll create a class that will basically define our app; I’ll name mine RandomNumber. This class will inherit the app class from Kivy. Therefore, you need to import the app by adding from kivy.app import App:
class RandomNumber(App): In the RandomNumber class, you’ll need to add a function called build, which takes a self parameter. To actually return the UI, we’ll use the build function. For now, I have it returned as a simple label. To do so, you’ll need to import Label using the line from kivy.uix.label import Label:
import kivy
from kivy.app import App
from kivy.uix.label import Label
class RandomNumber(App):
def build(self):
return Label(text="Random Number Generator")Now, our app skeleton is complete! Before moving forward, you should create an instance of the RandomNumber class and run it in your terminal or IDE to see the interface:
import kivy from kivy.app import App from kivy.uix.label import Label class RandomNumber(App): def build(self): return Label(text="Random Number Generator") randomApp = RandomNumber() randomApp.run()
When you run the class instance with the text Random Number Generator, you should see a simple interface or window that looks like the screenshot below:
Simple interface after running the code
You won’t be able to run the text on Android until you’ve finished building the whole thing.
Outsourcing the interface
Next, we’ll need a way to outsource the interface. First, we’ll create a Kivy file in our directory that will house most of our design work. You’ll want to name this file the same name as your class using lowercase letters and a .kv extension. Kivy will automatically associate the class name and the file name, but it may not work on Android if they are exactly the same.
Inside that .kv file, you need to specify the layout for your app, including elements like the label, buttons, forms, etc. To keep this demonstration simple, I’ll add a label for the title Random Number, a label that will serve as a placeholder for the random number that is generated _, and a Generate button that calls the generate function.
My .kv file looks like the code below, but you can mess around with the different values to fit your requirements:
<boxLayout>:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15 In the main.py file, you no longer need the Label import statement because the Kivy file takes care of your UI. However, you do need to import boxlayout, which you will use in the Kivy file.
In your main file, you need to add the import statement and edit your main.py file to read return BoxLayout() in the build method:
from kivy.uix.boxlayout import BoxLayoutIf you run the command above, you should see a simple interface that has the random number title, the _ place holder, and the clickable generate button:
Random Number app rendered
Notice that you didn’t have to import anything for the Kivy file to work. Basically, when you run the app, it returns boxlayout by looking for a file inside the Kivy file with the same name as your class. Keep in mind, this is a simple interface, and you can make your app as robust as you want. Be sure to check out the Kv language documentation.
Generate the random number function
Now that our app is almost done, we’ll need a simple function to generate random numbers when a user clicks the generate button, then render that random number into the app interface. To do so, we’ll need to change a few things in our files.
First, we’ll import the module that we’ll use to generate a random number with import random. Then, we’ll create a function or method that calls the generated number. For this demonstration, I’ll use a range between 0 and 2000. Generating the random number is simple with the random.randint(0, 2000) command. We’ll add this into our code in a moment.
Next, we’ll create another class that will be our own version of the box layout. Our class will have to inherit the box layout class, which houses the method to generate random numbers and render them on the interface:
class MyRoot(BoxLayout):
def __init__(self):
super(MyRoot, self).__init__()Within that class, we’ll create the generate method, which will not only generate random numbers but also manipulate the label that controls what is displayed as the random number in the Kivy file.
To accommodate this method, we’ll first need to make changes to the .kv file . Since the MyRoot class has inherited the box layout, you can make MyRoot the top level element in your .kv file:
<MyRoot>:
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15Notice that you are still keeping all your UI specifications indented in the Box Layout. After this, you need to add an ID to the label that will hold the generated numbers, making it easy to manipulate when the generate function is called. You need to specify the relationship between the ID in this file and another in the main code at the top, just before the BoxLayout line:
<MyRoot>:
random_label: random_label
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
id: random_label
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15The random_label: random_label line basically means that the label with the ID random_label will be mapped to random_label in the main.py file, meaning that any action that manipulates random_label will be mapped on the label with the specified name.
We can now create the method to generate the random number in the main file:
def generate_number(self):
self.random_label.text = str(random.randint(0, 2000))
# notice how the class method manipulates the text attributre of the random label by a# ssigning it a new random number generate by the 'random.randint(0, 2000)' funcion. S# ince this the random number generated is an integer, typecasting is required to make # it a string otherwise you will get a typeError in your terminal when you run it.The MyRoot class should look like the code below:
class MyRoot(BoxLayout):
def __init__(self):
super(MyRoot, self).__init__()
def generate_number(self):
self.random_label.text = str(random.randint(0, 2000))Congratulations! You’re now done with the main file of the app. The only thing left to do is make sure that you call this function when the generate button is clicked. You need only add the line on_press: root.generate_number() to the button selection part of your .kv file:
<MyRoot>:
random_label: random_label
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
id: random_label
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15
on_press: root.generate_number()Now, you can run the app.
Compiling our app on Android
Before compiling our app on Android, I have some bad news for Windows users. You’ll need Linux or macOS to compile your Android application. However, you don’t need to have a separate Linux distribution, instead, you can use a virtual machine.
To compile and generate a full Android .apk application, we’ll use a tool called Buildozer. Let’s install Buildozer through our terminal using one of the commands below:
pip3 install buildozer
//
pip install buildozerNow, we’ll install some of Buildozer’s required dependencies. I am on Linux Ergo, so I’ll use Linux-specific commands. You should execute these commands one by one:
sudo apt update
sudo apt install -y git zip unzip openjdk-13-jdk python3-pip autoconf libtool pkg-config zlib1g-dev libncurses5-dev libncursesw5-dev libtinfo5 cmake libffi-dev libssl-dev
pip3 install --upgrade Cython==0.29.19 virtualenv
# add the following line at the end of your ~/.bashrc file
export PATH=$PATH:~/.local/bin/After executing the specific commands, run buildozer init. You should see an output similar to the screenshot below:
Buildozer successful initialization
The command above creates a Buildozer .spec file, which you can use to make specifications to your app, including the name of the app, the icon, etc. The .spec file should look like the code block below:
[app]
# (str) Title of your application
title = My Application
# (str) Package name
package.name = myapp
# (str) Package domain (needed for android/ios packaging)
package.domain = org.test
# (str) Source code where the main.py live
source.dir = .
# (list) Source files to include (let empty to include all the files)
source.include_exts = py,png,jpg,kv,atlas
# (list) List of inclusions using pattern matching
#source.include_patterns = assets/*,images/*.png
# (list) Source files to exclude (let empty to not exclude anything)
#source.exclude_exts = spec
# (list) List of directory to exclude (let empty to not exclude anything)
#source.exclude_dirs = tests, bin
# (list) List of exclusions using pattern matching
#source.exclude_patterns = license,images/*/*.jpg
# (str) Application versioning (method 1)
version = 0.1
# (str) Application versioning (method 2)
# version.regex = __version__ = \['"\](.*)['"]
# version.filename = %(source.dir)s/main.py
# (list) Application requirements
# comma separated e.g. requirements = sqlite3,kivy
requirements = python3,kivy
# (str) Custom source folders for requirements
# Sets custom source for any requirements with recipes
# requirements.source.kivy = ../../kivy
# (list) Garden requirements
#garden_requirements =
# (str) Presplash of the application
#presplash.filename = %(source.dir)s/data/presplash.png
# (str) Icon of the application
#icon.filename = %(source.dir)s/data/icon.png
# (str) Supported orientation (one of landscape, sensorLandscape, portrait or all)
orientation = portrait
# (list) List of service to declare
#services = NAME:ENTRYPOINT_TO_PY,NAME2:ENTRYPOINT2_TO_PY
#
# OSX Specific
#
#
# author = © Copyright Info
# change the major version of python used by the app
osx.python_version = 3
# Kivy version to use
osx.kivy_version = 1.9.1
#
# Android specific
#
# (bool) Indicate if the application should be fullscreen or not
fullscreen = 0
# (string) Presplash background color (for new android toolchain)
# Supported formats are: #RRGGBB #AARRGGBB or one of the following names:
# red, blue, green, black, white, gray, cyan, magenta, yellow, lightgray,
# darkgray, grey, lightgrey, darkgrey, aqua, fuchsia, lime, maroon, navy,
# olive, purple, silver, teal.
#android.presplash_color = #FFFFFF
# (list) Permissions
#android.permissions = INTERNET
# (int) Target Android API, should be as high as possible.
#android.api = 27
# (int) Minimum API your APK will support.
#android.minapi = 21
# (int) Android SDK version to use
#android.sdk = 20
# (str) Android NDK version to use
#android.ndk = 19b
# (int) Android NDK API to use. This is the minimum API your app will support, it should usually match android.minapi.
#android.ndk_api = 21
# (bool) Use --private data storage (True) or --dir public storage (False)
#android.private_storage = True
# (str) Android NDK directory (if empty, it will be automatically downloaded.)
#android.ndk_path =
# (str) Android SDK directory (if empty, it will be automatically downloaded.)
#android.sdk_path =
# (str) ANT directory (if empty, it will be automatically downloaded.)
#android.ant_path =
# (bool) If True, then skip trying to update the Android sdk
# This can be useful to avoid excess Internet downloads or save time
# when an update is due and you just want to test/build your package
# android.skip_update = False
# (bool) If True, then automatically accept SDK license
# agreements. This is intended for automation only. If set to False,
# the default, you will be shown the license when first running
# buildozer.
# android.accept_sdk_license = False
# (str) Android entry point, default is ok for Kivy-based app
#android.entrypoint = org.renpy.android.PythonActivity
# (str) Android app theme, default is ok for Kivy-based app
# android.apptheme = "@android:style/Theme.NoTitleBar"
# (list) Pattern to whitelist for the whole project
#android.whitelist =
# (str) Path to a custom whitelist file
#android.whitelist_src =
# (str) Path to a custom blacklist file
#android.blacklist_src =
# (list) List of Java .jar files to add to the libs so that pyjnius can access
# their classes. Don't add jars that you do not need, since extra jars can slow
# down the build process. Allows wildcards matching, for example:
# OUYA-ODK/libs/*.jar
#android.add_jars = foo.jar,bar.jar,path/to/more/*.jar
# (list) List of Java files to add to the android project (can be java or a
# directory containing the files)
#android.add_src =
# (list) Android AAR archives to add (currently works only with sdl2_gradle
# bootstrap)
#android.add_aars =
# (list) Gradle dependencies to add (currently works only with sdl2_gradle
# bootstrap)
#android.gradle_dependencies =
# (list) add java compile options
# this can for example be necessary when importing certain java libraries using the 'android.gradle_dependencies' option
# see https://developer.android.com/studio/write/java8-support for further information
# android.add_compile_options = "sourceCompatibility = 1.8", "targetCompatibility = 1.8"
# (list) Gradle repositories to add {can be necessary for some android.gradle_dependencies}
# please enclose in double quotes
# e.g. android.gradle_repositories = "maven { url 'https://kotlin.bintray.com/ktor' }"
#android.add_gradle_repositories =
# (list) packaging options to add
# see https://google.github.io/android-gradle-dsl/current/com.android.build.gradle.internal.dsl.PackagingOptions.html
# can be necessary to solve conflicts in gradle_dependencies
# please enclose in double quotes
# e.g. android.add_packaging_options = "exclude 'META-INF/common.kotlin_module'", "exclude 'META-INF/*.kotlin_module'"
#android.add_gradle_repositories =
# (list) Java classes to add as activities to the manifest.
#android.add_activities = com.example.ExampleActivity
# (str) OUYA Console category. Should be one of GAME or APP
# If you leave this blank, OUYA support will not be enabled
#android.ouya.category = GAME
# (str) Filename of OUYA Console icon. It must be a 732x412 png image.
#android.ouya.icon.filename = %(source.dir)s/data/ouya_icon.png
# (str) XML file to include as an intent filters in <activity> tag
#android.manifest.intent_filters =
# (str) launchMode to set for the main activity
#android.manifest.launch_mode = standard
# (list) Android additional libraries to copy into libs/armeabi
#android.add_libs_armeabi = libs/android/*.so
#android.add_libs_armeabi_v7a = libs/android-v7/*.so
#android.add_libs_arm64_v8a = libs/android-v8/*.so
#android.add_libs_x86 = libs/android-x86/*.so
#android.add_libs_mips = libs/android-mips/*.so
# (bool) Indicate whether the screen should stay on
# Don't forget to add the WAKE_LOCK permission if you set this to True
#android.wakelock = False
# (list) Android application meta-data to set (key=value format)
#android.meta_data =
# (list) Android library project to add (will be added in the
# project.properties automatically.)
#android.library_references =
# (list) Android shared libraries which will be added to AndroidManifest.xml using <uses-library> tag
#android.uses_library =
# (str) Android logcat filters to use
#android.logcat_filters = *:S python:D
# (bool) Copy library instead of making a libpymodules.so
#android.copy_libs = 1
# (str) The Android arch to build for, choices: armeabi-v7a, arm64-v8a, x86, x86_64
android.arch = armeabi-v7a
# (int) overrides automatic versionCode computation (used in build.gradle)
# this is not the same as app version and should only be edited if you know what you're doing
# android.numeric_version = 1
#
# Python for android (p4a) specific
#
# (str) python-for-android fork to use, defaults to upstream (kivy)
#p4a.fork = kivy
# (str) python-for-android branch to use, defaults to master
#p4a.branch = master
# (str) python-for-android git clone directory (if empty, it will be automatically cloned from github)
#p4a.source_dir =
# (str) The directory in which python-for-android should look for your own build recipes (if any)
#p4a.local_recipes =
# (str) Filename to the hook for p4a
#p4a.hook =
# (str) Bootstrap to use for android builds
# p4a.bootstrap = sdl2
# (int) port number to specify an explicit --port= p4a argument (eg for bootstrap flask)
#p4a.port =
#
# iOS specific
#
# (str) Path to a custom kivy-ios folder
#ios.kivy_ios_dir = ../kivy-ios
# Alternately, specify the URL and branch of a git checkout:
ios.kivy_ios_url = https://github.com/kivy/kivy-ios
ios.kivy_ios_branch = master
# Another platform dependency: ios-deploy
# Uncomment to use a custom checkout
#ios.ios_deploy_dir = ../ios_deploy
# Or specify URL and branch
ios.ios_deploy_url = https://github.com/phonegap/ios-deploy
ios.ios_deploy_branch = 1.7.0
# (str) Name of the certificate to use for signing the debug version
# Get a list of available identities: buildozer ios list_identities
#ios.codesign.debug = "iPhone Developer: <lastname> <firstname> (<hexstring>)"
# (str) Name of the certificate to use for signing the release version
#ios.codesign.release = %(ios.codesign.debug)s
[buildozer]
# (int) Log level (0 = error only, 1 = info, 2 = debug (with command output))
log_level = 2
# (int) Display warning if buildozer is run as root (0 = False, 1 = True)
warn_on_root = 1
# (str) Path to build artifact storage, absolute or relative to spec file
# build_dir = ./.buildozer
# (str) Path to build output (i.e. .apk, .ipa) storage
# bin_dir = ./bin
# -----------------------------------------------------------------------------
# List as sections
#
# You can define all the "list" as [section:key].
# Each line will be considered as a option to the list.
# Let's take [app] / source.exclude_patterns.
# Instead of doing:
#
#[app]
#source.exclude_patterns = license,data/audio/*.wav,data/images/original/*
#
# This can be translated into:
#
#[app:source.exclude_patterns]
#license
#data/audio/*.wav
#data/images/original/*
#
# -----------------------------------------------------------------------------
# Profiles
#
# You can extend section / key with a profile
# For example, you want to deploy a demo version of your application without
# HD content. You could first change the title to add "(demo)" in the name
# and extend the excluded directories to remove the HD content.
#
#[app@demo]
#title = My Application (demo)
#
#[app:source.exclude_patterns@demo]
#images/hd/*
#
# Then, invoke the command line with the "demo" profile:
#
#buildozer --profile demo android debugIf you want to specify things like the icon, requirements, loading screen, etc., you should edit this file. After making all the desired edits to your application, run buildozer -v android debug from your app directory to build and compile your application. This may take a while, especially if you have a slow machine.
After the process is done, your terminal should have some logs, one confirming that the build was successful:
Android successful build
You should also have an APK version of your app in your bin directory. This is the application executable that you will install and run on your phone:
Android .apk in the bin directory
Conclusion
Congratulations! If you have followed this tutorial step by step, you should have a simple random number generator app on your phone. Play around with it and tweak some values, then rebuild. Running the rebuild will not take as much time as the first build.
As you can see, building a mobile application with Python is fairly straightforward, as long as you are familiar with the framework or module you are working with. Regardless, the logic is executed the same way.
Get familiar with the Kivy module and it’s widgets. You can never know everything all at once. You only need to find a project and get your feet wet as early as possible. Happy coding.
Link: https://blog.logrocket.com/build-android-application-kivy-python-framework/
1641693600
Cree Una Aplicación De Android Con El Marco Kivy Python
Si es un desarrollador de Python que está pensando en comenzar con el desarrollo móvil, entonces el marco Kivy es su mejor opción. Con Kivy, puede desarrollar aplicaciones independientes de la plataforma que compilan para iOS, Android, Windows, macOS y Linux. En este artículo, cubriremos Android específicamente porque es el más utilizado.
Construiremos una aplicación generadora de números aleatorios simple que puede instalar en su teléfono y probar cuando haya terminado. Para continuar con este artículo, debe estar familiarizado con Python. ¡Empecemos!
Primeros pasos con Kivy
Primero, necesitará un nuevo directorio para su aplicación. Asegúrese de tener Python instalado en su máquina y abra un nuevo archivo de Python. Deberá instalar el módulo Kivy desde su terminal usando cualquiera de los comandos a continuación. Para evitar conflictos de paquetes, asegúrese de instalar Kivy en un entorno virtual:
pip install kivy
//
pip3 install kivy Una vez que haya instalado Kivy, debería ver un mensaje de éxito de su terminal que se parece a las capturas de pantalla a continuación:
Instalación decepcionada
Instalación exitosa de Kivy
A continuación, navegue a la carpeta de su proyecto. En el main.pyarchivo, necesitaremos importar el módulo Kivy y especificar qué versión queremos. Puede usar Kivy v2.0.0, pero si tiene un teléfono inteligente anterior a Android 8.0, le recomiendo usar Kivy v1.9.0. Puede jugar con las diferentes versiones durante la compilación para ver las diferencias en las características y el rendimiento.
Agregue el número de versión justo después de la import kivylínea de la siguiente manera:
kivy.require('1.9.0')Ahora, crearemos una clase que básicamente definirá nuestra aplicación; Voy a nombrar el mío RandomNumber. Esta clase heredará la appclase de Kivy. Por lo tanto, debe importar appagregando from kivy.app import App:
class RandomNumber(App): En la RandomNumberclase, deberá agregar una función llamada build, que toma un selfparámetro. Para devolver la interfaz de usuario, usaremos la buildfunción. Por ahora, lo tengo devuelto como una simple etiqueta. Para hacerlo, deberá importar Labelusando la línea from kivy.uix.label import Label:
import kivy
from kivy.app import App
from kivy.uix.label import Label
class RandomNumber(App):
def build(self):
return Label(text="Random Number Generator")¡Ahora, el esqueleto de nuestra aplicación está completo! Antes de continuar, debe crear una instancia de la RandomNumberclase y ejecutarla en su terminal o IDE para ver la interfaz:
importar kivy de kivy.app importar aplicación de kivy.uix.label clase de etiqueta de importación RandomNumber(App): def build(self): return Label(text="Generador de números aleatorios") randomApp = RandomNumber() randomApp.run()
Cuando ejecuta la instancia de clase con el texto Random Number Generator, debería ver una interfaz o ventana simple que se parece a la siguiente captura de pantalla:
Interfaz simple después de ejecutar el código.
No podrá ejecutar el texto en Android hasta que haya terminado de construir todo.
Externalización de la interfaz
A continuación, necesitaremos una forma de subcontratar la interfaz. Primero, crearemos un archivo Kivy en nuestro directorio que albergará la mayor parte de nuestro trabajo de diseño. Querrá nombrar este archivo con el mismo nombre que su clase usando letras minúsculas y una .kvextensión. Kivy asociará automáticamente el nombre de la clase y el nombre del archivo, pero es posible que no funcione en Android si son exactamente iguales.
Dentro de ese .kvarchivo, debe especificar el diseño de su aplicación, incluidos elementos como la etiqueta, los botones, los formularios, etc. Para simplificar esta demostración, agregaré una etiqueta para el título Random Number, una etiqueta que servirá como marcador de posición. para el número aleatorio que se genera _, y un Generatebotón que llama a la generatefunción.
Mi .kvarchivo se parece al siguiente código, pero puede jugar con los diferentes valores para que se ajusten a sus requisitos:
<boxLayout>:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15 En el main.pyarchivo, ya no necesita la Labeldeclaración de importación porque el archivo Kivy se encarga de su interfaz de usuario. Sin embargo, necesita importar boxlayout, que utilizará en el archivo Kivy.
En su archivo principal, debe agregar la declaración de importación y editar su main.pyarchivo para leer return BoxLayout()el buildmétodo:
from kivy.uix.boxlayout import BoxLayoutSi ejecuta el comando anterior, debería ver una interfaz simple que tiene el título del número aleatorio, el _marcador de posición y el generatebotón en el que se puede hacer clic:
Aplicación de números aleatorios renderizada
Tenga en cuenta que no tuvo que importar nada para que funcione el archivo Kivy. Básicamente, cuando ejecuta la aplicación, regresa boxlayoutbuscando un archivo dentro del archivo Kivy con el mismo nombre que su clase. Tenga en cuenta que esta es una interfaz simple y puede hacer que su aplicación sea tan robusta como desee. Asegúrese de consultar la documentación del idioma Kv .
Generar la función de números aleatorios
Ahora que nuestra aplicación está casi terminada, necesitaremos una función simple para generar números aleatorios cuando un usuario haga clic en el generatebotón y luego mostrar ese número aleatorio en la interfaz de la aplicación. Para hacerlo, necesitaremos cambiar algunas cosas en nuestros archivos.
Primero, importaremos el módulo que usaremos para generar un número aleatorio con import random. Luego, crearemos una función o método que llame al número generado. Para esta demostración, usaré un rango entre 0y 2000. Generar el número aleatorio es simple con el random.randint(0, 2000)comando. Agregaremos esto a nuestro código en un momento.
A continuación, crearemos otra clase que será nuestra propia versión del box layout. Nuestra clase tendrá que heredar la box layoutclase, que alberga el método para generar números aleatorios y representarlos en la interfaz:
class MyRoot(BoxLayout):
def __init__(self):
super(MyRoot, self).__init__()Dentro de esa clase, crearemos el generatemétodo, que no solo generará números aleatorios, sino que también manipulará la etiqueta que controla lo que se muestra como número aleatorio en el archivo Kivy.
Para acomodar este método, primero necesitaremos hacer cambios en el .kvarchivo. Dado que la MyRootclase ha heredado el box layout, puede crear MyRootel elemento de nivel superior en su .kvarchivo:
<MyRoot>:
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15Tenga en cuenta que todavía mantiene todas las especificaciones de la interfaz de usuario con sangría en el archivo Box Layout. Después de esto, debe agregar una identificación a la etiqueta que contendrá los números generados, lo que facilita la manipulación cuando generatese llama a la función. Debe especificar la relación entre la ID en este archivo y otra en el código principal en la parte superior, justo antes de la BoxLayoutlínea:
<MyRoot>:
random_label: random_label
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
id: random_label
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15La random_label: random_labellínea básicamente significa que la etiqueta con el ID random_labelse asignará a random_labelen el main.pyarchivo, lo que significa que cualquier acción que manipula random_labelserán mapeados en la etiqueta con el nombre especificado.
Ahora podemos crear el método para generar el número aleatorio en el archivo principal:
def generate_number(self):
self.random_label.text = str(random.randint(0, 2000))
# notice how the class method manipulates the text attributre of the random label by a# ssigning it a new random number generate by the 'random.randint(0, 2000)' funcion. S# ince this the random number generated is an integer, typecasting is required to make # it a string otherwise you will get a typeError in your terminal when you run it.La MyRootclase debería parecerse al siguiente código:
class MyRoot(BoxLayout):
def __init__(self):
super(MyRoot, self).__init__()
def generate_number(self):
self.random_label.text = str(random.randint(0, 2000))¡Felicidades! Ya ha terminado con el archivo principal de la aplicación. Lo único que queda por hacer es asegurarse de llamar a esta función cuando se haga generateclic en el botón. Solo necesita agregar la línea on_press: root.generate_number()a la parte de selección de botones de su .kvarchivo:
<MyRoot>:
random_label: random_label
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
id: random_label
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15
on_press: root.generate_number()Ahora, puede ejecutar la aplicación.
Compilando nuestra aplicación en Android
Antes de compilar nuestra aplicación en Android, tengo malas noticias para los usuarios de Windows. Necesitará Linux o macOS para compilar su aplicación de Android. Sin embargo, no necesita tener una distribución de Linux separada, en su lugar, puede usar una máquina virtual.
Para compilar y generar una .apkaplicación Android completa , usaremos una herramienta llamada Buildozer . Instalemos Buildozer a través de nuestra terminal usando uno de los siguientes comandos:
pip3 install buildozer
//
pip install buildozerAhora, instalaremos algunas de las dependencias requeridas de Buildozer. Estoy en Linux Ergo, así que usaré comandos específicos de Linux. Debe ejecutar estos comandos uno por uno:
sudo apt update
sudo apt install -y git zip unzip openjdk-13-jdk python3-pip autoconf libtool pkg-config zlib1g-dev libncurses5-dev libncursesw5-dev libtinfo5 cmake libffi-dev libssl-dev
pip3 install --upgrade Cython==0.29.19 virtualenv
# add the following line at the end of your ~/.bashrc file
export PATH=$PATH:~/.local/bin/Después de ejecutar los comandos específicos, ejecute buildozer init. Debería ver un resultado similar a la captura de pantalla a continuación:
Inicialización exitosa de Buildozer
El comando anterior crea un .specarchivo Buildozer , que puede usar para hacer especificaciones para su aplicación, incluido el nombre de la aplicación, el ícono, etc. El .specarchivo debe verse como el bloque de código a continuación:
[app]
# (str) Title of your application
title = My Application
# (str) Package name
package.name = myapp
# (str) Package domain (needed for android/ios packaging)
package.domain = org.test
# (str) Source code where the main.py live
source.dir = .
# (list) Source files to include (let empty to include all the files)
source.include_exts = py,png,jpg,kv,atlas
# (list) List of inclusions using pattern matching
#source.include_patterns = assets/*,images/*.png
# (list) Source files to exclude (let empty to not exclude anything)
#source.exclude_exts = spec
# (list) List of directory to exclude (let empty to not exclude anything)
#source.exclude_dirs = tests, bin
# (list) List of exclusions using pattern matching
#source.exclude_patterns = license,images/*/*.jpg
# (str) Application versioning (method 1)
version = 0.1
# (str) Application versioning (method 2)
# version.regex = __version__ = \['"\](.*)['"]
# version.filename = %(source.dir)s/main.py
# (list) Application requirements
# comma separated e.g. requirements = sqlite3,kivy
requirements = python3,kivy
# (str) Custom source folders for requirements
# Sets custom source for any requirements with recipes
# requirements.source.kivy = ../../kivy
# (list) Garden requirements
#garden_requirements =
# (str) Presplash of the application
#presplash.filename = %(source.dir)s/data/presplash.png
# (str) Icon of the application
#icon.filename = %(source.dir)s/data/icon.png
# (str) Supported orientation (one of landscape, sensorLandscape, portrait or all)
orientation = portrait
# (list) List of service to declare
#services = NAME:ENTRYPOINT_TO_PY,NAME2:ENTRYPOINT2_TO_PY
#
# OSX Specific
#
#
# author = © Copyright Info
# change the major version of python used by the app
osx.python_version = 3
# Kivy version to use
osx.kivy_version = 1.9.1
#
# Android specific
#
# (bool) Indicate if the application should be fullscreen or not
fullscreen = 0
# (string) Presplash background color (for new android toolchain)
# Supported formats are: #RRGGBB #AARRGGBB or one of the following names:
# red, blue, green, black, white, gray, cyan, magenta, yellow, lightgray,
# darkgray, grey, lightgrey, darkgrey, aqua, fuchsia, lime, maroon, navy,
# olive, purple, silver, teal.
#android.presplash_color = #FFFFFF
# (list) Permissions
#android.permissions = INTERNET
# (int) Target Android API, should be as high as possible.
#android.api = 27
# (int) Minimum API your APK will support.
#android.minapi = 21
# (int) Android SDK version to use
#android.sdk = 20
# (str) Android NDK version to use
#android.ndk = 19b
# (int) Android NDK API to use. This is the minimum API your app will support, it should usually match android.minapi.
#android.ndk_api = 21
# (bool) Use --private data storage (True) or --dir public storage (False)
#android.private_storage = True
# (str) Android NDK directory (if empty, it will be automatically downloaded.)
#android.ndk_path =
# (str) Android SDK directory (if empty, it will be automatically downloaded.)
#android.sdk_path =
# (str) ANT directory (if empty, it will be automatically downloaded.)
#android.ant_path =
# (bool) If True, then skip trying to update the Android sdk
# This can be useful to avoid excess Internet downloads or save time
# when an update is due and you just want to test/build your package
# android.skip_update = False
# (bool) If True, then automatically accept SDK license
# agreements. This is intended for automation only. If set to False,
# the default, you will be shown the license when first running
# buildozer.
# android.accept_sdk_license = False
# (str) Android entry point, default is ok for Kivy-based app
#android.entrypoint = org.renpy.android.PythonActivity
# (str) Android app theme, default is ok for Kivy-based app
# android.apptheme = "@android:style/Theme.NoTitleBar"
# (list) Pattern to whitelist for the whole project
#android.whitelist =
# (str) Path to a custom whitelist file
#android.whitelist_src =
# (str) Path to a custom blacklist file
#android.blacklist_src =
# (list) List of Java .jar files to add to the libs so that pyjnius can access
# their classes. Don't add jars that you do not need, since extra jars can slow
# down the build process. Allows wildcards matching, for example:
# OUYA-ODK/libs/*.jar
#android.add_jars = foo.jar,bar.jar,path/to/more/*.jar
# (list) List of Java files to add to the android project (can be java or a
# directory containing the files)
#android.add_src =
# (list) Android AAR archives to add (currently works only with sdl2_gradle
# bootstrap)
#android.add_aars =
# (list) Gradle dependencies to add (currently works only with sdl2_gradle
# bootstrap)
#android.gradle_dependencies =
# (list) add java compile options
# this can for example be necessary when importing certain java libraries using the 'android.gradle_dependencies' option
# see https://developer.android.com/studio/write/java8-support for further information
# android.add_compile_options = "sourceCompatibility = 1.8", "targetCompatibility = 1.8"
# (list) Gradle repositories to add {can be necessary for some android.gradle_dependencies}
# please enclose in double quotes
# e.g. android.gradle_repositories = "maven { url 'https://kotlin.bintray.com/ktor' }"
#android.add_gradle_repositories =
# (list) packaging options to add
# see https://google.github.io/android-gradle-dsl/current/com.android.build.gradle.internal.dsl.PackagingOptions.html
# can be necessary to solve conflicts in gradle_dependencies
# please enclose in double quotes
# e.g. android.add_packaging_options = "exclude 'META-INF/common.kotlin_module'", "exclude 'META-INF/*.kotlin_module'"
#android.add_gradle_repositories =
# (list) Java classes to add as activities to the manifest.
#android.add_activities = com.example.ExampleActivity
# (str) OUYA Console category. Should be one of GAME or APP
# If you leave this blank, OUYA support will not be enabled
#android.ouya.category = GAME
# (str) Filename of OUYA Console icon. It must be a 732x412 png image.
#android.ouya.icon.filename = %(source.dir)s/data/ouya_icon.png
# (str) XML file to include as an intent filters in <activity> tag
#android.manifest.intent_filters =
# (str) launchMode to set for the main activity
#android.manifest.launch_mode = standard
# (list) Android additional libraries to copy into libs/armeabi
#android.add_libs_armeabi = libs/android/*.so
#android.add_libs_armeabi_v7a = libs/android-v7/*.so
#android.add_libs_arm64_v8a = libs/android-v8/*.so
#android.add_libs_x86 = libs/android-x86/*.so
#android.add_libs_mips = libs/android-mips/*.so
# (bool) Indicate whether the screen should stay on
# Don't forget to add the WAKE_LOCK permission if you set this to True
#android.wakelock = False
# (list) Android application meta-data to set (key=value format)
#android.meta_data =
# (list) Android library project to add (will be added in the
# project.properties automatically.)
#android.library_references =
# (list) Android shared libraries which will be added to AndroidManifest.xml using <uses-library> tag
#android.uses_library =
# (str) Android logcat filters to use
#android.logcat_filters = *:S python:D
# (bool) Copy library instead of making a libpymodules.so
#android.copy_libs = 1
# (str) The Android arch to build for, choices: armeabi-v7a, arm64-v8a, x86, x86_64
android.arch = armeabi-v7a
# (int) overrides automatic versionCode computation (used in build.gradle)
# this is not the same as app version and should only be edited if you know what you're doing
# android.numeric_version = 1
#
# Python for android (p4a) specific
#
# (str) python-for-android fork to use, defaults to upstream (kivy)
#p4a.fork = kivy
# (str) python-for-android branch to use, defaults to master
#p4a.branch = master
# (str) python-for-android git clone directory (if empty, it will be automatically cloned from github)
#p4a.source_dir =
# (str) The directory in which python-for-android should look for your own build recipes (if any)
#p4a.local_recipes =
# (str) Filename to the hook for p4a
#p4a.hook =
# (str) Bootstrap to use for android builds
# p4a.bootstrap = sdl2
# (int) port number to specify an explicit --port= p4a argument (eg for bootstrap flask)
#p4a.port =
#
# iOS specific
#
# (str) Path to a custom kivy-ios folder
#ios.kivy_ios_dir = ../kivy-ios
# Alternately, specify the URL and branch of a git checkout:
ios.kivy_ios_url = https://github.com/kivy/kivy-ios
ios.kivy_ios_branch = master
# Another platform dependency: ios-deploy
# Uncomment to use a custom checkout
#ios.ios_deploy_dir = ../ios_deploy
# Or specify URL and branch
ios.ios_deploy_url = https://github.com/phonegap/ios-deploy
ios.ios_deploy_branch = 1.7.0
# (str) Name of the certificate to use for signing the debug version
# Get a list of available identities: buildozer ios list_identities
#ios.codesign.debug = "iPhone Developer: <lastname> <firstname> (<hexstring>)"
# (str) Name of the certificate to use for signing the release version
#ios.codesign.release = %(ios.codesign.debug)s
[buildozer]
# (int) Log level (0 = error only, 1 = info, 2 = debug (with command output))
log_level = 2
# (int) Display warning if buildozer is run as root (0 = False, 1 = True)
warn_on_root = 1
# (str) Path to build artifact storage, absolute or relative to spec file
# build_dir = ./.buildozer
# (str) Path to build output (i.e. .apk, .ipa) storage
# bin_dir = ./bin
# -----------------------------------------------------------------------------
# List as sections
#
# You can define all the "list" as [section:key].
# Each line will be considered as a option to the list.
# Let's take [app] / source.exclude_patterns.
# Instead of doing:
#
#[app]
#source.exclude_patterns = license,data/audio/*.wav,data/images/original/*
#
# This can be translated into:
#
#[app:source.exclude_patterns]
#license
#data/audio/*.wav
#data/images/original/*
#
# -----------------------------------------------------------------------------
# Profiles
#
# You can extend section / key with a profile
# For example, you want to deploy a demo version of your application without
# HD content. You could first change the title to add "(demo)" in the name
# and extend the excluded directories to remove the HD content.
#
#[app@demo]
#title = My Application (demo)
#
#[app:source.exclude_patterns@demo]
#images/hd/*
#
# Then, invoke the command line with the "demo" profile:
#
#buildozer --profile demo android debugSi desea especificar cosas como el ícono, los requisitos, la pantalla de carga, etc., debe editar este archivo. Después de realizar todas las ediciones deseadas en su aplicación, ejecute buildozer -v android debugdesde el directorio de su aplicación para construir y compilar su aplicación. Esto puede llevar un tiempo, especialmente si tiene una máquina lenta.
Una vez finalizado el proceso, su terminal debería tener algunos registros, uno que confirme que la compilación fue exitosa:
Construcción exitosa de Android
También debe tener una versión APK de su aplicación en su directorio bin. Este es el ejecutable de la aplicación que instalará y ejecutará en su teléfono:
Android .apk en el directorio bin
Conclusión
¡Felicidades! Si ha seguido este tutorial paso a paso, debería tener una aplicación simple de generador de números aleatorios en su teléfono. Juega con él y ajusta algunos valores, luego reconstruye. Ejecutar la reconstrucción no llevará tanto tiempo como la primera compilación.
Como puede ver, crear una aplicación móvil con Python es bastante sencillo , siempre que esté familiarizado con el marco o módulo con el que está trabajando. Independientemente, la lógica se ejecuta de la misma manera.
Familiarícese con el módulo Kivy y sus widgets. Nunca se puede saber todo a la vez. Solo necesita encontrar un proyecto y mojarse los pies lo antes posible. Codificación feliz.
Enlace: https://blog.logrocket.com/build-android-application-kivy-python-framework/
1641693600
KivyPythonフレームワークを使用してAndroidアプリケーションを構築する
あなたがモバイル開発を始めることを考えているPython開発者なら、Kivyフレームワークが最善の策です。Kivyを使用すると、iOS、Android、Windows、macOS、およびLinux用にコンパイルされるプラットフォームに依存しないアプリケーションを開発できます。この記事では、Androidが最も使用されているため、特にAndroidについて説明します。
簡単な乱数ジェネレーターアプリを作成します。このアプリを携帯電話にインストールして、完了したらテストできます。この記事を続けるには、Pythonに精通している必要があります。始めましょう！
Kivyを使い始める
まず、アプリ用の新しいディレクトリが必要になります。マシンにPythonがインストールされていることを確認し、新しいPythonファイルを開きます。以下のコマンドのいずれかを使用して、ターミナルからKivyモジュールをインストールする必要があります。パッケージの競合を避けるために、Kivyを仮想環境にインストールしていることを確認してください。
pip install kivy
//
pip3 install kivy Kivyをインストールすると、以下のスクリーンショットのような成功メッセージがターミナルから表示されます。
がっかりしたインストール
Kivyのインストールに成功
次に、プロジェクトフォルダに移動します。このmain.pyファイルで、Kivyモジュールをインポートし、必要なバージョンを指定する必要があります。Kivy v2.0.0を使用できますが、Android 8.0より古いスマートフォンを使用している場合は、Kivyv1.9.0を使用することをお勧めします。ビルド中にさまざまなバージョンをいじって、機能とパフォーマンスの違いを確認できます。
import kivy次のように、行の直後にバージョン番号を追加します。
kivy.require('1.9.0')次に、基本的にアプリを定義するクラスを作成します。私の名前を付けますRandomNumber。このクラスはappKivyからクラスを継承します。したがって、次appを追加してインポートする必要がありますfrom kivy.app import App。
class RandomNumber(App): ではRandomNumberクラスは、呼び出された関数を追加する必要がありますbuildとり、selfパラメータを。実際にUIを返すには、このbuild関数を使用します。今のところ、単純なラベルとして返送しています。そのためには、次Labelの行を使用してインポートする必要がありますfrom kivy.uix.label import Label。
import kivy
from kivy.app import App
from kivy.uix.label import Label
class RandomNumber(App):
def build(self):
return Label(text="Random Number Generator")これで、アプリのスケルトンが完成しました。先に進む前に、RandomNumberクラスのインスタンスを作成し、ターミナルまたはIDEで実行して、インターフェイスを確認する必要があります。
import kivy from kivy.app import App from kivy.uix.label import Label class RandomNumber（App）：def build（self）：return Label（text = "Random Number Generator"）randomApp = RandomNumber（）randomApp.run（）
テキストを使用してクラスインスタンスを実行すると、Random Number Generator次のスクリーンショットのような単純なインターフェイスまたはウィンドウが表示されます。
コードを実行した後のシンプルなインターフェイス
すべての構築が完了するまで、Androidでテキストを実行することはできません。
インターフェースのアウトソーシング
次に、インターフェースをアウトソーシングする方法が必要になります。まず、ディレクトリにKivyファイルを作成します。このファイルには、ほとんどの設計作業が含まれています。このファイルには、小文字と.kv拡張子を使用して、クラスと同じ名前を付けることができます。Kivyはクラス名とファイル名を自動的に関連付けますが、それらがまったく同じである場合、Androidでは機能しない可能性があります。
その.kvファイル内で、ラベル、ボタン、フォームなどの要素を含むアプリのレイアウトを指定する必要があります。このデモを簡単にするために、タイトルRandom Numberのラベル、プレースホルダーとして機能するラベルを追加します。生成される乱数_、および関数Generateを呼び出すボタンgenerate。
私の.kvファイルは以下のコードのように見えますが、要件に合わせてさまざまな値をいじることができます。
<boxLayout>:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15 このmain.pyファイルではLabel、KivyファイルがUIを処理するため、importステートメントは不要になりました。ただし、boxlayoutKivyファイルで使用するをインポートする必要があります。
メインファイルで、importステートメントを追加し、main.pyファイルを編集return BoxLayout()してbuildメソッドで読み取る必要があります。
from kivy.uix.boxlayout import BoxLayout上記のコマンドを実行すると、乱数のタイトル、_プレースホルダー、およびクリック可能なgenerateボタンを備えたシンプルなインターフェイスが表示されます。
レンダリングされた乱数アプリ
Kivyファイルを機能させるために何もインポートする必要がなかったことに注意してください。基本的に、アプリを実行するboxlayoutと、クラスと同じ名前のKivyファイル内のファイルを検索して戻ります。これはシンプルなインターフェースであり、アプリを必要に応じて堅牢にすることができます。Kv言語のドキュメントを必ず確認してください。
乱数関数を生成する
アプリがほぼ完成したので、ユーザーがgenerateボタンをクリックしたときに乱数を生成し、その乱数をアプリのインターフェイスにレンダリングする簡単な関数が必要になります。そのためには、ファイル内のいくつかの変更を行う必要があります。
まず、で乱数を生成するために使用するモジュールをインポートしますimport random。次に、生成された番号を呼び出す関数またはメソッドを作成します。このデモでは、私は間の範囲を使用します0と2000。このrandom.randint(0, 2000)コマンドを使用すると、乱数を簡単に生成できます。これをすぐにコードに追加します。
次に、独自のバージョンとなる別のクラスを作成しますbox layout。このbox layoutクラスは、乱数を生成してインターフェイス上でレンダリングするメソッドを含むクラスを継承する必要があります。
class MyRoot(BoxLayout):
def __init__(self):
super(MyRoot, self).__init__()そのクラス内で、generate乱数を生成するだけでなく、Kivyファイルに乱数として表示されるものを制御するラベルを操作するメソッドを作成します。
この方法に対応するには、最初に.kvファイルに変更を加える必要があります。以来MyRootクラスが継承しているbox layout、あなたが作ることができるMyRootあなたのトップレベルの要素.kvファイルを：
<MyRoot>:
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15でインデントされたすべてのUI仕様を保持していることに注意してくださいBox Layout。この後、生成された番号を保持するIDをラベルに追加して、generate関数が呼び出されたときに簡単に操作できるようにする必要があります。このファイルのIDと、上部のメインコードの別のIDとの関係を、次のBoxLayout行の直前に指定する必要があります。
<MyRoot>:
random_label: random_label
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
id: random_label
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15このrandom_label: random_label行は基本的に、IDrandom_labelを持つラベルがファイルrandom_label内にマップされることをmain.py意味します。つまり、操作random_labelするアクションはすべて、指定された名前のラベルにマップされます。
これで、メインファイルに乱数を生成するメソッドを作成できます。
def generate_number(self):
self.random_label.text = str(random.randint(0, 2000))
# notice how the class method manipulates the text attributre of the random label by a# ssigning it a new random number generate by the 'random.randint(0, 2000)' funcion. S# ince this the random number generated is an integer, typecasting is required to make # it a string otherwise you will get a typeError in your terminal when you run it.MyRootこのクラスは、以下のコードのようになります。
class MyRoot(BoxLayout):
def __init__(self):
super(MyRoot, self).__init__()
def generate_number(self):
self.random_label.text = str(random.randint(0, 2000))おめでとう！これで、アプリのメインファイルが完成しました。あとは、generateボタンがクリックされたときに必ずこの関数を呼び出すようにしてください。ファイルのon_press: root.generate_number()ボタン選択部分に行を追加するだけで済み.kvます。
<MyRoot>:
random_label: random_label
BoxLayout:
orientation: "vertical"
Label:
text: "Random Number"
font_size: 30
color: 0, 0.62, 0.96
Label:
id: random_label
text: "_"
font_size: 30
Button:
text: "Generate"
font_size: 15
on_press: root.generate_number()これで、アプリを実行できます。
Androidでアプリをコンパイルする
Androidでアプリをコンパイルする前に、Windowsユーザーにとって悪いニュースがあります。Androidアプリケーションをコンパイルするには、LinuxまたはmacOSが必要です。ただし、個別のLinuxディストリビューションを用意する必要はなく、代わりに仮想マシンを使用できます。
完全なAndroid.apkアプリケーションをコンパイルして生成するには、Buildozerというツールを使用します。以下のコマンドのいずれかを使用して、ターミナルからBuildozerをインストールしましょう。
pip3 install buildozer
//
pip install buildozer次に、Buildozerに必要な依存関係のいくつかをインストールします。私はLinuxErgoを使用しているので、Linux固有のコマンドを使用します。これらのコマンドを1つずつ実行する必要があります。
sudo apt update
sudo apt install -y git zip unzip openjdk-13-jdk python3-pip autoconf libtool pkg-config zlib1g-dev libncurses5-dev libncursesw5-dev libtinfo5 cmake libffi-dev libssl-dev
pip3 install --upgrade Cython==0.29.19 virtualenv
# add the following line at the end of your ~/.bashrc file
export PATH=$PATH:~/.local/bin/特定のコマンドを実行した後、を実行しbuildozer initます。以下のスクリーンショットのような出力が表示されます。
Buildozerの初期化が成功しました
上記のコマンドはBuildozer.specファイルを作成します。このファイルを使用して、アプリの名前やアイコンなどをアプリに指定.specできます。ファイルは次のコードブロックのようになります。
[app]
# (str) Title of your application
title = My Application
# (str) Package name
package.name = myapp
# (str) Package domain (needed for android/ios packaging)
package.domain = org.test
# (str) Source code where the main.py live
source.dir = .
# (list) Source files to include (let empty to include all the files)
source.include_exts = py,png,jpg,kv,atlas
# (list) List of inclusions using pattern matching
#source.include_patterns = assets/*,images/*.png
# (list) Source files to exclude (let empty to not exclude anything)
#source.exclude_exts = spec
# (list) List of directory to exclude (let empty to not exclude anything)
#source.exclude_dirs = tests, bin
# (list) List of exclusions using pattern matching
#source.exclude_patterns = license,images/*/*.jpg
# (str) Application versioning (method 1)
version = 0.1
# (str) Application versioning (method 2)
# version.regex = __version__ = \['"\](.*)['"]
# version.filename = %(source.dir)s/main.py
# (list) Application requirements
# comma separated e.g. requirements = sqlite3,kivy
requirements = python3,kivy
# (str) Custom source folders for requirements
# Sets custom source for any requirements with recipes
# requirements.source.kivy = ../../kivy
# (list) Garden requirements
#garden_requirements =
# (str) Presplash of the application
#presplash.filename = %(source.dir)s/data/presplash.png
# (str) Icon of the application
#icon.filename = %(source.dir)s/data/icon.png
# (str) Supported orientation (one of landscape, sensorLandscape, portrait or all)
orientation = portrait
# (list) List of service to declare
#services = NAME:ENTRYPOINT_TO_PY,NAME2:ENTRYPOINT2_TO_PY
#
# OSX Specific
#
#
# author = © Copyright Info
# change the major version of python used by the app
osx.python_version = 3
# Kivy version to use
osx.kivy_version = 1.9.1
#
# Android specific
#
# (bool) Indicate if the application should be fullscreen or not
fullscreen = 0
# (string) Presplash background color (for new android toolchain)
# Supported formats are: #RRGGBB #AARRGGBB or one of the following names:
# red, blue, green, black, white, gray, cyan, magenta, yellow, lightgray,
# darkgray, grey, lightgrey, darkgrey, aqua, fuchsia, lime, maroon, navy,
# olive, purple, silver, teal.
#android.presplash_color = #FFFFFF
# (list) Permissions
#android.permissions = INTERNET
# (int) Target Android API, should be as high as possible.
#android.api = 27
# (int) Minimum API your APK will support.
#android.minapi = 21
# (int) Android SDK version to use
#android.sdk = 20
# (str) Android NDK version to use
#android.ndk = 19b
# (int) Android NDK API to use. This is the minimum API your app will support, it should usually match android.minapi.
#android.ndk_api = 21
# (bool) Use --private data storage (True) or --dir public storage (False)
#android.private_storage = True
# (str) Android NDK directory (if empty, it will be automatically downloaded.)
#android.ndk_path =
# (str) Android SDK directory (if empty, it will be automatically downloaded.)
#android.sdk_path =
# (str) ANT directory (if empty, it will be automatically downloaded.)
#android.ant_path =
# (bool) If True, then skip trying to update the Android sdk
# This can be useful to avoid excess Internet downloads or save time
# when an update is due and you just want to test/build your package
# android.skip_update = False
# (bool) If True, then automatically accept SDK license
# agreements. This is intended for automation only. If set to False,
# the default, you will be shown the license when first running
# buildozer.
# android.accept_sdk_license = False
# (str) Android entry point, default is ok for Kivy-based app
#android.entrypoint = org.renpy.android.PythonActivity
# (str) Android app theme, default is ok for Kivy-based app
# android.apptheme = "@android:style/Theme.NoTitleBar"
# (list) Pattern to whitelist for the whole project
#android.whitelist =
# (str) Path to a custom whitelist file
#android.whitelist_src =
# (str) Path to a custom blacklist file
#android.blacklist_src =
# (list) List of Java .jar files to add to the libs so that pyjnius can access
# their classes. Don't add jars that you do not need, since extra jars can slow
# down the build process. Allows wildcards matching, for example:
# OUYA-ODK/libs/*.jar
#android.add_jars = foo.jar,bar.jar,path/to/more/*.jar
# (list) List of Java files to add to the android project (can be java or a
# directory containing the files)
#android.add_src =
# (list) Android AAR archives to add (currently works only with sdl2_gradle
# bootstrap)
#android.add_aars =
# (list) Gradle dependencies to add (currently works only with sdl2_gradle
# bootstrap)
#android.gradle_dependencies =
# (list) add java compile options
# this can for example be necessary when importing certain java libraries using the 'android.gradle_dependencies' option
# see https://developer.android.com/studio/write/java8-support for further information
# android.add_compile_options = "sourceCompatibility = 1.8", "targetCompatibility = 1.8"
# (list) Gradle repositories to add {can be necessary for some android.gradle_dependencies}
# please enclose in double quotes
# e.g. android.gradle_repositories = "maven { url 'https://kotlin.bintray.com/ktor' }"
#android.add_gradle_repositories =
# (list) packaging options to add
# see https://google.github.io/android-gradle-dsl/current/com.android.build.gradle.internal.dsl.PackagingOptions.html
# can be necessary to solve conflicts in gradle_dependencies
# please enclose in double quotes
# e.g. android.add_packaging_options = "exclude 'META-INF/common.kotlin_module'", "exclude 'META-INF/*.kotlin_module'"
#android.add_gradle_repositories =
# (list) Java classes to add as activities to the manifest.
#android.add_activities = com.example.ExampleActivity
# (str) OUYA Console category. Should be one of GAME or APP
# If you leave this blank, OUYA support will not be enabled
#android.ouya.category = GAME
# (str) Filename of OUYA Console icon. It must be a 732x412 png image.
#android.ouya.icon.filename = %(source.dir)s/data/ouya_icon.png
# (str) XML file to include as an intent filters in <activity> tag
#android.manifest.intent_filters =
# (str) launchMode to set for the main activity
#android.manifest.launch_mode = standard
# (list) Android additional libraries to copy into libs/armeabi
#android.add_libs_armeabi = libs/android/*.so
#android.add_libs_armeabi_v7a = libs/android-v7/*.so
#android.add_libs_arm64_v8a = libs/android-v8/*.so
#android.add_libs_x86 = libs/android-x86/*.so
#android.add_libs_mips = libs/android-mips/*.so
# (bool) Indicate whether the screen should stay on
# Don't forget to add the WAKE_LOCK permission if you set this to True
#android.wakelock = False
# (list) Android application meta-data to set (key=value format)
#android.meta_data =
# (list) Android library project to add (will be added in the
# project.properties automatically.)
#android.library_references =
# (list) Android shared libraries which will be added to AndroidManifest.xml using <uses-library> tag
#android.uses_library =
# (str) Android logcat filters to use
#android.logcat_filters = *:S python:D
# (bool) Copy library instead of making a libpymodules.so
#android.copy_libs = 1
# (str) The Android arch to build for, choices: armeabi-v7a, arm64-v8a, x86, x86_64
android.arch = armeabi-v7a
# (int) overrides automatic versionCode computation (used in build.gradle)
# this is not the same as app version and should only be edited if you know what you're doing
# android.numeric_version = 1
#
# Python for android (p4a) specific
#
# (str) python-for-android fork to use, defaults to upstream (kivy)
#p4a.fork = kivy
# (str) python-for-android branch to use, defaults to master
#p4a.branch = master
# (str) python-for-android git clone directory (if empty, it will be automatically cloned from github)
#p4a.source_dir =
# (str) The directory in which python-for-android should look for your own build recipes (if any)
#p4a.local_recipes =
# (str) Filename to the hook for p4a
#p4a.hook =
# (str) Bootstrap to use for android builds
# p4a.bootstrap = sdl2
# (int) port number to specify an explicit --port= p4a argument (eg for bootstrap flask)
#p4a.port =
#
# iOS specific
#
# (str) Path to a custom kivy-ios folder
#ios.kivy_ios_dir = ../kivy-ios
# Alternately, specify the URL and branch of a git checkout:
ios.kivy_ios_url = https://github.com/kivy/kivy-ios
ios.kivy_ios_branch = master
# Another platform dependency: ios-deploy
# Uncomment to use a custom checkout
#ios.ios_deploy_dir = ../ios_deploy
# Or specify URL and branch
ios.ios_deploy_url = https://github.com/phonegap/ios-deploy
ios.ios_deploy_branch = 1.7.0
# (str) Name of the certificate to use for signing the debug version
# Get a list of available identities: buildozer ios list_identities
#ios.codesign.debug = "iPhone Developer: <lastname> <firstname> (<hexstring>)"
# (str) Name of the certificate to use for signing the release version
#ios.codesign.release = %(ios.codesign.debug)s
[buildozer]
# (int) Log level (0 = error only, 1 = info, 2 = debug (with command output))
log_level = 2
# (int) Display warning if buildozer is run as root (0 = False, 1 = True)
warn_on_root = 1
# (str) Path to build artifact storage, absolute or relative to spec file
# build_dir = ./.buildozer
# (str) Path to build output (i.e. .apk, .ipa) storage
# bin_dir = ./bin
# -----------------------------------------------------------------------------
# List as sections
#
# You can define all the "list" as [section:key].
# Each line will be considered as a option to the list.
# Let's take [app] / source.exclude_patterns.
# Instead of doing:
#
#[app]
#source.exclude_patterns = license,data/audio/*.wav,data/images/original/*
#
# This can be translated into:
#
#[app:source.exclude_patterns]
#license
#data/audio/*.wav
#data/images/original/*
#
# -----------------------------------------------------------------------------
# Profiles
#
# You can extend section / key with a profile
# For example, you want to deploy a demo version of your application without
# HD content. You could first change the title to add "(demo)" in the name
# and extend the excluded directories to remove the HD content.
#
#[app@demo]
#title = My Application (demo)
#
#[app:source.exclude_patterns@demo]
#images/hd/*
#
# Then, invoke the command line with the "demo" profile:
#
#buildozer --profile demo android debugアイコン、要件、ロード画面などを指定する場合は、このファイルを編集する必要があります。アプリケーションに必要なすべての編集を行った後buildozer -v android debug、アプリディレクトリから実行して、アプリケーションをビルドおよびコンパイルします。特に低速のマシンを使用している場合は、これに時間がかかることがあります。
プロセスが完了すると、端末にいくつかのログが表示され、ビルドが成功したことを確認できます。
Androidの成功したビルド
また、binディレクトリにアプリのAPKバージョンが必要です。これは、携帯電話にインストールして実行するアプリケーションの実行可能ファイルです。
binディレクトリのAndroid.apk
結論
おめでとう！このチュートリアルをステップバイステップで実行した場合は、電話に単純な乱数ジェネレーターアプリがインストールされているはずです。それをいじって、いくつかの値を微調整してから、再構築してください。再構築の実行は、最初のビルドほど時間はかかりません。
ご覧のとおり、Pythonを使用したモバイルアプリケーションの構築は、使用しているフレームワークまたはモジュールに精通している限り、かなり簡単です。とにかく、ロジックは同じ方法で実行されます。
Kivyモジュールとそのウィジェットに慣れてください。すべてを一度に知ることはできません。プロジェクトを見つけて、できるだけ早く足を濡らすだけです。ハッピーコーディング。
リンク：https：//blog.logrocket.com/build-android-application-kivy-python-framework/
1620968589
Get a Bug Free and smooth website with website Maintenance
Having a website for your own firm or business is very important as it can benefit you in many ways like your users can get 24/7 service from your company, you can exchange your information, it can help you to expand your business in the market. One must also maintain their website to keep it bug free and updated.
Your website should be bug free because if there is any bug in your website it will slow down the performance of it and will not even work properly if this happens then there are chances that you may lose your customers.
Are you searching for a company that can provide you with website support and maintenance? Nevina Infotech is the best company that can help you with the maintenance and support, as we have enthusiastic web app developers who can help you to maintain your website.
#website maintenance services #website support and maintenance #website maintenance support #website maintenance packages #website maintenance company #website maintenance plans