solution3.dart

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: BallPage(),
      ),
    );

class BallPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        backgroundColor: Colors.blue.shade900,
        title: Text('Ask Me Anything'),
      ),
      body: Ball(),
    );
  }
}

class Ball extends StatefulWidget {
  @override
  _BallState createState() => _BallState();
}

class _BallState extends State<Ball> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset('images/ball1.png'),
    );
  }
}

I tried to put a Row inside the center, but the image do not appeared.

@isabia Remember that Row has children. If you put the image inside the children, the image will appear, but it will be cut vertically because the Row tries to adjust the content to the full height, but if you use Column, the image will be displayed correctly, although it is not necessary to use Column or Row for this project.

I used a container and add alignment instead.

Container( alignment: Alignment.center, child: Image.asset('images/ball1.png'), );

@OverRide
Widget build(BuildContext context) {
return Center(child: Container(
child:Image.asset('images/ball1.png'),
));
}
i use this it give same result

I personnally add a SafeArea then a Center widget a row and an Expanded widget :

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
          child: Row(
        children: <Widget>[
          Expanded(
            child: Image.asset('images/ball1.png'),
          )
        ],
      )),
    );
  }
} ```
I guess it is fine too, maybe some useless code ??

Hi Dears Friend i used My Own Code and i get this result also

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

void main() => runApp(
MaterialApp(
home: Ball(),
),
);

class Ball extends StatefulWidget {
@OverRide
_BallState createState() => _BallState();
}

class _BallState extends State {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
backgroundColor: Colors.blue.shade200,
title: Center(
child: Text(
'My App',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueGrey.shade900,
fontFamily: 'Pacifico'),
),
),
),
body: Center(
child: Container(
child: Row(
children: [
Expanded(
child: Image.asset('images/ball1.png'),
),
],
),
),
),
);
}
}
`

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: BallPage(),
      ),
    );

class BallPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue.shade900,
        title: Center(
          child: Text('Ask Me Anything'),
        ),
      ),
      body: Ball(),
    );
  }
}

class Ball extends StatefulWidget {
  @override
  _BallState createState() => _BallState();
}

class _BallState extends State<Ball> {

  int variantBall = 1;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Expanded(
              child: FlatButton(
                onPressed: (){
                  setState(() {
                    variantBall = Random().nextInt(5) + 1;
                  });
                },
                child: Image.asset("images/ball$variantBall.png"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I made it with a container, but in the solution just used the Center widget, is there any difference if use a container in between?

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.asset('images/ball1.png'),
      ),
    );
  }
}```

I tried to put a Row inside the center, but the image do not appeared.

Check if you have called the stateful widget as body of scaffold in stless

There are, of course, many ways to reach your goal.
However, I think it makes sense to use as few widgets as possible, and to clearly distinguish whether these are stateless or stateful.

For the first time all my code is totally same as Angela. I used this :
import 'package:flutter/material.dart';

void main() => runApp(
MaterialApp(
home: Ball(),
),
);

class Ball extends StatefulWidget {
@OverRide
_BallState createState() => _BallState();
}

class _BallState extends State {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[400],
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("Ask Me Anything"),
centerTitle: true,
),
body: Center (
child: Image.asset("images/ball1.png"),
),
);
}
}

I used a container and a center widget, but container is useless.

I tried to put a Row inside the center, but the image do not appeared.

return Center(
      child: Row(
        children: <Widget>[
          Expanded(child: Image.asset('images/ball1.png')),
        ],
      ),
    );
It works for me.

import 'package:flutter/material.dart';

void main() => runApp(
MaterialApp(
home: BallPage(),
),
);

class BallPage extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
backgroundColor: Colors.blue.shade900,
title: Text('Ask Me Anything'),
),
body: Ball(),
);
}
}

class Ball extends StatefulWidget {
@OverRide
_BallState createState() => _BallState();
}

class _BallState extends State {
@OverRide
Widget build(BuildContext context) {
return Center(
child: Image.asset('images/ball1.png'),
);
}
}

i centered the statefull widget instead. it gave the same result or so i think lol
body: Center(
child: Ball(),
),

I used the exact same method.

import 'package:flutter/material.dart';

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

class BallPage extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blueAccent,
appBar: AppBar(
backgroundColor: Colors.blue,
title: Center(
child: Text('Ask me everything'),
),
),
body: Ball(),
),
);
}
}

class Ball extends StatefulWidget {
@OverRide
_BallState createState() => _BallState();
}

class _BallState extends State {
@OverRide
Widget build(BuildContext context) {
return Center(
child: Image.asset('images/ball1.png'),
);
}
}

Yes, Got it Working

how is this possible ???

Display a image without touch the yaml file it's this posible ?

import 'package:flutter/material.dart';

void main() => runApp(
MaterialApp(
home: BallPage(),
),
);

class BallPage extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Center(
child: Text('Ask Me Anything'),
),
backgroundColor: Colors.blue.shade900,
),
body: Ball(),
);
}
}

class Ball extends StatefulWidget {
@OverRide
_BallState createState() => _BallState();
}

class _BallState extends State {
@OverRide
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Image.asset('images/ball1.png'),
),
],
);
}
}

I did it this way.

hi everyone
I try that look

Worked perfectly!

@angelabauer

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

void main() {
runApp(
MaterialApp(
home: BallPage(),
),
);
}

class BallPage extends StatelessWidget {
const BallPage({Key? key}) : super(key: key);

@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
backgroundColor: Colors.blue.shade900,
title: Center(child: Text('Ask Me anything!')),
),
body: Center(child: Ball()),
);
}
}

class Ball extends StatefulWidget {
const Ball({Key? key}) : super(key: key);

@OverRide
State createState() => _BallState();
}

class _BallState extends State {
@OverRide
Widget build(BuildContext context) {
return Image(image: AssetImage('images/ball1.png'));
}
}

`
is it cool to just return the image without creating a child?

What is the diference? AssetImage vs Image.asset

body: const Center(
child: Image(
image: AssetImage('images/ball1.png'),
)));

or

return Center(
  child: Image.asset('images/ball1.png'),
);

What is the diference? AssetImage vs Image.asset

body: const Center( child: Image( image: AssetImage('images/ball1.png'), )));

or

return Center(
  child: Image.asset('images/ball1.png'),
);

https://stackoverflow.com/questions/53309622/what-is-the-difference-between-assetimage-and-image-asset-flutter
check ur answer here

Hello thanks

…

Sent from my iPhone

On Aug 30, 2022, at 6:15 PM, João Antunes Guimarães ***@***.***> wrote: ***@***.*** commented on this gist. What is the diference? AssetImage vs Image.asset body: const Center( child: Image( image: AssetImage('images/ball1.png'), ))); or return Center( child: Image.asset('images/ball1.png'), ); — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

simple like that

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

void main() {
runApp(MaterialApp(
home: EightBall(),
));
}

class EightBall extends StatefulWidget {
const EightBall({Key? key}) : super(key: key);

@OverRide
State createState() => _EightBallState();
}

class _EightBallState extends State {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue.shade800,
appBar: AppBar(
backgroundColor: Colors.indigo.shade900,
title: Text('magic ball - ask me anything'),
),
body: Container(
child: Center(
child: Image.asset('images/ball1.png'),
),
),
);
}
}

`

Below is my solution and it is working as expected.

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

void main() {
return runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.blueAccent,
appBar: AppBar(
backgroundColor: Colors.indigo.shade800,
centerTitle: true,
title: const Text(
'Ask Me Anything',
style: TextStyle(
fontSize: 35.0,
),
),
),
body: const BallPage(),
),
),
);
}

class BallPage extends StatefulWidget {
const BallPage({Key? key}) : super(key: key);

@OverRide
State createState() => _BallPageState();
}

class _BallPageState extends State {
int ballNumber = 1;
@OverRide
Widget build(BuildContext context) {
return Center(
child: TextButton(
onPressed: () {
setState(() {
ballNumber = Random().nextInt(5) + 1;
});
},
child: Image(
image: AssetImage('images/ball$ballNumber.png'),
),
),
);
}
}

import 'package:flutter/material.dart';

void main() => runApp(
MaterialApp(
home: BallPage(),
),
);

class BallPage extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
backgroundColor: Colors.blue.shade900,
title: Text('Ask Me Anything'),
),
body: Ball(),
);
}
}

class Ball extends StatefulWidget {
@OverRide
_BallState createState() => _BallState();
}

class _BallState extends State {
@OverRide
Widget build(BuildContext context) {
return Center(
child: Image.asset('images/ball1.png'),
);
}
}