A Flutter plugin to apply a gyroscope-based motion effect to widgets.

Last update: Aug 5, 2022

Motion for Flutter widgets

pub package

This package adds a new Motion widget that applies a gyroscope-based effect to Flutter widgets. On desktop or when the gyroscope in not available, the effect is based on the pointer's hovering.

"Demo of the Motion plugin"

To see examples of the following effect on a device or simulator:

cd example/
flutter run --release

How to use

First, add the dependency to your pubspec.yaml file:

dependencies:
  motion: ^<latest-version>

Then, wrap your target widget as child of a Motion widget. You may optionally provide a MotionController instance that will hold your widget's transformations. The simplest usage of this widget is the following :

import 'package:motion/motion.dart';

...

return Motion(child: myWidget);

Elevation

To remain consistent with the Material design language, you can pass an elevation parameter to the widget by using the Motion.elevated constructor.

It will influence the offset, opacity and blurriness of the shadow. Possible values for elevation range between 0 and 100.

"Elevations examples"

Comparing different elevation values

Shadow

The shadow is optional and depends, when using the Motion.elevated constructor, on the elevation value. The higher the elevation, the blurrier and the lower from behind the widget the shadow will get. The amplitude of the shadow's movement also depends on the widget's elevation. This aims to achieve the same behavior as Material design language's notion of elevation.

"Shadow effect comparison"

Comparing with and without the shadow effect

By default, the shadow is enabled but you can disable it by constructing the Motion widget with shadow: null or by using the Motion.only constructor.

Glare

The glare effect is also optional. It is a very subtle gradient overlay that confers a reflective feel to the widget.

"Glare effect comparison"

Comparing with and without the glare effect

Also enabled by default, you can disable this effect by constructing the Motion widget with glare: false or by using the Motion.only constructor.

Custom configurations

You can provide custom configurations for the glare, shadow and translation effects by passing GlareConfiguration, ShadowConfiguration and TranslationConfiguration to the Motion and Motion.only constructors. When omitted, the default values will be used, unless if you use the Motion.only constructor.

Issues

If you are having any problem with the Motion package, you can file an issue on the package repo's issue tracker.

Please make sure that your concern hasn't already been addressed in the 'Closed' section.

Credits

This package was developed with by @mrcendre.

Thanks to @sebstianbuechler for his contribution !

GitHub

https://github.com/mrcendre/motion
You might also like...

A package provides an easy way to add shimmer effect in Flutter project

flutter_shimmer_widget A package provides an easy way to add shimmer effect in Flutter project Getting Started Animation Example Project There is a ex

Jun 29, 2022

Flutter remote control - The main use of LongPressDraggable and DragTarget to achieve the universal remote control interaction effect.

Flutter remote control - The main use of LongPressDraggable and DragTarget to achieve the universal remote control interaction effect.

Flutter remote control - The main use of LongPressDraggable and DragTarget to achieve the universal remote control interaction effect.

Jul 22, 2022

Bottom navigation bar with sliding clip effect.

Bottom navigation bar with sliding clip effect.

Sliding Clipped Nav Bar Design Credit Toolbar icons animation by Cuberto How to use? API reference barItems → ListBarItem List of bar items that sho

Jul 12, 2022

Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

Animated Shimmer Supports Null Safety A simple & lightweight widget to display a

Apr 27, 2022

Add a fading effect when the user can scroll.

Add a fading effect when the user can scroll. Demo Quickstart Add the dependency to fading_scroll to your pubspec.yaml file. flutter pub add clickup_f

Jul 27, 2022

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Aug 15, 2022

Widgets intermediate - Intermediate Widgets For Flutter

Widgets intermediate - Intermediate Widgets For Flutter

Intermediate Widgets 4-MODUL 5-LESSON Alert Dialog (Android & IOS) Drawer Single

Feb 6, 2022

Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

Aug 8, 2022

Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

Aug 8, 2022
Comments
  • 1. Broken example on Android

    The current main a has a broken example because of some recent changes (the new Motion.elevated constructor and undefined hitTestBehavior parameter in MouseRegion).

    However, when fixing them I also get a general error while running with Flutter 2.10.5:

    This app is using a deprecated version of the Android embedding.
    To avoid unexpected runtime failures, or future build failures, try to migrate this app to the V2 embedding.
    Take a look at the docs for migrating an app: https://github.com/flutter/flutter/wiki/Upgrading-pre-1.12-Android-projects  
    

    And additionally:

    The detected reason was:
    
      No `...\motion\example\android\AndroidManifest.xml` file
    

    Is it possible that the example was only tested for iOS?

    Reviewed by sebastianbuechler at 2022-07-26 09:20
  • 2. Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.

    When running with Flutter 2.10.5 I get an error because of null safety. Is this package really compatible with Flutter version < 3.0.0?

    Launching lib\main.dart on Emulator in debug mode...
    lib\main.dart:1
    /C:/src/flutter/.pub-cache/hosted/pub.dev/motion-1.1.1/lib/src/utils/measure.dart:20:29: Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.
    - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/C:/src/flutter/packages/flutter/lib/src/widgets/binding.dart').
    package:flutter/…/widgets/binding.dart:1
    Try calling using ?. instead.
        WidgetsBinding.instance.addPostFrameCallback((_) {
                                ^^^^^^^^^^^^^^^^^^^^
    3
    
    FAILURE: Build failed with an exception.
    
    * Where:
    Script 'C:\src\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 1102
    
    * What went wrong:
    Execution failed for task ':app:compileFlutterBuildProdDebug'.
    > Process 'command 'C:\src\flutter\bin\flutter.bat'' finished with non-zero exit value 1
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
    
    * Get more help at https://help.gradle.org
    
    BUILD FAILED in 1m 1s
    
    

    I saw for another package https://stackoverflow.com/questions/72256150/flutter-error-method-addpostframecallback-cannot-be-called-on-widgetsbinding that this issue was appearing as part of Flutter v2 vs v3.

    Reviewed by sebastianbuechler at 2022-07-21 13:33

Related

Fancy list loading effect or The Shimmer Effect in Flutter
Fancy list loading effect or The Shimmer Effect in Flutter

Shimmer Effect in Shimmer Effect is really cool placeholder effect that you can show when you are loading data in the form of a list. To do it in flut

Jul 30, 2022
The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.
The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.

KenBurns The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. First add to your dependencies: dep

Apr 28, 2022
This repository show you how apply MVP to Flutter project
This repository show you how  apply MVP  to  Flutter project

Flutter MVP demo Apply MVP to Flutter project. To easy understand this project, you can visit my other project first which talk about ListView on Flut

Oct 26, 2020
Apr 7, 2022
Apply my lesson

saramegy_calcutor A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

Dec 2, 2021
Feb 2, 2022
Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.
Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.

Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.

Mar 26, 2021
Drop shadow effect for any widget in Flutter
Drop shadow effect for any widget in Flutter

DropShadow Drop shadow effect for any widget in flutter Parameters Widget child; // required double blurRadius; // default: 10.0 double borderRadius;

Dec 18, 2021
Flutter Faux Self App Naked Eye 3D Effect
Flutter Faux Self App Naked Eye 3D Effect

Flutter Faux Self App Naked Eye 3D Effect

Aug 5, 2022
A custom navigation bar with bubble click effect in Flutter
A custom navigation bar with bubble click effect in Flutter

custom_navigation_bar A custom navigation bar with bubble click effect. Overview This project is inspired by this post from Dribbble and The Boring Fl

Jul 29, 2022