first commit
This commit is contained in:
kicap1992
103
lib/pages/binatang.dart
Normal file
103
lib/pages/binatang.dart
Normal file
@ -0,0 +1,103 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
|
||||
class BinatangPage extends HookWidget {
|
||||
const BinatangPage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Binatang'),
|
||||
),
|
||||
body: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
Image.asset(
|
||||
"assets/bg.jpg",
|
||||
fit: BoxFit.cover,
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
colorBlendMode: BlendMode.darken,
|
||||
),
|
||||
Center(
|
||||
// add two buttons, one named "Pilih Kategori" , the other named "Tentang"
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
//make the button same width
|
||||
SizedBox(
|
||||
// width is half of the screen width
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
child: ElevatedButton(
|
||||
child: const Text('Burung'),
|
||||
onPressed: () {
|
||||
Navigator.pushNamed(context, '/mewarna1',
|
||||
arguments: {'kategori': 'hewan', 'nama': 'burung'});
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
child: ElevatedButton(
|
||||
child: const Text('Kelinci'),
|
||||
onPressed: () {
|
||||
Navigator.pushNamed(context, '/mewarna1', arguments: {
|
||||
'kategori': 'hewan',
|
||||
'nama': 'kelinci'
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
child: ElevatedButton(
|
||||
child: const Text('Gajah'),
|
||||
onPressed: () {
|
||||
Navigator.pushNamed(context, '/mewarna1',
|
||||
arguments: {'kategori': 'hewan', 'nama': 'gajah'});
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
child: ElevatedButton(
|
||||
child: const Text('Monyet'),
|
||||
onPressed: () {
|
||||
Navigator.pushNamed(context, '/mewarna1',
|
||||
arguments: {'kategori': 'hewan', 'nama': 'monyet'});
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
child: ElevatedButton(
|
||||
child: const Text('Singa'),
|
||||
onPressed: () {
|
||||
Navigator.pushNamed(context, '/mewarna1',
|
||||
arguments: {'kategori': 'hewan', 'nama': 'singa'});
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// child: Text('Home Page'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
126
lib/pages/mewarna.dart
Normal file
126
lib/pages/mewarna.dart
Normal file
@ -0,0 +1,126 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
|
||||
class MewarnaPage extends HookWidget {
|
||||
const MewarnaPage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final double width = MediaQuery.of(context).size.width;
|
||||
final double height = MediaQuery.of(context).size.height;
|
||||
final points = useState<List<Offset?>>([]);
|
||||
|
||||
return Scaffold(
|
||||
body: Stack(
|
||||
children: [
|
||||
Container(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Color.fromRGBO(138, 35, 135, 1.0),
|
||||
Color.fromRGBO(233, 64, 87, 1.0),
|
||||
Color.fromRGBO(242, 113, 33, 1.0),
|
||||
])),
|
||||
),
|
||||
Center(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: width * 0.80,
|
||||
height: height * 0.80,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(20.0)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.4),
|
||||
blurRadius: 5.0,
|
||||
spreadRadius: 1.0,
|
||||
)
|
||||
],
|
||||
),
|
||||
child: GestureDetector(
|
||||
onPanDown: (details) {
|
||||
points.value.add(details.globalPosition);
|
||||
// print(points);
|
||||
},
|
||||
onPanUpdate: (details) {
|
||||
points.value.add(details.globalPosition);
|
||||
},
|
||||
onPanEnd: (details) {
|
||||
points.value.add(null);
|
||||
// print(details);
|
||||
},
|
||||
child: ClipRRect(
|
||||
borderRadius:
|
||||
const BorderRadius.all(Radius.circular(20.0)),
|
||||
child: CustomPaint(
|
||||
painter: MyCustomPainter(points: points.value),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
Container(
|
||||
width: width * 0.80,
|
||||
decoration: const BoxDecoration(
|
||||
borderRadius: BorderRadius.all(Radius.circular(20.0)),
|
||||
color: Colors.white),
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: () {}, icon: const Icon(Icons.color_lens)),
|
||||
IconButton(
|
||||
onPressed: () {},
|
||||
icon: const Icon(Icons.layers_clear)),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyCustomPainter extends CustomPainter {
|
||||
List<Offset?> points;
|
||||
|
||||
MyCustomPainter({required this.points});
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
Paint background = Paint()..color = Colors.white;
|
||||
Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
|
||||
canvas.drawRect(rect, background);
|
||||
|
||||
// print(points);
|
||||
Paint paint = Paint();
|
||||
paint.color = Colors.transparent;
|
||||
paint.strokeWidth = 5.0;
|
||||
paint.isAntiAlias = true;
|
||||
paint.strokeCap = StrokeCap.round;
|
||||
|
||||
for (int i = 0; i < points.length - 1; i++) {
|
||||
if (points[i] != null && points[i + 1] != null) {
|
||||
canvas.drawLine(points[i]!, points[i + 1]!, paint);
|
||||
} else if (points[i] != null && points[i + 1] == null) {
|
||||
canvas.drawPoints(PointMode.points, [points[i]!], paint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
296
lib/pages/mewarna1.dart
Normal file
296
lib/pages/mewarna1.dart
Normal file
@ -0,0 +1,296 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
|
||||
// import 'package:flutter/services.dart';
|
||||
// import 'dart:ui' as ui;
|
||||
|
||||
import '../controller/myCustonPainter.dart';
|
||||
// import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
|
||||
class Mewarna1Page extends StatefulWidget {
|
||||
const Mewarna1Page({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<Mewarna1Page> createState() => _Mewarna1PageState();
|
||||
}
|
||||
|
||||
class _Mewarna1PageState extends State<Mewarna1Page> {
|
||||
// List<Offset?> points = [];
|
||||
List<DrawingArea?> points = [];
|
||||
// List<DrawingArea?> undoPoints = [];
|
||||
Color selectedColor = Colors.black.withOpacity(0.08);
|
||||
double strokeWidth = 2.0;
|
||||
// ui.Image? image;
|
||||
|
||||
late Map args;
|
||||
|
||||
// @override
|
||||
// void initState() {
|
||||
// // TODO: implement initState
|
||||
// super.initState();
|
||||
// // selectedColor = Colors.black;
|
||||
// // strokeWidth = 2.0;
|
||||
// // loadImage('assets/hewan/singa.jpg');
|
||||
// args = ModalRoute.of(context)?.settings.arguments as Map;
|
||||
// print(args);
|
||||
// }
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
// TODO: implement didChangeDependencies
|
||||
super.didChangeDependencies();
|
||||
args = ModalRoute.of(context)?.settings.arguments as Map;
|
||||
print(args);
|
||||
}
|
||||
|
||||
void selectColor() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('Pilih warna'),
|
||||
content: SingleChildScrollView(
|
||||
child: BlockPicker(
|
||||
pickerColor: selectedColor,
|
||||
onColorChanged: (color) {
|
||||
print(colorToHex(color));
|
||||
setState(() {
|
||||
selectedColor = color.withOpacity(0.08);
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
ElevatedButton(
|
||||
child: const Text('OK'),
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final double width = MediaQuery.of(context).size.width;
|
||||
final double height = MediaQuery.of(context).size.height;
|
||||
// final ValueNotifier<List<Offset>> points = useState([]);
|
||||
|
||||
return WillPopScope(
|
||||
onWillPop: _onWillPopScope,
|
||||
child: Scaffold(
|
||||
body: Stack(
|
||||
children: [
|
||||
Container(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Color.fromRGBO(138, 35, 135, 1.0),
|
||||
Color.fromRGBO(233, 64, 87, 1.0),
|
||||
Color.fromRGBO(242, 113, 33, 1.0),
|
||||
])),
|
||||
),
|
||||
Center(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: width * 0.80,
|
||||
height: height * 0.80,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius:
|
||||
const BorderRadius.all(Radius.circular(20.0)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.4),
|
||||
blurRadius: 5.0,
|
||||
spreadRadius: 1.0,
|
||||
)
|
||||
],
|
||||
image: DecorationImage(
|
||||
image: AssetImage("assets/" +
|
||||
args['kategori'] +
|
||||
"/" +
|
||||
args['nama'] +
|
||||
".jpg"),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
child: GestureDetector(
|
||||
onPanDown: (details) {
|
||||
setState(() {
|
||||
// points.add(details.localPosition);
|
||||
// print(points);
|
||||
points.add(
|
||||
DrawingArea(
|
||||
point: details.localPosition,
|
||||
areaPaint: Paint()
|
||||
..strokeCap = StrokeCap.round
|
||||
..isAntiAlias = true
|
||||
..color = selectedColor
|
||||
..strokeWidth = strokeWidth,
|
||||
),
|
||||
);
|
||||
});
|
||||
},
|
||||
onPanUpdate: (details) {
|
||||
setState(() {
|
||||
// points.add(details.localPosition);
|
||||
// print(points);
|
||||
points.add(
|
||||
DrawingArea(
|
||||
point: details.localPosition,
|
||||
areaPaint: Paint()
|
||||
..strokeCap = StrokeCap.round
|
||||
..isAntiAlias = true
|
||||
..color = selectedColor
|
||||
..strokeWidth = strokeWidth,
|
||||
),
|
||||
);
|
||||
});
|
||||
},
|
||||
onPanEnd: (details) {
|
||||
setState(() {
|
||||
points.add(null);
|
||||
// print(details);
|
||||
});
|
||||
},
|
||||
child: ClipRRect(
|
||||
borderRadius:
|
||||
const BorderRadius.all(Radius.circular(20.0)),
|
||||
child: CustomPaint(
|
||||
painter: MyCustomPainter(points: points),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
Container(
|
||||
width: width * 0.80,
|
||||
decoration: const BoxDecoration(
|
||||
borderRadius: BorderRadius.all(Radius.circular(20.0)),
|
||||
color: Colors.white),
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
selectColor();
|
||||
},
|
||||
icon: Icon(
|
||||
Icons.color_lens,
|
||||
color: selectedColor.withOpacity(1),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Slider(
|
||||
min: 1.0,
|
||||
max: 7.0,
|
||||
activeColor: selectedColor.withOpacity(1),
|
||||
value: strokeWidth,
|
||||
onChanged: (value) {
|
||||
setState(() {
|
||||
strokeWidth = value;
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
setState(() {
|
||||
if (points.isNotEmpty) {
|
||||
points.removeLast();
|
||||
}
|
||||
});
|
||||
},
|
||||
onLongPress: () {
|
||||
//remove the 10 last points
|
||||
setState(() {
|
||||
if (points.isNotEmpty) {
|
||||
if (points.length > 20) {
|
||||
points.removeRange(
|
||||
points.length - 20, points.length);
|
||||
} else {
|
||||
points.clear();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
child: Icon(
|
||||
Icons.layers_clear,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 10,
|
||||
),
|
||||
// IconButton(
|
||||
// onPressed: () {
|
||||
// // points.clear();
|
||||
// // points.removeLast();
|
||||
|
||||
// // search for undoPoints on points and remove it
|
||||
// setState(() {
|
||||
// // points.removeLast();
|
||||
// if (points.isNotEmpty) {
|
||||
// points.removeLast();
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
// icon: Icon(Icons.layers_clear),
|
||||
// ),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Future loadImage(String path) async {
|
||||
// final data = await rootBundle.load(path);
|
||||
// final bytes = data.buffer.asUint8List();
|
||||
// final image = await decodeImageFromList(bytes);
|
||||
// setState(() {
|
||||
// this.image = image;
|
||||
// });
|
||||
// }
|
||||
|
||||
Future<bool> _onWillPopScope() async {
|
||||
// return false;
|
||||
return await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('Berhenti Mewarna'),
|
||||
content: const Text('Apakah anda yakin ingin berhenti mewarna?'),
|
||||
actions: [
|
||||
ElevatedButton(
|
||||
child: const Text('Tidak'),
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop(false);
|
||||
},
|
||||
),
|
||||
ElevatedButton(
|
||||
child: const Text('Ya'),
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop(true);
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
primary: Colors.red,
|
||||
// backgroundColor: Colors.red,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
) ??
|
||||
false;
|
||||
}
|
||||
}
|
||||
80
lib/pages/pilihKategori.dart
Normal file
80
lib/pages/pilihKategori.dart
Normal file
@ -0,0 +1,80 @@
|
||||
// ignore_for_file: file_names
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
|
||||
class PilihKategori extends HookWidget {
|
||||
const PilihKategori({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Pilih Kategori'),
|
||||
),
|
||||
body: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
Image.asset(
|
||||
"assets/bg.jpg",
|
||||
fit: BoxFit.cover,
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
colorBlendMode: BlendMode.darken,
|
||||
),
|
||||
Center(
|
||||
// add two buttons, one named "Pilih Kategori" , the other named "Tentang"
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
//make the button same width
|
||||
SizedBox(
|
||||
// width is half of the screen width
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
child: ElevatedButton(
|
||||
child: const Text('Binatang'),
|
||||
onPressed: () {
|
||||
Navigator.pushNamed(context, '/binatang');
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
child: ElevatedButton(
|
||||
child: const Text('Kendaraan'),
|
||||
onPressed: () {},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
child: ElevatedButton(
|
||||
child: const Text('Sayur-Sayuran'),
|
||||
onPressed: () {},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
child: ElevatedButton(
|
||||
child: const Text('Buah-Buahan'),
|
||||
onPressed: () {},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// child: Text('Home Page'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
18
lib/pages/tentang.dart
Normal file
18
lib/pages/tentang.dart
Normal file
@ -0,0 +1,18 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
|
||||
class Tentang extends HookWidget {
|
||||
const Tentang({ Key? key }) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title : const Text('Tentang'),
|
||||
),
|
||||
body: const Center(
|
||||
child: Text('Tentang'),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user