Asset Image on Box

Viewed 332

I tried to asset image on rounded-box using ClipRRect and AssetImage,

Widget drawingSelection(String indexedImage) {
  Widget result = Align(
    alignment: Alignment(0.0, 0.0),
    child: SizedBox(
      width: 300.0,
      height: 175.0,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(36.0),
        child: Container(
          child: Image(image: AssetImage(indexedImage),),
          decoration: BoxDecoration(
            color: Colors.white,
          ),
        ),
      ),
    ),
  );
  return result;
}

It says unable to asset my image, of course I checked the pub.yaml and it seems OK. . (FYI,indexedImage = aa.jpg) . . Anybody who can help asset image on my rounded box?

2 Answers

I see you passed indexedImage = aa.jpg

Is the path pointing to that image? Because a typical path looks like this

.
.
child: drawingSelection('assets/aa.jpg'), //change assets name to your folder name
.
.

If its still not working?, can yo attach your pubspec.yaml file?

So There are two steps that you should follow : Adding the image in the folder (in my case I have Assets Folder), And then defining the assets Folder in the pub spec.yaml. Pubspec File and the Folder image adding in the project

What I have done here just mentioned the folder name and not all the images in it.

And check out the multiple ways that you can make the image in rounded way. Just an example so that it can help others.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 
  Widget drawingSelection(String indexedImage) {
    Widget result = Align(
      alignment: Alignment(0.0, 0.0),
      child: SizedBox(
        width: 300.0,
        height: 175.0,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(36.0),
          child: Container(
            child: Image(
              image: AssetImage(indexedImage),
            ),
            decoration: BoxDecoration(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Users List "),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              drawingSelection("Assets/sample.jpg"),
              Text("Above is your widget"),
              SizedBox(
                height: 10,
              ),
              Text("Check out the multiple ways below"),
              SizedBox(
                height: 20,
              ),
              Text("This is using the container decoration"),
              Container(
                width: 200.0,
                height: 200.0,
                decoration: new BoxDecoration(
                  shape: BoxShape.circle,
                  image: new DecorationImage(
                    fit: BoxFit.fill,
                    image: AssetImage("Assets/sample.jpg"),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text("This is using the ClipOval"),
              ClipOval(
                child: Container(
                  width: 200,
                  height: 200,
                  child: Image.asset(
                    'Assets/sample.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text("This is using the ClipRRect"),
              Container(
                width: 200,
                height: 200,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(100),
                  child: Image.asset(
                    'Assets/sample.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text("This is using the CircleAvatar"),
              CircleAvatar(
                radius: 100.0,
                backgroundImage: AssetImage("Assets/sample.jpg"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Check it out and let me know if it works.

Related