将图像添加到 Flutter

Question

this is my first time using Flutter and when I tried to add image it didn't quite work. First I tried adding Image to child:Container via Image.assets('assets/lpp_bezpozadine.png') - didnt work Then I tried making a separate method:

class LppImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    AssetImage assetImage = AssetImage('assets/lpp_bezpozadine.png');
    Image image = Image(image: assetImage);
    return Container(
      child: image,
    );
  }
}

From which I tried to call children: - but it said that I can't use children??

I have added the picture to pubspec.yaml as follow:

assets:
    - assets/lpp_bezpozadine.png

So if anyone could help me solve this, because I'm just starting at flutter. Thanks in advcance this is my code:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const darkBlueColor = const Color(0xff131f40);
    const lightBlueColor = const Color(0xff445c9e);
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                darkBlueColor,
                lightBlueColor,
              ],
              stops: [0.5, 1],
              begin: const FractionalOffset(0.5, 0.2),
              end: const FractionalOffset(1, 1),
            ),
          ),
        ),
      ),
    );
  }
}

Error log when I try to add children it says that convert it to child:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const darkBlueColor = const Color(0xff131f40);
    const lightBlueColor = const Color(0xff445c9e);
    return Scaffold(
      body: Center(
       children: <Widget>[
          LppImage(),
        ],
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                darkBlueColor,
                lightBlueColor,
              ],
              stops: [0.5, 1],
              begin: const FractionalOffset(0.5, 0.2),
              end: const FractionalOffset(1, 1),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

I don't know if flutter is able to find the image because there's no error logs, but this is the correct way to use an asset image:

class LppImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('assets/lpp_bezpozadine.png'),
    );
  }
}

Next to that, I see you're trying to use Center with children . Center only takes on child . So this is how you would use it:

Center(
  child: LppImage(),
),

If you want to use multiple children you should consider a Column so you can do this:

Column(
   children: [
      Center(
         child: LppImage(),
      ),
      Container(),
   ],
),

Answer 2

Did you try a full app restart? some times hot reloaded does not see assets.