Animate one widget on clicking button in another widget in flutter

enter image description here

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(),       ),     );   } }  
Add Comment
1 Answer(s)

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

Answered on August 29, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.