Próbuję użyć GestureDetector, aby wyświetlić przycisk za pomocą kontenera, ponieważ nie lubię animacji powitalnej z FlatButton ani Inkwell, to, co chcę zrobić, to zrobić Użytkownik wie, kiedy kolor jest naciśnięty lub koncentruje się, wykonując kolor tła Container ciemniejszy, używam tego kodu poniżej, ale wiem, że to zmieni kolor po naciśnięciu i nie wróci do zwykłego koloru gdy nie jest naciskany. Czy istnieje sposób na kod, więc kolor zmieni się do ciemniejszych tylko po naciśnięciu lub ustawianiu ostrości i zmienia się z powrotem do zwykłego koloru po uwolnieniu naciśnięciu.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  bool isTouching = true;

  handleTouch(bool confirmTouch) {
    setState(() {
      isTouching = confirmTouch;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new GestureDetector(
          onTap: () {
            handleTouch(false);
          },
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.fromLTRB(25, 15, 20, 8),
                  height: 58,
                  width: 58,
                  child: Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 28,
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(100),
                    color: isTouching == true ? Colors.green : Colors.red,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
0
Vinny 30 lipiec 2020, 01:10

1 odpowiedź

Najlepsza odpowiedź

Owiń swój pojemnik za pomocą Listener i użyj onPointerDown i onPointerUp:

Listener(
    child: Container(
        margin: EdgeInsets.fromLTRB(25, 15, 20, 8),
        height: 58,
        width: 58,
        child: Icon(
            Icons.add,
            color: Colors.white,
            size: 28,
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100),
            color: isTouching == true ? Colors.green : Colors.red,
        ),
    ),
    onPointerDown: (event) => setState(() {
        isTouching = true;
    }),
    onPointerUp: (event) => setState(() {
        isTouching = false;
    }),
),
3
Mobina 29 lipiec 2020, 22:16