Flutter webpage with interactive examples

Tomek Polański

Last update: Nov 11, 2022

Related tags

Animation flutter-animations

Overview

Flutter Animations Cheat Sheet

This is a list of animations and transitions that you can used in Flutter.

Available as a webpage. The content of the page is searchable.

Building

Last tested version of Flutter that works with this repo is 2.1.0-12.2.pre:

Important: You cannot be on beta/stable channel to run flutter desktop - check out how to switch to a specific version.

Building for Web

Upgrade flutter to minimum 2.1.0-12.2.pre, enable web compilation and run:

flutter version 2.1.0-12.2.pre
flutter run -d chrome -v

Building for Desktop

Linux

Add the following to .bash_profile replacing $HOME/flutter/ with path to your Flutter folder.

# Add Flutter
export PATH="$PATH:$HOME/flutter/bin"
# Add Dart
export PATH="$PATH:$HOME/flutter/bin/cache/dart-sdk/bin"

Mac

Add the following to .bash_profile replacing $HOME/flutter/ with path to your Flutter folder.

# Add Flutter
export PATH="$PATH:$HOME/flutter/bin"
# Add Dart
export PATH="$PATH:$HOME/flutter/bin/cache/dart-sdk/bin"

Update CocoaPods:

brew upgrade cocoapods
pod setup
gem install cocoapods

Windows

Install Visual Studio Community 2019 with Desktop development with C++. Make sure that those components are installed:

MSVC v142 - VS 2019 C++ x64/x86 build tools (v14.23)
Windows 10 SDK (10.0.17763.0)

Running on Desktop

Enter flutter-animations in your terminal and run flutter run. You might need to use -d to pick desktop if you have any other device connected.

Open in your ide flutter-animations In IntelliJ/VS Code select appropriate device via device picker and run the app.

Running Flutter Driver tests on Desktop

Installing fast_flutter_driver script:

pub global activate fast_flutter_driver_tool
flutter packages get

Running:

fastdriver -r 800x800

A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Apr 26, 2022

Flutter UI Challenges

Introduction 🐼 Zoo is a small, simple and beautiful app that lists 3d model of animals. Before we start, you can take a look at the app: Usage 🎨 To

Dec 22, 2022

A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with 🔥 in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Sep 23, 2022

Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Nov 14, 2022

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Jan 4, 2023

💙 Google Classroom Clone using Flutter, GCP

Introduction 🚀 Classroom is a Google Classroom clone built using 💙 Flutter. Before we start, you can take a look at the app: Screenshots 🗻 Key Feat

Dec 14, 2022

Animated Menu in Flutter using radial.

Animated_radial_Menu_in_Flutter Animated Menu in Flutter using radial. Getting Started This project is a starting point for a Flutter application. A f

Jul 18, 2022

Cool 3D Drawer Animated With flutter part 2 🔥 🔥

Nov 22, 2022

🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

🐱‍👤 Staggered Animations made with algeria ❤

Nov 22, 2022

Comments

Jetson Nano- demo page not fully loaded in Firefox

Hi T! Sending you a juicy virtual steak...

The online test page you have work in Chromium but not Firefox. No scrolling, no animation, only the first demo display before something bombs. Flutter beta pains?

Firefox and Chromium on Nano (ARM) display flutter web graphs just fine on the Nano. I did not test extensively other Flutter parts on this platform. Results on Raspberry Pi are likely similar.

opened by paulirotta 2