Change Container Size onTap event in flutter

Question

I have a 2 containers in Row, when i click on one container it should change its size, i have set the default size of the container and when the container is tapped it should change the size of the container.

Below is my code:

double selectedWidthActive = width * 0.45;
double selectedWidthInActive = width * 0.40;
double selectedHeightActive = height * 0.45;
double selectedHeightInActive = width * 0.40;

GestureDetector(
                    onTap: (){
                      setState(() {
                        selected = true;
                        credit = true;
                      });
                    },
                    child: Container(
                      width: selected ? selectedWidthActive : selectedWidthInActive,
                      height: selected ? selectedHeightActive : selectedHeightInActive,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(colors: [Color(0xffFFD4E2), Color(0xffFF8FB3)], begin: Alignment.topCenter, end: Alignment.bottomCenter),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 10),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            SvgPicture.asset('assets/svg/debit_account.svg',width: 50,),
                            Container(
                              decoration: BoxDecoration(
                                color: Colors.white.withOpacity(0.75),
                                borderRadius: BorderRadius.all(Radius.circular(20)),
                              ),
                              child: Padding(
                                padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                                child: Text('Debit Card', style: TextStyle(fontSize: 13, fontFamily: 'Gilroy Medium'),),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),

When i printed the value in console its not changing.

This is my expected output.

Please help me on this.

Answer 1

Try this:

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  bool selected = false;
  bool credit = false;

  double selectedWidthActive = 0;
  double selectedHeightActive = 0;

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;
    double selectedWidthInActive = width * 0.40;
    double selectedHeightInActive = width * 0.40;

    return Scaffold(
      body: GestureDetector(
        onTap: () {
          setState(() {
            selected = true;
            credit = true;
            selectedWidthActive = width * 0.45;
            selectedHeightActive = height * 0.45;
          });
        },
        child: Container(
          width: selected ? selectedWidthActive : selectedWidthInActive,
          height: selected ? selectedHeightActive : selectedHeightInActive,
          decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [Color(0xffFFD4E2), Color(0xffFF8FB3)],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter),
            borderRadius: BorderRadius.all(Radius.circular(20)),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                const FlutterLogo(),
                Container(
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.75),
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ),
                  child: Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                    child: Text(
                      'Debit Card',
                      style:
                          TextStyle(fontSize: 13, fontFamily: 'Gilroy Medium'),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}