touch_indicator 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 69

touch_indicator #

When you are recording a screencast of your app, you often want to give visual indication of where your fingers are touching the screen. Showing that on Android is easy. On iOS it's less intuitive. touch_indicator makes it easier and consistent on both platforms.

You add this widget as the main widget where you want to display user touches. Usually this will be the direct child of your MaterialApp. It will show an indicator on every touching finger and is completely customizable.

Installation #

Add the plugin to your pubspec.yaml:

dependencies:
  touch_indicator: ^1.0.2

Usage #

Import the package in your Dart code:

import 'package:touch_indicator/touch_indicator.dart';

Wrap your app in the TouchIndicator widget:

class MyApp extends StatelessWidget {
  MaterialApp(
    title: 'Touch indicator example',
    home: TouchIndicator(
      child: MyHomePage(title: 'Flutter Demo Home Page'),
    ),
  );
}

Customization options #

indicatorColor #

Changes the color of the backdrop and icon. Default is Colors.blueGrey.

indicatorSize #

Changes the size of the indicator. Default is 40.0.

indicator #

By adding a Widget here, you can change the complete look of the touch indicators. Make sure to supply a proper indicatorSize in order for the indicators to be positioned at the center of your touchpoints.

forceInReleaseMode #

When you want to show indicators when the app is running in release mode, make sure to enable this option. Default is false.

enabled #

You can enable or disable display of the indicators on the fly with this option. Default is true.

1.0.2 #

Maintenance release for pub.dev.

1.0.1 #

Prevents showing indicators in release mode, unless the forceInReleaseMode option is used. Use the enabled option to show or hide the indicators.

1.0.0 #

Initial release. Shows up to 5 touch indicators that are customizable (size, color and complete change of indicator).

example/main.dart

import 'package:flutter/material.dart';
import 'package:touch_indicator/touch_indicator.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: TouchIndicator(
        // forceInReleaseMode: true,
        // enabled: true,
        // indicatorSize: 80,
        // indicatorColor: Colors.deepOrange,
        child: MyHomePage(
          title: 'Flutter Demo Home Page',
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  touch_indicator: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:touch_indicator/touch_indicator.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
37
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
69
Learn more about scoring.

We analyzed this package on Oct 21, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test
pedantic ^1.4.0