AnimationBuilder RangeError

[keremkayabay]

While sliding a Slidable, it sometimes throws the following exception:

I/flutter (13152): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (13152): The following RangeError was thrown building AnimatedBuilder(animation: AnimationController#4bf67(▶
I/flutter (13152): 0.191; paused), dirty, state: _AnimatedState#6161d):
I/flutter (13152): RangeError (index): Invalid value: Only valid value is 0: 1
I/flutter (13152):
I/flutter (13152): When the exception was thrown, this was the stack:
I/flutter (13152): #0 List.[] (dart:core/runtime/libgrowable_array.dart:141:60)
I/flutter (13152): #1 SlidableDrawerDelegate.buildStackActions... (package:flutter_slidable/src/widgets/slidable.dart:571:63)
I/flutter (13152): #2 new List.generate (dart:core/list.dart:162:28)
I/flutter (13152): #3 SlidableDrawerDelegate.buildStackActions.. (package:flutter_slidable/src/widgets/slidable.dart:565:32)
I/flutter (13152): #4 AnimatedBuilder.build (package:flutter/src/widgets/transitions.dart:633:12)
I/flutter (13152): #5 _AnimatedState.build (package:flutter/src/widgets/transitions.dart:96:48)
I/flutter (13152): #6 StatefulElement.build (package:flutter/src/widgets/framework.dart:3730:27)
I/flutter (13152): #7 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3642:15)
I/flutter (13152): #8 Element.rebuild (package:flutter/src/widgets/framework.dart:3495:5)
I/flutter (13152): #9 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2242:33)
I/flutter (13152): #10 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:626:20)
I/flutter (13152): #11 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5)
I/flutter (13152): #12 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter (13152): #13 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter (13152): #14 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter (13152): #15 _invoke (dart:ui/hooks.dart:120:13)
I/flutter (13152): #16 _drawFrame (dart:ui/hooks.dart:109:3)

[letsar]

Hi @keremkayabay,
Have you a code sample to reproduce this?

[keremkayabay]

Hello @letsar

I've found out, when there are two actions on the left and one action on the right (secondaryActions), it would throw this exception. If the number of actions on the left and right are equal, it works fine.

Btw thanks for the cool package!

Here is a sample code:

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

String _name = "Flutter";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "Flutter Slidable Animation Test",
        theme: new ThemeData(
          primarySwatch: Colors.blue,
          //primaryColor: Colors.grey[200],
          accentColor: Colors.blueAccent[400],
        ),
        home: new ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  State createState() => new ChatScreenState();
}

class ChatScreenState extends State<ChatScreen> {
  final TextEditingController _textController = new TextEditingController();
  bool _isComposing = false;
  List<ChatMessage> _messages = <ChatMessage>[];

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Chat"),
        elevation: 0.0,
      ),
      body: new Column(
        children: <Widget>[
          new Flexible(
            child: new ListView.builder(
              padding: new EdgeInsets.all(0.0),
              reverse: true,
              itemBuilder: (_, int index) => _messages[index],
              itemCount: _messages.length,
            ),
          ),
          new Divider(height: 0.0),
          new Container(
            decoration: new BoxDecoration(
                color: Theme.of(context).cardColor),
            child: _buildTextComposer(),
          ),
        ],
      ),
    );
  }

  Widget _buildTextComposer() {
    return new IconTheme(
      data: new IconThemeData(color: Theme.of(context).accentColor),
      child: new Container(
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        child: new Row(
          children: <Widget>[
            new Flexible(
              child: new TextField(
                controller: _textController,
                onChanged: (String text) {
                  setState(() {
                    _isComposing = text.length > 0;
                  });
                },
                onSubmitted: _handleSubmitted,
                decoration: new InputDecoration.collapsed(
                    hintText: "What's in your mind"),
              ),
            ),
            new Container(
              margin: new EdgeInsets.symmetric(horizontal: 4.0),
              child: new IconButton(
                icon: new Icon(Icons.send),
                onPressed: _isComposing
                    ? () => _handleSubmitted(_textController.text)
                    : null,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _handleSubmitted(String text) {
    _textController.clear();

    setState(() {
      _isComposing = false;
    });

    ChatMessage message = new ChatMessage(
      text: text,
      parent: this,
    );

    setState(() {
      _messages.insert(0, message);
    });
  }

  void _removeMessage(ChatMessage message) {
    setState(() {
      _messages.remove(message);
    });
  }
}

class ChatMessage extends StatelessWidget {
  ChatMessage({this.text, this.parent});
  final String text;
  final ChatScreenState parent;

  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: const EdgeInsets.symmetric(vertical: 2.0),
      child: new Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Expanded(
            child: Slidable(
              //controller: slidableController,
              delegate: new SlidableDrawerDelegate(),
              actionExtentRatio: 0.25,
              child: new Container(
                color: Colors.white,
                child: new ListTile(
                  leading: new CircleAvatar(
                    backgroundColor: Colors.blueAccent,
                    child: new Text(_name[0]),
                    foregroundColor: Colors.white,
                  ),
                  title: new Text(_name),
                  subtitle: new Text(text),
                ),
              ),
              actions: <Widget>[
                new IconSlideAction(
                  caption: 'Action 1',
                  color: Colors.black38,
                  icon: Icons.assignment,
                ),
                new IconSlideAction(
                  caption: 'Action 2',
                  color: Colors.indigo,
                  icon: Icons.forward,
                ),
              ],
              secondaryActions: <Widget>[
                new IconSlideAction(
                  caption: 'Delete',
                  color: Colors.red,
                  icon: Icons.delete,
                  onTap: () => parent._removeMessage(this),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

[keremkayabay]

And it doesn't happen at all with SlidableScrollDelegate

[letsar]

Thanks for the feedback @keremkayabay 😃.
I found why this issue was happening. Now I have to fix this :-).

[letsar]

Should be fixed in version 0.4.3

[keremkayabay]

Thank you!