Как создать кнопку тройного щелчка во флаттере

Question

Как мне реализовать кнопку с тремя щелчками во флаттере?

При тройном нажатии кнопка сохранит запись в базе данных Firebase.

Answer 1

Это довольно легко. Вы можете использовать GestureDetector() для проверки количества нажатий, затем вы можете указать свою логику c, если есть 3 нажатия.

GestureDetector(
        onTap: () {
          int now = DateTime.now().millisecondsSinceEpoch;
          if (now - lastTap < 1000) {
            print("Consecutive tap");
            consecutiveTaps ++;
            print("taps = " + consecutiveTaps.toString());
            if (consecutiveTaps == 3){
              // Do something
            }
          } else {
            consecutiveTaps = 0;
          }
          lastTap = now;
        },
        child: ...
)

Answer 2

Реализация кнопки «тройного щелчка» во флаттере может быть невозможна. Но, если вы действительно хотите, чтобы это работало как можно скорее, тогда простым способом может быть сохранение счетчика количества выполненных кликов. Как только счет достигнет 3, вам нужно добавить свою запись в Firestore.

Я изменил код из шаблона счетчика приложения flutter.
Надеюсь, у вас есть cloud_firestore в вашем файле pubspe c .yaml , Если нет, то добавьте его и поместите службы. json также в папку приложения android или соответствующий каталог ios.

cloud_firestore: ^0.13.4+1

Итак, теперь вы можете взглянуть на код, который я использую.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: 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;

  _incrementCounter() {
    setState(() {
      _counter++;
    });
    if (_counter == 3) {
      Firestore.instance
          .collection('/sampleData')
          .add({'data': "data"}).catchError((e) {
        print(e);
      });
      setState(() {
        _counter = 0;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            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),
      ),
    );
  }
}

Я отредактировал функцию _incrementCounter. Я добавил условный оператор, чтобы проверить _counter, если он равен 3 или нет. Затем я добавляю запись Firestore. Позже, самый важный бит - установить _counter равным 0, чтобы в следующий раз, когда пользователь нажал кнопку 3 раза, код работал бы соответственно. Вы можете настроить его в соответствии с вашими потребностями.

Но помните, тройные щелчки еще не были изобретены во флаттере, и это всего лишь обходное решение, и не используйте его для приложений разработки в реальной жизни, поскольку это было бы очень плохой практикой.