CODEWITHSUNDEEP
flutterdart
fel
fel

Reputation: 31

Flutter: Change color of container on tap

I want to change color and size tapping on container but it does't change anything and setState(() doesn't help too

return Scaffold(
  body: Ink(          
      child: InkWell(
        child: Container(
          width: double.infinity,
          height:double.infinity,
          color:Colors.blue,            
        ),
        onTap: () {
          height:400;
          color: Colors.red;
          print("Click event on Container");
        },
     )
  ),

);

Upvotes: 1

Views: 16387

Answers (3)

Mehrdad
Mehrdad

Reputation: 412

you can use TwinAnimation.when you tap on container primary color change to secondary color.

Upvotes: 0

HBS
HBS

Reputation: 670

Use variables:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _containerHeight = double.infinity;
  Color _containerColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Ink(
          child: InkWell(
        child: Container(
          width: double.infinity,
          height: _containerHeight,
          color: _containerColor,
        ),
        onTap: () {
          setState(() {
            _containerHeight = 400;
            _containerColor = Colors.red;
          });
        },
      )),
    );
  }
}

Upvotes: 0

Jhakiz
Jhakiz

Reputation: 1609

fel This example shows how you can toggle blue and red colors.

Color _colorContainer = Colors.blue;

Now you can use it in your widget as follow:

         Ink(
            child: InkWell(
            child: Container(
            width: 200,
            height: 200,
            color: _colorContainer ,
          ),
          onTap: () {
            setState(() {
              _colorContainer = _colorContainer == Colors.red ? 
                    Colors.blue : 
                    Colors.red;
            });
          },
        )),

Upvotes: 5

Related Questions