Flutter: Magic 8 Ball Project

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

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

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

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

class _BallState extends State<Ball> {
int ballNumber = 1;
@override
Widget build(BuildContext context) {
return Center(
child: FlatButton(
onPressed: () {
setState(() {
ballNumber = Random().nextInt(4) + 1;
});
},
child: Image.asset("images/ball$ballNumber.png"),
),
);
}
}

Step 1 — Set up

import 'package:flutter/material.dart'; void main() => runApp(      
MaterialApp(
home: null,
),
);

Step 2 — Create a Stateless Widget

class BallPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}
class BallPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue[900],
title: Text("Ask Me Anything"),
),
body: Container(),
backgroundColor: Colors.blue,
);
}
}

Step 3 — Create a Stateful Widget

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

class _State extends State<> {
@override
Widget build(BuildContext context) {
return Container();
}
}
class BallPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue[900],
title: Text("Ask Me Anything"),
),
body: Ball(),
backgroundColor: Colors.blue,
);
}
}
class Ball extends StatefulWidget {
@override
_BallState createState() => _BallState();
}

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

Step 4 — Make it Interactive

class _BallState extends State<Ball> {
@override
Widget build(BuildContext context) {
return Center(
child: FlatButton(
onPressed: () {
setState(() {

});
},
child: Image.asset("images/ball1.png"),
),
);
}
}

Step 5 — Randomise it

import 'dart:math';
class Ball extends StatefulWidget {
@override
_BallState createState() => _BallState();
}

class _BallState extends State<Ball> {
int ballNumber = 1;
@override
Widget build(BuildContext context) {
return Center(
child: FlatButton(
onPressed: () {
setState(() {
ballNumber = Random().nextInt(4) + 1;
});
},
child: Image.asset("images/ball$ballNumber.png"),
),
);
}
}

--

--

--

Backend Server Developer in South Korea

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Control the Flow: Streamlit

Timeline Unity: Animating a Camera Shot using a Look At Object.

The Benefits of Being Your Own Boss During Christmas

AGILE PROJECT MANAGEMENT FRAMEWORK

The themes are always changing, but the tokens stay the same

Retrying a Function or an Effect

Work effectively on a large codebase

[VOTE] #AGIP7 — Earn XP for Successful Signal Proposals

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nicholas An

Nicholas An

Backend Server Developer in South Korea

More from Medium

BLoC with Flutter!

Why Flutter Is The Best Framework For Hybrid App Development

State Management in Flutter.

Article image.

Flutter Custom In-App Keyboard