Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Disable fadeIn animation #68

Closed
tsquillario opened this issue Mar 8, 2023 · 12 comments
Closed

[Feature] Disable fadeIn animation #68

tsquillario opened this issue Mar 8, 2023 · 12 comments
Labels
enhancement New feature or request

Comments

@tsquillario
Copy link

The package is great, appreciate the work! I'd like to be able to disable the fadeIn animation. I'm making changes to the grid via a ChangeNotifierProvider and when it's rebuilding the grid flashes with the fadeIn animation. Since I'm using the flip_card package I can't use setState because that would reflip all the cards that are already flipped.

@karvulf
Copy link
Owner

karvulf commented Mar 8, 2023

Hi @tsquillario
This implementation shouldn't be so hard. Which version are you currently using? Depending on that I could make the update for the pre release or the current version. @tsquillario

@karvulf karvulf added the enhancement New feature or request label Mar 8, 2023
@tsquillario
Copy link
Author

I'm using 4.0.0 project is still in dev so can use either really. Appreciate the quick reply!

@karvulf
Copy link
Owner

karvulf commented Mar 8, 2023

Alright, then I will add the feature for version 4 and also will add this when releasing version 5.

I will try to implement the solution until the end of the week. @tsquillario

@karvulf
Copy link
Owner

karvulf commented Mar 11, 2023

I added a new parameter fadeInDuration that you could set to Duration.zero, so there would be no animation when a child appears. Is it possible that you could use the version 5.0.0-dev.2 and after the update 5.0.0-dev.3? That would it make a lot easier because the version 4.0.0 won't be there for such a long time before the big update comes. @tsquillario

@tsquillario
Copy link
Author

Yea I can use the 5.0.0-dev.x release until the official 5.0.0 release

@tsquillario
Copy link
Author

Where do I find it?

@karvulf
Copy link
Owner

karvulf commented Mar 13, 2023

So I published version 5.0.0-dev.3 that you can use to change the parameter fadeInDuration.
Just set this value to Duration.zero.
And if you are using version 5 the first time, check the examples to see what changed.
Let me know if you need some help or if you have still problems. @tsquillario

@tsquillario
Copy link
Author

I'm getting the following error on the onReorder property when using the 5.0.0-dev.3 release.

The argument type 'void Function(List<ReorderUpdateEntity>)' can't be assigned to the parameter type 'void Function(List<dynamic> Function(List<dynamic>))?'
import 'package:flutter_reorderable_grid_view/entities/reorder_update_entity.dart';
import 'package:flutter_reorderable_grid_view/widgets/widgets.dart';

ReorderableBuilder(
  key: UniqueKey(),
  enableScrollingWhileDragging: false,
  enableDraggable: game.locked ? false : true,
  onReorder: (List<ReorderUpdateEntity> orderUpdateEntities) {
    for (final orderUpdateEntity in orderUpdateEntities) {
      onReorder(orderUpdateEntity.oldIndex, orderUpdateEntity.newIndex);
    }
  },
  builder: (children) {
    return Padding(
        padding: EdgeInsets.symmetric(
            vertical: 0, horizontal: 5),
        child: GridView(
          key: _gridViewKey,
          shrinkWrap: true,
          gridDelegate:
              const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 5,
            mainAxisSpacing: 0,
            crossAxisSpacing: 0,
          ),
          children: children,
        ));
  },
  children: model.gameSongs.mapIndexed((index, song) {
    return FlipSong(
      key: UniqueKey(), //Key("item$index"),
      title: song.name,
      locked: game.locked,
      flipped: (song.selected || song.marked)
          ? true
          : false,
      index: index,
      fontSize: 11,
      backColor: song.marked
          ? Theme.of(context).colorScheme.tertiary
          : Theme.of(context).selectedRowColor,
      onSelected: selectSong,
    );
  }).toList(),
  )

@karvulf
Copy link
Owner

karvulf commented Mar 14, 2023

the coding part of onReorder has changed a little bit, try the following:

...
  onReorder: (ReorderedListFunction reorderedListFunction) {
    setState(() {
      children = reorderedListFunction(children) as List<int>;
    });
  },
...

children would be in your case model.gameSongs. So you just replace children with your gameSongs.
onReorder gives you a function that handles the reordering for you and returns the reordered children. @tsquillario

That means

...
  onReorder: (ReorderedListFunction reorderedListFunction) {
    setState(() {
      your_updated_reordered_game_songs = reorderedListFunction(model.gameSongs) as List<int>;
    });
  },
...

@tsquillario
Copy link
Author

The cards are flying all around when dragging and it only happens when I add fadeInDuration: Duration.zero

Minimal repo to reproduce the issue
https://github.com/tsquillario/flutter-reorderable-grid-view-example1

2023-03-15 08_19_41-

dependencies:
  flutter:
    sdk: flutter
  go_router: ^6.0.0
  provider: ^6.0.5
  flip_card: ^0.7.0
  flutter_reorderable_grid_view: ^5.0.0-dev.3
[!] Flutter (Channel @upstream, 3.7.3, on Microsoft Windows [Version 10.0.19044.2604], locale en-US)
    • Flutter version 3.7.3 on channel @upstream at C:\src\flutter
    ! Unknown upstream repository.
      Reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
    • Framework revision 9944297138 (5 weeks ago), 2023-02-08 15:46:04 -0800
    • Engine revision 248290d6d5
    • Dart version 2.19.2
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Users\tsqui\AppData\Local\Android\Sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = C:\Users\tsqui\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Build Tools 2019 16.11.20)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
    • Visual Studio Build Tools 2019 version 16.11.32929.386
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[√] VS Code (version 1.76.1)
    • VS Code at C:\Users\tsqui\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.60.0

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.19044.2604]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 111.0.5563.65
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 111.0.1661.41

[√] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

@karvulf
Copy link
Owner

karvulf commented Mar 15, 2023

I checked your example and found some issues, you have:

  • the key for ReorderableBuilder has to be declared at top of your widget to ensure it is not recreated
  • your children keys have to be related to your item, not to the mapped index

To fix that issue, you can change the main.dart to the following:

import 'package:app/items_model.dart';
import 'package:flip_card/flip_card_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_reorderable_grid_view/entities/reorder_update_entity.dart';
import 'package:flutter_reorderable_grid_view/widgets/widgets.dart';
import 'package:flip_card/flip_card.dart';
import 'package:collection/collection.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _globalKey = UniqueKey();
  final _gridViewKey = GlobalKey<_MyHomePageState>();
  final itemsModel = ItemsModel();

  @override
  Widget build(BuildContext context) {
    Widget _buildCard(String title, Color? backColor, bool locked) {
      return Card(
        color: backColor,
        key: widget.key,
        elevation: 2,
        shadowColor: Colors.black,
        child: Container(
          child: Padding(
              padding: EdgeInsets.all(5),
              child: Center(
                child: Text(
                  title,
                  style: TextStyle(fontSize: 11),
                  textAlign: TextAlign.center,
                ),
              )),
        ),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ChangeNotifierProvider.value(
              value: itemsModel,
              child: Consumer<ItemsModel>(
                builder: (context, model, child) {
                  return Container(
                    constraints: const BoxConstraints(maxWidth: 600),
                    child: ReorderableBuilder(
                      key: _globalKey,
                      enableScrollingWhileDragging: false,
                      enableDraggable: true,
                      fadeInDuration: Duration.zero,
                      onReorder: (reorderedListFunction) {
                        var items =
                            reorderedListFunction(model.items) as List<String>;
                        model.reorderSongs(reorderedItems: items);
                      },
                      builder: (children) {
                        return Padding(
                          padding: const EdgeInsets.symmetric(
                            vertical: 0,
                            horizontal: 5,
                          ),
                          child: GridView(
                            key: _gridViewKey,
                            shrinkWrap: true,
                            gridDelegate:
                                const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 5,
                              mainAxisSpacing: 0,
                              crossAxisSpacing: 0,
                            ),
                            children: children,
                          ),
                        );
                      },
                      children: model.items.mapIndexed(
                        (index, item) {
                          final flipCardController = FlipCardController();
                          return FlipCard(
                            key: ValueKey(item),
                            controller: flipCardController,
                            fill: Fill.fillBack,
                            // Fill the back side of the card to make in the same size as the front.
                            direction: FlipDirection.HORIZONTAL,
                            side: CardSide.FRONT,
                            flipOnTouch: true,
                            autoFlipDuration: null,
                            onFlip: () {},
                            front: _buildCard(item, Colors.grey, false),
                            back: _buildCard(item, Colors.greenAccent, false),
                          );
                        },
                      ).toList(),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Currently when you reorder a flipped card, the flip is reset, I didn't look why that happens but I am sure you can handle that. @tsquillario

@tsquillario
Copy link
Author

That did it! Closing issue, appreciate the help!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants