Skip to content

Instantly share code, notes, and snippets.

@angelabauer
Created March 7, 2019 12:17
Show Gist options
  • Save angelabauer/1b8e0089c03f0e85e3f2eb1fa0aa68e2 to your computer and use it in GitHub Desktop.
Save angelabauer/1b8e0089c03f0e85e3f2eb1fa0aa68e2 to your computer and use it in GitHub Desktop.
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: Container(),
);
}
}
@hafedhBel
Copy link

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: Container(),
);
}
}

@nguardadov
Copy link

My solution

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: Text('Ask Me Anything'),
backgroundColor: Colors.blue.shade900,
),
body: Container(),
);
}
}

@ibushraabbasi
Copy link

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'),
),
),
),
);
}
}

@Zshubham
Copy link

Hi am Shubham Sharma
and this is my solution code

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

void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue.shade200,
appBar: AppBar(
backgroundColor: Colors.blue.shade800,
title: Center(
child: Text(
'Ask Me Anything',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
),
body: MagicBall(),
),
),
);
}

class MagicBall extends StatefulWidget {
@OverRide
_MagicBallState createState() => _MagicBallState();
}

class _MagicBallState extends State {
int magicBall = 1;

void randomAnswerGenerator() {
setState(() {
magicBall = Random().nextInt(5) + 1;
});
}

@OverRide
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
child: Image.asset('images/ball$magicBall.png'),
onPressed: () {
randomAnswerGenerator();
},
),
],
);
}
}

@muzairk92
Copy link

Is it wrong If I created this way, changed the colours btw --->

import 'package:flutter/material.dart;

void main() => runApp(
  MaterialApp(
    home:Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('Ask Me Anything'),
        backgroundColor: Colors.cyan,
      ),
    body: BallPage(),
  ),
  ),
);

class BallPage extends StatefulWidget {
  @override
  _BallPageState createState() => _BallPageState();
}

class _BallPageState extends State<BallPage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

No its not wrong., it is the better way of coding because we need to update the body, not a App bar.

@SUMIT0733
Copy link

Hello ruudkalis,

I always use “centerTitle: true;” in order to center it.

like this:

appBar: AppBar(
backgroundColor: Colors.blue.shade900,
title: Text('Ask Me Anything'),
centerTitle: true;
),

Idk why her code don’t have it and the title is in center.. but..

Hope I helped u.

Regards

Cause She is using ios device and by default title in appbar is in centre for ios, but for android we need to explicitly defined it.

@muzairk92
Copy link

muzairk92 commented Feb 14, 2021 via email

@kb0207
Copy link

kb0207 commented Feb 18, 2021

i did something else

import 'package:flutter/material.dart';

void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.blue[400],
appBar: AppBar(
title: Text('Ask Me Anything'),
backgroundColor: Colors.blue[900],
),
),
),
);

class BallPage extends StatefulWidget {
@OverRide
_BallPageState createState() => _BallPageState();
}

class _BallPageState extends State {
@OverRide
Widget build(BuildContext context) {
return Container(

);

}
}

but it gave the same output tho, but thanks @Angela, learned a new way of doing that

@prateek-aher
Copy link

@zyllus17 @kb0207 BallPage is supposed to be a stateless widget.

Everyone is changing colors, widget names, widget types, text styles, etc. and no one is sticking to the specifications.

@jack-dendescie
Copy link

Hi ! My solution

import 'dart:math';

import 'package:flutter/material.dart';

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

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

class _BallState extends State {

int ballNumber = 1;

@OverRide
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Expanded(
child: FlatButton(
onPressed: (){

               // print (' Ball Number: '+imageRandom().toString());
                imageRandom();
              },
              child:  Image.asset('images/ball$ballNumber.png'),
          ),
      ),



    ],
  ),

);

}

imageRandom() {
setState(() {
ballNumber = Random().nextInt(4) +1;
});

}

}

@ftr9
Copy link

ftr9 commented Apr 30, 2021

heres mine, works pretty amazing

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

void main() => runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("Ask me every thing"),
),
body: ImagePool(),
),
),
);

class ImagePool extends StatefulWidget {
@OverRide
_ImagePoolState createState() => _ImagePoolState();
}

class _ImagePoolState extends State {
int PoolImage = 4;
@OverRide
Widget build(BuildContext context) {
return Container(
color: Colors.lightBlue,
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
TextButton(
onPressed: () {
setState(() {
PoolImage = Random().nextInt(5) + 1;
print(PoolImage);
});
},
child: Image.asset('images/ball$PoolImage.png'),
),
]),
);
}
}

@roariyo
Copy link

roariyo commented Jul 9, 2021

I was so delighted to hear that programmers are lazy... lol

This challenge took me only about 7 mins as I simply copied and tweaked the Diceee Project to get the Magic 8 done.

Thanks @Angela for holding my hands on the path to becoming a Dart Developer. So happy that my dream is becoming reality!!!

I will be hosting some students in my Mobile App development course using Flutter and Dart. Thanks once again Angela

@omarahmed8k
Copy link

import 'package:flutter/material.dart';

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

class BallPage extends StatefulWidget {
@OverRide
_BallPageState createState() => _BallPageState();
}

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

@yogithesymbian
Copy link

yogithesymbian commented Aug 10, 2021

nice by the way , you can comment with icon < > and paste your code for more beautifull on right after icon H B I .
or just typ triple ``` in start of text and the end of code text ...

@Obaydullah-Hasib
Copy link

I hope this will put an end to all the doubts to the newbies to this course.

What I did was what was done in the previous lesson and I know by experience that my method is better because keeping the AppBar() in the topmost widget helps navigate the code better. When you will go on to make more and more pages later on and would want the same AppBar in every page, it does not make sense to keep creating new widgets for such small things.

Verdict : Both the answers are absolutely correct. It is how you prefer to do it.

agreed

@MuhammadRahman2
Copy link

import 'dart:math';

import 'package:flutter/material.dart';

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

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

@OverRide
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
int imageNO = 1;

void changeImage() {
setState(() {
imageNO = Random().nextInt(5) +1;
});
}

@OverRide
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.blue[800],
title: Text("Ask me Every thing"),
),
body: Center(
child: Expanded(
child: TextButton(
onPressed: () {
changeImage();
},
child: Image.asset('images/ball$imageNO.png'),
),
),
),
),
);
}
}

@Its-NK
Copy link

Its-NK commented Sep 16, 2021

Hello ruudkalis,

I always use “centerTitle: true;” in order to center it.

like this:

appBar: AppBar(
backgroundColor: Colors.blue.shade900,
title: Text('Ask Me Anything'),
centerTitle: true;
),

Idk why her code don’t have it and the title is in center.. but..

Hope I helped u.

Regards

Oh ComOn man !! She already told us in her lectures about it.. it is because she is debugging in IOS Simulator. for your knowlwdge ios always shows the title in the center of appbar. but android doesn't , you have to do manually like you do it already

@hello-favour
Copy link

hello-favour commented Oct 28, 2021

//please anything wrong with this code

import 'package:flutter/material.dart';

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

class MagicPage extends StatelessWidget {

@OverRide
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
backgroundColor: Colors.blue.shade900,
title: Text("Ask Me Anything"),
centerTitle: true,
),
body: BallPage(),
),
);
}
}

class BallPage extends StatefulWidget {
@OverRide
_BallPageState createState() => _BallPageState();
}

class _BallPageState extends State {
@OverRide
Widget build(BuildContext context) {
return Container();
}
}

@azeezco
Copy link

azeezco commented Nov 24, 2021

This is my solution, worked like charm
`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(
title: Text('Ask me anyhing'), backgroundColor: Colors.blue.shade900),
body: Container(),
);
}
}
`

@azeezco
Copy link

azeezco commented Nov 24, 2021

//please anything wrong with this code

import 'package:flutter/material.dart';

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

class MagicPage extends StatelessWidget {

@OverRide Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.blue, appBar: AppBar( backgroundColor: Colors.blue.shade900, title: Text("Ask Me Anything"), centerTitle: true, ), body: BallPage(), ), ); } }

class BallPage extends StatefulWidget { @OverRide _BallPageState createState() => _BallPageState(); }

class _BallPageState extends State { @OverRide Widget build(BuildContext context) { return Container(); } }

Use a stateless widget instead of a stateful widget, yes it is going to work but you dont need to save a state yet. so keep it simple

@thenanosoft
Copy link

thenanosoft commented Dec 16, 2021

// this code shows images in a sequence and when the images is completed then images shows from the start again

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.amber,
        appBar: AppBar(
          backgroundColor: Colors.amberAccent[400],
          title: Center(child: Text('Magic 8 Ball')),
        ),
        body: _BallPoll(),
      ),
    ),
  );
}

class _BallPoll extends StatefulWidget {
  @override
  _BallPollState createState() => _BallPollState();
}

class _BallPollState extends State<_BallPoll> {
  int newBallImage = 1;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: TextButton(
          onPressed: () {
            setState(() {
              newBallImage++;
              if (newBallImage == 6) {
                newBallImage = 1;
              }
            });
          },
          child: Image.asset('images/ball$newBallImage.png'),
        ),
      ),
    );
  }
}

@KhuloodBatis
Copy link

import 'package:flutter/material.dart';

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

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

@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
backgroundColor: Colors.blue[900],
title: Text('Ask Me Any thing'),
),
body: Container(),
);
}
}

@ntikoo
Copy link

ntikoo commented Mar 24, 2022

import 'dart:math';

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

void main() => runApp(
MaterialApp(
home: Center(
child: Scaffold(
appBar: AppBar(
title: Text('Ask me Anything',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),),
backgroundColor: Colors.blue.shade600,
),
backgroundColor: Colors.blue.shade400,
body: MagicBall(),
),
),
)
);

class MagicBall extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return Ball();
}
}

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

class _BallState extends State {
int ballNumber = 0;
@OverRide
Widget build(BuildContext context) {
ballNumber = Random().nextInt(5) + 1;
return Center(
child: Row(
children: [
Expanded(
child: FlatButton(
onPressed: (){
setState(() {
ballNumber = Random().nextInt(5) + 1;
print('You Clicked me left One');
});
},
child: Image.asset('images/ball$ballNumber.png')),
),

    ],

      ),
);

}
}

@danishulhassan7
Copy link

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

void main() {
return runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: AmaMagicBall(),
),
);
}

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

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

class _AmaMagicBallState extends State {
int amaBall = 1;

updAmaBall() {
setState(() {
amaBall = Random().nextInt(5) + 1;
});
}
@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(255, 3, 132, 132),
appBar: AppBar(
title: const Center(child: Text('AMA Magic Ball')),
backgroundColor: const Color.fromARGB(255, 3, 124, 112),
),
body: Center(
child: Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.transparent,
shadowColor: Colors.transparent,
),
onPressed: () {
updAmaBall();
print('Ball clicked!');
},
child: Image.asset('images/ball$amaBall.png'),
),
),
),
),
);
}
}**

@ronytarafder99
Copy link

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

void main() {
runApp(
MagicBall(),
);
}

class MagicBall extends StatefulWidget {
@OverRide
_MagicBallState createState() => _MagicBallState();
}

class _MagicBallState extends State {
int ans = 1;

void pressed() {
setState(() {
ans = Random().nextInt(5) + 1;
});
}

@OverRide
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Ask Me Anything'),
backgroundColor: Colors.blue[900],
),
backgroundColor: Colors.blue,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () {
pressed();
},
child: Image(
image: AssetImage('images/ball$ans.png'),
),
),
],
),
),
);
}
}

@RussoAhmed
Copy link

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
runApp(
MagicBall(),
);
}

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

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

class _MagicBallState extends State {
int num = Random().nextInt(5) + 1;
void pressed() {
setState(() {
num = 1 + Random().nextInt(5);
});
}

@OverRide
Widget build(BuildContext context) {
var ans;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Ask me anything'),
backgroundColor: Colors.blue.shade900,
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () {
pressed();
},
child: Image(
image: AssetImage('image/ball$num.png'),
),
),
],
),
),
);
}
}

@OverRide
Widget build(BuildContext context) {
// TODO: implement build
throw UnimplementedError();
}

@GaneshxD
Copy link

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

void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.lime,
appBar: AppBar(
title: const Center(
child: Text(
'Ask Me every thing',
),
),
),
body: const MyApp(),
),
),
);
}

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

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

class _MyAppState extends State {
int a = 1;
void gd(){
setState(() {
a=Random().nextInt(5)+1;
});
}

@OverRide
Widget build(BuildContext context) {
return Center(
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () {
gd();
},
child: Image.asset('images/ball$a.png'),
),
),
],
),
);
}
}

@Hackathonwave
Copy link

// This is my WhatsApp number for connection
import 'package: flutter/material.dart';

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

class BallPage extends StatelessWidget {
@OverRide

Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.red,
appBar: AppBar(
backgroundColor: Colors.red.Shade700,
title: Text('Uforo Ekong is my name'),
),
body: Container(),
);
}
}

@Hackathonwave
Copy link

I have successfully completed the assignment to create a stateless widget as taught by Angela Yu in the Flutter development course on Udemy.

Overall, this assignment has been a valuable learning opportunity, allowing me to practice creating stateless widgets and improving my skills in customizing widget behavior and appearance. I am excited to continue exploring Flutter development through this course and further expand my knowledge.

I wish to connecting with other flutter developers

@Moinnoorani
Copy link

This is my code!!

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

void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text(
'Ask Me Anything',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
fontFamily: 'SourceCodePro'),
),
centerTitle: true,
backgroundColor: Colors.blue.shade900,
),
body: Ball())));
}

class Ball extends StatefulWidget {
const Ball({super.key});

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

class _BallState extends State {
@OverRide
int Magicball = 1;

void randomAnswerGenerator() {
setState(() {
Magicball = Random().nextInt(5) + 1;
});
}

Widget build(BuildContext context) {
return TextButton(
onPressed: () {
randomAnswerGenerator();
},
child: Center(child: Image.asset('images/ball$Magicball.png')),
);
}
}

//
//

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment