I'm currently working on a Flutter project. I have been given Icons by the designer. One of the Icons looks like this

Now I'd like to fill the inside of the Icon with color so that it looks like this

How can I achieve this in flutter? I really tried a lot. Like using ClipRect and other Classes. But none gave the desired results.

CodePudding user response：

You can simply ask designer for filled icons too and show them when they are clicked.

So it goes like this:

if button clicked:
    show filledIcon
else:
    show unfilledIcon

You can code that in Flutter like:

 icon:clicked? Icon(filledIcon):Icon(unfilledIcon)

This is the easiest way to do this.

CodePudding user response：

Try this one.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

bool _isBluetoothOn = false;

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              onPressed: () async {
                print(_isBluetoothOn);
                setState(() {
                  _isBluetoothOn = !_isBluetoothOn;
                });
                print(_isBluetoothOn);
              },
              icon: Icon(
                _isBluetoothOn ? Icons.favorite : Icons.favorite_border,
                color: Colors.greenAccent,
                size: 40,
              ),
            ),
          ],
        ),
      ),
    );
  }
}