Update existing StatefulWidget class's widget in flutter

Question

I want to update my MaterialButton when user pressed on onTapDown() and onTapUP (inside GestureDetector). But i am not able to do this. I tried but not success. I have print some information in console to check my code working or not but successfully everything working without updating my MaterialButton widget. Please help me my Some code is below:-

(This code for button with changeable background image).

Container(
color: Colors.amber,
alignment: Alignment.center,
padding: EdgeInsets.only(top: 15, bottom: 10),
child: Text(
   "CALL FUNTIONS",
    style: TextStyle(
       fontSize: 25,
       fontWeight: FontWeight.bold,
  ),
)),
Container(
padding: EdgeInsets.only(bottom: 10),
color: Colors.amber,
child: callFunctionsForLessThan600Pixel(),
),


Widget callFunctionsForLessThan600Pixel() {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
       lessThan600Pixel(Key("LockCallButton"),"button_default","locked"),
   lessThan600Pixel(Key("UnLockCallButton"),"button_default","unlocked"),
       lessThan600Pixel(Key("StatusCallButton"),"button_default","info"),
      ],
    ),
  ],
);
}

Widget lessThan600Pixel(Key key, String buttonName, String svgName) {
return MaterialButton(
  key: key,
  child: ConstrainedBox(
    constraints: BoxConstraints(
      maxHeight: 70,
      maxWidth: 70,
    ),
    child: GestureDetector(
      child: Stack(
        children: <Widget>[
          Image.asset("assets/images/$buttonName.png",),
          SvgPicture.asset(
            "assets/images/$svgName.svg",
            height: 30,
            width: 30,
            color: Colors.white,
          ),
        ],
        alignment: Alignment.center,
      ),
      onTapDown: (v) {
        buttonTappedDown(key, svgName);
      },
      onTapUp: (v) {
        buttonTappedDown(key, svgName);
      },
    ),
  ),
  onPressed: buttonPressed,
  elevation: 0,
  highlightElevation: 0,
  highlightColor: Colors.amber,
);
}



void buttonTappedDown(Key key, String svgName) {
setState(() {
  lessThan600Pixel(key, "button_pressed", svgName);
});
}

void buttonTappedUp(Key key, String svgName) {
setState(() {
  lessThan600Pixel(key, "button_default", svgName);
});
}

Answer 1

My all code are below:-


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

class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
var screenWidth;
var isMobile;
var scaffoldKey = GlobalKey<ScaffoldState>();
bool isTap = false;


@override
Widget build(BuildContext context) {
isMobile = MediaQuery
    .of(context)
    .size
    .width < 600;
screenWidth = MediaQuery
    .of(context)
    .size
    .width;

return Scaffold(
  key: scaffoldKey,
  backgroundColor: Colors.amber[300],
  appBar: AppBar(
    title: Text("Home Page"),
  ),
  body: SingleChildScrollView(
    child: Container(
      child: Column(
        children: <Widget>[
          Container(
              color: Colors.amber,
              alignment: Alignment.center,
              padding: EdgeInsets.only(top: 15, bottom: 10),
              child: Text(
                "CALL FUNTIONS",
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                ),
              )),
          Container(
            padding: EdgeInsets.only(bottom: 10),
            color: Colors.amber,
            child: callFunctionsForLessThan600Pixel(),
          ),
          Container(
              color: Colors.amber,
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 8),
              padding: EdgeInsets.only(top: 15, bottom: 10),
              child: Text(
                "SMS FUNTIONS",
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                ),
              )),
        ],
      ),
    ),
  ),
  );
  }


 Widget callFunctionsForLessThan600Pixel() {
 return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        lessThan600Pixel(Key("LockCallButton"), "button_default", "locked"),
        lessThan600Pixel(
            Key("UnLockCallButton"), "button_default", "unlocked"),
        lessThan600Pixel(Key("StatusCallButton"), "button_default", "info"),
      ],
    ),
  ],
 );
 }

 void buttonTappedDown(Key key, String svgName) {
 setState(() {
  lessThan600Pixel(key, "button_pressed", svgName);
 });
 }

void buttonTappedUp(Key key, String svgName) {
setState(() {
  lessThan600Pixel(key, "button_default", svgName);
});
}

 Widget lessThan600Pixel(Key key, String buttonName, String svgName) {
return MaterialButton(
  key: key,
  child: ConstrainedBox(
    constraints: BoxConstraints(
      maxHeight: 70,
      maxWidth: 70,
    ),
    child: GestureDetector(
      child: Stack(
        children: <Widget>[
          Image.asset("assets/images/$buttonName.png",),
          SvgPicture.asset(
            "assets/images/$svgName.svg",
            height: 30,
            width: 30,
            color: Colors.white,
          ),
        ],
        alignment: Alignment.center,
      ),
      onTapDown: (v) {
        buttonTappedDown(key, svgName);
      },
      onTapUp: (v) {
        buttonTappedDown(key, svgName);
      },
    ),
  ),
  elevation: 0,
  highlightElevation: 0,
  highlightColor: Colors.amber,
);
}
}

Answer 2

To have an interactive UI you need to make your widget class as Stateful, and on the onPressed function you just use the setState() method to perform any changes. In this way the widget knows that has to be refreshed.

If your widget is stateless it will never update.

Here is the intro tutorial of Goolge that teaches you well the Statefull logic: https://flutter.dev/docs/development/ui/interactive