Animate one widget on clicking button in another widget in flutter

Question

I have two widgets in my app. The first widget creates a TableRow of buttons. The second widget is the Go Button.

On clicking the go button, I want to highlight (i.e. add color & then revert to normal) each of the buttons serially from 1 to 8. I am confused on how to animate the first widget on tapping the Go button which is defined in the second widget

main.dart

class MyApp extends StatelessWidget {
  final String apptitle = 'Test';

  Widget _goButtonClickCallback() {
    print("hello world. go tapped");
    // How do I control animation inside numListBuilder() from here? 
  }

  @override
  Widget build(BuildContext context) {
    var numList = [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
    ];

    return MaterialApp(
      title: apptitle,
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text(apptitle),
          ),
          body: Column(
            children: [
              NumberListBuilder(numList),
              SizedBox(height: 110),
              GoButton(_goButtonClickCallback)
            ],
          )),
    );
  }
}

NumberListBuilder.dart

import 'package:flutter/material.dart';

class NumberListBuilder extends StatefulWidget {
  final List<String> numberList;
  const NumberListBuilder(this.numberList);

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

class _NumberListBuilderState extends State<NumberListBuilder> {
  List<TableRow> getButtonRows() {
    // list for all rows
    List<TableRow> rows = [];
    int numCols = 2;
    int numberListLength = widget.numberList.length;
    int numRows = 4

    var k = 0;
    for (var i = 0; i < numRows; i++) {
      List<Widget> rowChildren = [];
      for (var j = 0; j < numCols; j++) {
        rowChildren.add(Container(
            height: 80.0,
            child: FlatButton(
              color: Colors.white70,
              onPressed: () {},
              child: Text(
                widget.numberList[k++],
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
            )));
      }
      rows.add(new TableRow(children: rowChildren));
    }
    return rows;
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Table(
        border: TableBorder.all(),
        children: getButtonRows(),
      ),
    );
  }
}

Faisal Choura Faisal Choura · Accepted Answer · 2020-08-26T08:22:04

I would suggest using a state management library like provider this way you would have a provider class that listens to changes and when one the button is tapped you can notify all listeners to perform a certain action.

It's also better to maintain in the future than trying to pass different arguments throughout the widget tree

Animate one widget on clicking button in another widget in flutter

1 Answers