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

Related tags

Templates motion
Overview

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 !

Comments
  • Broken example on Android

    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?

    opened by sebastianbuechler 4
  • Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.

    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.

    opened by sebastianbuechler 2
  • Not able to render motion widget on flutter web

    Not able to render motion widget on flutter web

    The image from local assets loads correctly without Motion widget, but after adding it, only black screen appears in web, works on macos, mobile. Please refer to both screenshots for reference as I'm not getting any error logs. Screen Shot 2022-09-21 at 9 02 03

AM

    opened by roshandroids 1
  • Readme Update

    Readme Update

    Hi, There is one error in Doc : Visit Here

    Error :

    void main() {
    
      /// Initialize the plugin.
      await Motion.initialize();  ❌
    
      /// Globally set the sensors sampling rate to 60 frames per second.
      Motion.setUpdateInterval(60.fps); ❌
    
      /// Run the app.
      runApp(...);
    }
    

    Update (.instance)

    void main() async {
      WidgetsFlutterBinding.ensureInitialized();
    
      /// Initialize the plugin to determine gyroscope availability.
      await Motion.instance.initialize(); ✅
    
      /// Globally set Motion's update interval to 60 frames per second.
      Motion.instance.setUpdateInterval(60.fps); ✅
      
    runApp(const MyApp());
    }
    
    opened by red-star25 0
  • Tilt & Hold Position? Or Tilt to Pan?

    Tilt & Hold Position? Or Tilt to Pan?

    Hi, wondering if it's possible that when you tilt and keep it tilted that the position stays until you tilt it back to origin? This could be fun to be able to peek behind things or pan around a widget.

    opened by jtkeyva 0
  • MacOS / Linux / Windows Support?

    MacOS / Linux / Windows Support?

    Hello,

    Thanks for this! The hover_effect package is pretty old with no null safety so this is a welcome addition and even better, the gyroscope support!!

    Any plans to support the other platforms?

    opened by jtkeyva 0
Owner
Guillaume Cendre
Space Designer + Software Engineer
Guillaume Cendre
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

Ronak Punase 31 Oct 18, 2022
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

Favour Olukayode 1 Apr 28, 2022
In this project, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your own parallax effect without using external libraries.

Travel App UI In this part, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your ow

DebugErrorX 5 Dec 5, 2022
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

Yen Dang 4 Oct 26, 2020
Codeflow 19 Sep 29, 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

Mahmoud Elsaramegy 0 Dec 2, 2021
Neha Tanwar 4 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.

Glenford Williams 4 Mar 26, 2021
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;

null 10 Nov 26, 2022
Flutter Faux Self App Naked Eye 3D Effect

Flutter Faux Self App Naked Eye 3D Effect

FlutterCandies 146 Jan 9, 2023
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

chaoxiang wen 194 Jan 2, 2023
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

Le Anh Tuan 4 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.

唯鹿 165 Jan 2, 2023
Hero Effect for common words of two Text (Flutter)

Hero Effect for common words of text widget (something like magic move in keynote) Features Usage Usage is easily and likes Hero,but obviously the chi

null 7 Oct 12, 2022
Bottom navigation bar with sliding clip effect.

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

Watery Desert 55 Dec 3, 2022
Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

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

Shubham Soni 7 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

ClickUp 24 Dec 14, 2022
This is a view pager provides carousel effect and dismissal animation when page was removed.

This is a view pager provides carousel effect and dismissal animation when page was removed. Features Carousel effect Horizontal Vertical Dismissal an

Zhe-Yi, Zhu 4 Dec 22, 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

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

Pooja Bhaumik 815 Jan 3, 2023