CODEWITHSUNDEEP
flutterfontsmaterial-design
Rory Prince
Rory Prince

Reputation: 63

Flutter Icons as Images?

Against my wishes, a client wants to custom make their own icons throughout the app I am building. They are used to the web design world, and are furnishing me with a bunch of PNG images they hope we can use, just plopping them in.

Is this even possible?

Or is there a way for me to translate PNGs into a better asset that I can use like the Material design font glyphs?

Thanks!

Upvotes: 1

Views: 414

Answers (1)

jurgenizer
jurgenizer

Reputation: 559

It is possible to use PNGs, one way is like this:

First put your .png images in your application directory, e.g.,

.../pubspec.yaml
.../graphics/cool_icon.png
.../graphics/background.png

Then update your pubspec.yaml file like this:

flutter:
  assets:
    - graphics/cool_icon.png
    - graphics/background.png

Then add the .png to your Widget:

  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Container(
      width: 36.0,
      height: 36.0,
      decoration: const BoxDecoration(
        image: DecorationImage(
            fit: BoxFit.fitHeight,
            image: AssetImage('graphics/cool_icon.png')),
      ),
    ),
  ),

screenshot of code example

Upvotes: 1

Related Questions