ReinBentdal / division

Simple to use yet powerfull style widgets with syntax inspired by CSS.
https://pub.dev/packages/division
MIT License
269 stars 42 forks source link

isTap() method not working properly? #52

Open JoseDelPino opened 4 years ago

JoseDelPino commented 4 years ago

It seems to be triggered only when a long press is made over a Parent. Additionally, it is triggered twice in that case (at least for me).

ReinBentdal commented 4 years ago

will look into it in the next couple days. Could you please provide your code where the error occurs?

JoseDelPino commented 4 years ago

Here you have it, thanks for the quick response :)

`import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:flutter/material.dart'; import 'package:visualicer/affiliation.dart'; import 'package:charts_flutter/flutter.dart' as charts; import 'package:visualicer/globals.dart'; import 'package:division/division.dart';

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

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'VISUALICE'), ); } }

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

final String title;

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

class _MyHomePageState extends State {

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: ListView( children: [ SectionItem(Icons.work, hex('#e3366a'), 'Afiliación', 'Datos de afiliación a la S.S.', 'affiliation'), SectionItem(Icons.people, hex('#34b7eb'), 'Matrimonios', 'Datos de matrimonios', 'marriage'), SectionItem(Icons.nature_people, hex('#72db80'), 'Población', 'Datos de población', 'population'), ], ), ), ); } }

class SectionItem extends StatefulWidget { SectionItem(this.icon, this.iconBgColor, this.title, this.description, this.navigator);

final IconData icon; final Color iconBgColor; final String title; final String description; final String navigator;

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

class _SectionItemState extends State { bool pressed = false;

@override Widget build(BuildContext context) { return Parent( style: settingsItemStyle(pressed),

  gesture: Gestures()
    ..isTap((isTapped) => setState(() {
      print("The item was tapped");
      pressed = isTapped;
      _goToSection(widget.navigator);
    })),

  child: Row(
    children: <Widget>[
      Parent(
        style: settingsItemIconStyle(widget.iconBgColor),
        child: Icon(widget.icon, color: Colors.white, size: 20),
      ),
      SizedBox(width: 10),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Txt(widget.title, style: itemTitleTextStyle),
          SizedBox(height: 5),
          Txt(widget.description, style: itemDescriptionTextStyle),
        ],
      )
    ],
  ),
);

}

void _goToSection(String navigator) async {

if(navigator == 'affiliation'){

  var data = [];

  affiliations = await Firestore.instance
      .collection("Afiliacion")
      .getDocuments();
  print(affiliations.documents.length);
  affiliations.documents.forEach((doc) => data.add(
      new MonthlyAffiliation(
          doc.documentID.toString(), doc.data["Soria"]["total"], Colors.purpleAccent)));

  List<charts.Series<dynamic, String>> series = [
    new charts.Series(
      id: 'AfiliacionPorMes',
      colorFn: (afiliacion, _) => afiliacion.color,
      domainFn: (afiliacion, _) => afiliacion.month,
      measureFn: (afiliacion, _) => afiliacion.people,
      data: data,
    )];

  Navigator.push(
    context,
    MaterialPageRoute(
        builder: (context) =>
            StatefulAffiliation(series)),
  );

}

}

final settingsItemStyle = (pressed) => ParentStyle() ..elevation(pressed ? 0 : 50, color: Colors.grey) ..scale(pressed ? 0.95 : 1.0) ..alignmentContent.center() ..height(70) ..margin(vertical: 10) ..borderRadius(all: 15) ..background.hex('#ffffff') ..ripple(true) ..animate(150, Curves.easeOut);

final settingsItemIconStyle = (Color color) => ParentStyle() ..background.color(color) ..margin(left: 15) ..padding(all: 12) ..borderRadius(all: 30);

final TxtStyle itemTitleTextStyle = TxtStyle() ..bold() ..fontSize(16);

final TxtStyle itemDescriptionTextStyle = TxtStyle() ..textColor(Colors.black26) ..bold() ..fontSize(12); } `

ReinBentdal commented 4 years ago

Not entirely sure what the problem is but i think the problem is just an illusion when testing on a emulator. What feels like a long press on a emulator can be a normal tap on a real device. I would also suggest changing the itTap function to:

..isTap((isTapped) {
  print("The item was tapped $isTapped");
  _goToSection(widget.navigator);
  setState(() => pressed = isTapped);
}

When the setState function is called the widget will rerender. Therefore everthing you want to do should be done before you call setState.

Let me know if this helped. I would also suggest testing it on a real device if you havent yet to see if there is a problem in a "real" scenario.

JoseDelPino commented 4 years ago

The problem still persists, even on a real device. _goToSection(widget.navigator); is executed TWICE only when a long press is release.

Thanks in advance.