how can i change color of these iconbuttons by pressing it, please help me and show me whole code for it, Thanks

CodePudding user response：

In setState you have to add boolean variable, for example changeColor = false;

Then in button :

color: changeColor ? Colors.grey : Colors.blue,
  onPressed: () => setState(() => changeColor = !changeColor),

Flutter - How do I toggle the color of a RaisedButton upon click?

CodePudding user response：

IconButton in flutter has a color variable you can set as here:

  IconButton(
              color: Colors.green,
              icon: Icon(Icons.camera),
              onPressed: () {},
            )

CodePudding user response：

This is new method to change color, there is youtube video for this Here and a article for this Article

ElevatedButton(
          child: Text('Elevated Button'),
          onPressed: () {
            print('Pressed');
          },
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.resolveWith<Color>(
              (Set<MaterialState> states) {
                if (states.contains(MaterialState.pressed)) return Colors.green;
                return Colors.greenAccent;
              },
            ),
          ),
        )

You can change the background color of the ElevatedButton using MaterialStateProperty class. You can change the color of the button based on the states too. See the code snippet given below.

CodePudding user response：

This is the code that I would use:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: SingleChildScrollView(
          child: Column(children: [
            const Text(
              'Choose Category',
              style: TextStyle(
                color: Colors.white,
                fontSize: 12,
                fontWeight: FontWeight.w600,
              ),
            ),
            Row(children: [
              CategoryButton(
                svg: 'assets/candy.svg',
                label: 'Tech',
                selected: false,
              ),
              CategoryButton(
                svg: 'assets/candy.svg',
                label: 'Finance',
                selected: false,
              ),
              CategoryButton(
                svg: 'assets/candy.svg',
                label: 'Design',
                selected: false,
              ),
              CategoryButton(
                svg: 'assets/candy.svg',
                label: 'File',
                selected: false,
              ),
              CategoryButton(
                svg: 'assets/candy.svg',
                label: 'Music',
                selected: false,
              ),
            ])
          ]),
        ),
      ),
    );
  }
}

class CategoryButton extends StatefulWidget {
  CategoryButton({
    Key? key,
    required this.svg,
    required this.label,
    required this.selected,
  }) : super(key: key);
  String svg;
  String label;
  bool selected;
  @override
  State<CategoryButton> createState() => _CategoryButtonState();
}

class _CategoryButtonState extends State<CategoryButton> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          widget.selected = !widget.selected;
        });
        print(widget.selected);
      },
      child: Container(
          height: 40,
          width: 40,
          decoration: BoxDecoration(
            color: widget.selected ? Colors.blue : Colors.black,
            borderRadius: BorderRadius.circular(90),
          ),
          child: Column(
            children: [
              SvgPicture.asset(widget.svg,
                  color: widget.selected ? Colors.white : Colors.blue),
              Text(
                widget.label,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 9,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          )),
    );
  }
}

here you need to make sure to add flutter_svg to your pubspec.yaml file and have a folder for your assets and add that to your pubspec.yaml file as well

if you have any further questions just ask :)