1
This commit is contained in:
zhutao
76
lib/page/home/home_page.dart
Normal file
76
lib/page/home/home_page.dart
Normal file
@@ -0,0 +1,76 @@
|
||||
import 'package:derma_flutter/router/config/route_paths.dart';
|
||||
import 'package:file_picker/file_picker.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_easyloading/flutter_easyloading.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:image_picker/image_picker.dart';
|
||||
|
||||
import '../../api/endpoints/skin_api.dart';
|
||||
import '../../widgets/common/app_backend.dart';
|
||||
import '../../widgets/common/app_header.dart';
|
||||
import 'widget/tip_widget.dart';
|
||||
import 'widget/upload_widget.dart';
|
||||
|
||||
class HomePage extends StatefulWidget {
|
||||
const HomePage({super.key});
|
||||
|
||||
@override
|
||||
State<HomePage> createState() => _HomePageState();
|
||||
}
|
||||
|
||||
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
|
||||
final ImagePicker _picker = ImagePicker();
|
||||
|
||||
///打开相机拍照
|
||||
void _handTakePhoto() async {
|
||||
var photo = await _picker.pickImage(source: ImageSource.camera);
|
||||
if (photo != null) {
|
||||
_startDetect(photo.path);
|
||||
}
|
||||
}
|
||||
|
||||
///选择图片
|
||||
void _handPickImage() async {
|
||||
var result = await FilePicker.platform.pickFiles(
|
||||
type: FileType.image,
|
||||
allowMultiple: false,
|
||||
);
|
||||
if (result != null) {
|
||||
_startDetect(result.files[0].path!);
|
||||
}
|
||||
}
|
||||
|
||||
///开始检测
|
||||
void _startDetect(String path) async {
|
||||
EasyLoading.show(
|
||||
status: 'Skin analysis in progress, please wait...',
|
||||
maskType: EasyLoadingMaskType.clear,
|
||||
);
|
||||
var res = await skinDetectApi(path);
|
||||
EasyLoading.dismiss();
|
||||
context.push(RoutePaths.detail, extra: res);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
super.build(context);
|
||||
return Scaffold(
|
||||
resizeToAvoidBottomInset: false,
|
||||
body: AppBackend(
|
||||
child: Column(
|
||||
children: [
|
||||
AppHeader(),
|
||||
UploadBox(
|
||||
onPhoto: _handTakePhoto,
|
||||
onSelect: _handPickImage,
|
||||
),
|
||||
TipBox(),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
bool get wantKeepAlive => true;
|
||||
}
|
||||
57
lib/page/home/widget/tip_widget.dart
Normal file
57
lib/page/home/widget/tip_widget.dart
Normal file
@@ -0,0 +1,57 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class TipBox extends StatelessWidget {
|
||||
TipBox({super.key});
|
||||
|
||||
final List<String> tips = [
|
||||
"Ensure good lighting",
|
||||
"Keep the camera steady",
|
||||
"Fill the frame with the skin area",
|
||||
"Avoid shadows and glare",
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
margin: EdgeInsets.only(top: 20),
|
||||
padding: EdgeInsets.all(15),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
color: Theme.of(context).cardColor,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Color(0xffE9E9E9),
|
||||
spreadRadius: 2,
|
||||
blurRadius: 9,
|
||||
offset: Offset(1, 2), // changes position of shadow
|
||||
),
|
||||
],
|
||||
),
|
||||
child: DefaultTextStyle(
|
||||
style: TextStyle(color: Color(0xff1A8C8C)),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Tips:",
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
color: Color(0xff1A8C8C),
|
||||
),
|
||||
),
|
||||
ListView.builder(
|
||||
itemExtent: 25,
|
||||
shrinkWrap: true,
|
||||
physics: NeverScrollableScrollPhysics(),
|
||||
padding: EdgeInsets.all(10),
|
||||
itemBuilder: (_, index) {
|
||||
return Text("-${tips[index]}.");
|
||||
},
|
||||
itemCount: tips.length,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
117
lib/page/home/widget/upload_widget.dart
Normal file
117
lib/page/home/widget/upload_widget.dart
Normal file
@@ -0,0 +1,117 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
|
||||
class UploadBox extends StatelessWidget {
|
||||
final Function() onSelect;
|
||||
final Function() onPhoto;
|
||||
|
||||
const UploadBox({
|
||||
super.key,
|
||||
required this.onSelect,
|
||||
required this.onPhoto,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
margin: EdgeInsets.only(top: 30),
|
||||
width: double.infinity,
|
||||
height: 350,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).cardColor,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Color(0xffE9E9E9),
|
||||
spreadRadius: 2,
|
||||
blurRadius: 9,
|
||||
offset: Offset(1, 2), // changes position of shadow
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
child: Image.asset(
|
||||
"assets/image/bg_hushi.png",
|
||||
width: 0.7.sw,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
padding: EdgeInsets.all(15),
|
||||
child: Text(
|
||||
"Take a clear photo of the skin area you’d like to analyze.Our AI will provide instant health insights.",
|
||||
style: Theme.of(context).textTheme.labelSmall,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
spacing: 20,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
"Analyze Your Skin",
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
_btn(
|
||||
colors: [Color(0xff107870), Color(0xff1EDECF)],
|
||||
title: "Take photo",
|
||||
onTap: (){
|
||||
onPhoto();
|
||||
},
|
||||
),
|
||||
_btn(
|
||||
colors: [Color(0xffFFFFFF), Color(0xffC6C6C6)],
|
||||
title: "Upload Photo",
|
||||
textColor: Color(0xff000000),
|
||||
onTap: (){
|
||||
onSelect();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _btn({
|
||||
required List<Color> colors,
|
||||
Color textColor = Colors.white,
|
||||
required String title,
|
||||
required Function() onTap,
|
||||
}) {
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
width: 120,
|
||||
height: 38,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
gradient: LinearGradient(
|
||||
colors: colors,
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
title,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: textColor,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user