Random math app flutter - is there a better way? - class

Question

I have started to create a random math-app where the user first will be able to chose arithmetic. After that a random count for that arithmetic will show and the user will fill in the answer with a keyboard.
Now I'm not sure if putting each arithmetic in a class of its own (and get the random numbers there) is the best way, or if there is a better way?
I have tried to add all arithmetic choices to one class but I can't get it to work. I would somehow have to pass each choice to the right calculation in the same class.
I was thinking like with a calculator but you put in the arithmetic first - on a separate page. Would this even work?
Is it possible to get the outputs from each class gathered to one class, so that I only have to create one keyboard (even if I use keyboard.numbers)?
As I see it (but I can be dead wrong), the cons with different classes and different keybords is the size of the app.
The pros on the other hand is the possibilities to style every arithmetic class different from the other.
The code below is not finished, but it works and hopefulle gives you an idea of what I am trying to do.(I have used images for the arithmetics - added to pubspec.yaml)
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:math';
void main() {
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp]) //to make the app in portait mode
.then((_) {
//to let it load in portrait mode before launch
runApp(new MyApp());
});
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "SOME MATH",
theme: ThemeData(primarySwatch: Colors.red),
home: MyHomeScreen(),
);
}
}
class MyHomeScreen extends StatefulWidget {
#override
_MyHomeScreenState createState() => _MyHomeScreenState();
}
class _MyHomeScreenState extends State<MyHomeScreen> {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.red,
),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
//To make the appBar invisible
elevation: 0.0,
leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
//tapable without action
title: Text(
"MATH",
style: TextStyle(fontSize: 25.0),
),
),
body: ListView(
//would listView.builder be better?
children: <Widget>[
GestureDetector(
//could be changed to inkWell
child: _ArithmeticCard(
headImageAssetPath: 'assets/plus.png',
),
onTap: () {
//make it pass to stateful
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new MyPlus()));
},
),
GestureDetector(
child: _ArithmeticCard(
headImageAssetPath: 'assets/minus.png',
),
onTap: () {
//new taps to different classes
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new MyMinus()));
},
),
GestureDetector(
child: _ArithmeticCard(
headImageAssetPath: 'assets/times.png',
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new MyTimes()));
},
),
GestureDetector(
child: _ArithmeticCard(
headImageAssetPath: 'assets/division.png',
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new MyDivision()));
},
),
],
),
),
);
}
}
class _ArithmeticCard extends StatelessWidget {
final String headImageAssetPath;
_ArithmeticCard({this.headImageAssetPath});
//creating Card
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom:
10.0),
child: Card(
elevation: 10.0,
child: Column(
children: <Widget>[
Image.asset(
headImageAssetPath,
width: double.infinity,
height: 150.0,
fit: BoxFit.cover,
),
],
),
),
);
}
}
class MyPlus extends StatefulWidget {
//class for adding
#override
_MyPlusState createState() => _MyPlusState();
}
class _MyPlusState extends State<MyPlus> {
final random = Random();
int a, b, sum;
String output;
void changeData() {
setState(() {
a = random.nextInt(10);
b = random.nextInt(10);
sum = a + b;
output = "$a + $b = ";
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(
"$output",
style: TextStyle(fontSize: 48.0),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.amber, //just playing with colors
child: Icon(Icons.refresh, color: Colors.white),
onPressed: changeData,
),
);
}
}
class MyMinus extends StatefulWidget {
//class for subtraktion
#override
_MyMinusState createState() => _MyMinusState();
}
class _MyMinusState extends State<MyMinus> {
final random = Random();
int a, b, sum;
String output;
void changeData() {
setState(() {
a = random.nextInt(10);
b = random.nextInt(10);
if (a >= b) {
sum = a - b;
output = "$a - $b =";
} else {
//Don't want the sum to be negative
sum = b - a;
output = "$b - $a =";
}
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(
"$output",
style: TextStyle(fontSize: 48.0),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.lime,
child: Icon(Icons.refresh, color: Colors.black),
onPressed: changeData,
),
);
}
}
class MyTimes extends StatefulWidget {
#override
_MyTimesState createState() => _MyTimesState();
}
class _MyTimesState extends State<MyTimes> {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Colors.purpleAccent),
child: Text("This is my times"),
);
}
}
class MyDivision extends StatefulWidget {
#override
_MyDivisionState createState() => _MyDivisionState();
}
class _MyDivisionState extends State<MyDivision> {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.limeAccent,
),
child: Text("This is my division"),
);
}
}
Any help or advice here is very appreciated. Thank you.