feat: UI redo for in or out picker

This commit is contained in:
louis 2024-03-20 11:26:44 +08:00
parent c9d6adc670
commit 7f309e999b
7 changed files with 172 additions and 194 deletions

View File

@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/app_theme.dart';
import 'package:sk_base_mobile/constants/bg_color.dart';
import 'package:sk_base_mobile/constants/constants.dart';
import 'package:sk_base_mobile/screens/inventory_inout/inventory_inout_controller.dart';
import 'package:sk_base_mobile/store/auth.store.dart';

View File

@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/app_theme.dart';
import 'package:sk_base_mobile/constants/bg_color.dart';
import 'package:sk_base_mobile/screens/inventory_inout/inventory_inout_controller.dart';
import 'package:sk_base_mobile/util/screen_adaper_util.dart';
import 'dates.dart';

View File

@ -1,11 +1,9 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/app_theme.dart';
import 'package:sk_base_mobile/db_helper/dbHelper.dart';
import 'package:sk_base_mobile/screens/new_inventory_inout/new_inventory_inout.dart';
import 'package:sk_base_mobile/util/date.util.dart';
import 'package:sk_base_mobile/util/logger_util.dart';
import 'package:sk_base_mobile/util/modal.util.dart';
import 'package:sk_base_mobile/util/screen_adaper_util.dart';
@ -29,7 +27,14 @@ class InventoryInoutController extends GetxController {
RxInt barIndex = 0.obs;
RxList model = [].obs;
final ScrollController scrollController = ScrollController();
// decoration: const BoxDecoration(
// borderRadius:
// BorderRadius.all(Radius.circular(30)),
// gradient: LinearGradient(colors: [
// AppTheme.primaryColorLight,
// AppTheme.primaryColor
// ]),
// ),
Future<void> showInOrOutPickerDialog() async {
showDialog(
context: Get.overlayContext!,
@ -51,22 +56,42 @@ class InventoryInoutController extends GetxController {
AnimatedPositioned(
duration: const Duration(milliseconds: 100),
left: value * 80,
child: GestureDetector(
onTap: () {
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30)),
child: Material(
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppTheme.primaryColorLight,
AppTheme.primaryColor
],
),
borderRadius:
BorderRadius.all(Radius.circular(30)),
),
child: ElevatedButton(
onPressed: () {
Get.back();
showInventoryInoutCreateDialog();
showInventoryInoutCreateDialog('in');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.transparent),
shadowColor: MaterialStateProperty.all(
Colors.transparent),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(30)),
),
),
padding: MaterialStateProperty.all(
EdgeInsets.zero),
),
child: Container(
height: ScreenAdaper.height(350),
width: ScreenAdaper.height(350),
decoration: const BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(30)),
gradient: LinearGradient(colors: [
AppTheme.primaryColorLight,
AppTheme.primaryColor
]),
),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
@ -86,38 +111,63 @@ class InventoryInoutController extends GetxController {
color: AppTheme.nearlyWhite,
fontSize: ScreenAdaper.sp(60),
letterSpacing: ScreenAdaper.width(5),
fontWeight: FontWeight.w700),
fontWeight: FontWeight.w700,
),
)
]),
)),
],
),
),
),
),
),
),
),
AnimatedPositioned(
duration: const Duration(milliseconds: 100),
right: 80 * value,
child: GestureDetector(
onTap: () {
right: value * 80,
child: ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(30)),
child: Material(
child: Ink(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
AppTheme.primaryColorLight,
AppTheme.primaryColor
],
),
borderRadius:
BorderRadius.all(Radius.circular(30)),
),
child: ElevatedButton(
onPressed: () {
Get.back();
showInventoryInoutCreateDialog();
showInventoryInoutCreateDialog('out');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.transparent),
shadowColor: MaterialStateProperty.all(
Colors.transparent),
shape: MaterialStateProperty.all(
const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(30)),
),
),
padding: MaterialStateProperty.all(
EdgeInsets.zero),
),
child: Container(
height: ScreenAdaper.height(350),
width: ScreenAdaper.height(350),
decoration: const BoxDecoration(
// shape: BoxShape.circle,
borderRadius:
BorderRadius.all(Radius.circular(30)),
gradient: LinearGradient(colors: [
AppTheme.primaryColorLight,
AppTheme.primaryColor
]),
),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
//
Icons.remove_circle_outline,
Icons.add_circle_outline,
color: AppTheme.nearlyWhite,
size: ScreenAdaper.sp(80),
),
@ -130,12 +180,18 @@ class InventoryInoutController extends GetxController {
decoration: TextDecoration.none,
color: AppTheme.nearlyWhite,
fontSize: ScreenAdaper.sp(60),
letterSpacing:
ScreenAdaper.width(5),
fontWeight: FontWeight.w700),
letterSpacing: ScreenAdaper.width(5),
fontWeight: FontWeight.w700,
),
)
])),
)),
],
),
),
),
),
),
),
),
],
);
},
@ -144,9 +200,8 @@ class InventoryInoutController extends GetxController {
}
///
Future<void> showInventoryInoutCreateDialog() async {
Future<void> showInventoryInoutCreateDialog(String inOrOut) async {
final isTablet = Responsive.isTablet(Get.context!);
print(isTablet);
isTablet
? showGeneralDialog(
context: Get.overlayContext!,
@ -180,7 +235,7 @@ class InventoryInoutController extends GetxController {
backgroundColor: Colors.white,
context: Get.overlayContext!,
builder: (context) {
return NewInventoryInout();
return NewInventoryInout(inOrOut: inOrOut);
},
);
}

View File

@ -1,9 +1,6 @@
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/config.dart';
import '../../constants/enum.dart';
import '../../store/auth.store.dart';
import '../../util/util.dart';
class LoginController extends GetxController {
final isAgreeTerm = RxBool(false);

View File

@ -1,4 +1,3 @@
import 'package:date_format/date_format.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/app_theme.dart';
@ -8,7 +7,7 @@ import 'package:sk_base_mobile/util/screen_adaper_util.dart';
class LoginScreen extends StatelessWidget {
LoginScreen({super.key});
final _controller = Get.put<LoginController>(LoginController());
double formWidth = 700;
final double formWidth = 700;
@override
Widget build(BuildContext context) {
return Scaffold(

View File

@ -1,21 +1,16 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/app_theme.dart';
import 'package:sk_base_mobile/constants/constants.dart';
import 'package:sk_base_mobile/models/product.model.dart';
import 'package:sk_base_mobile/screens/new_inventory_inout/components/category_input.dart';
import 'package:sk_base_mobile/screens/new_inventory_inout/components/date_time.dart';
import 'package:sk_base_mobile/screens/new_inventory_inout/components/description_input.dart';
import 'package:sk_base_mobile/screens/new_inventory_inout/components/lable_input.dart';
import 'package:sk_base_mobile/widgets/gradient_button.dart';
import 'package:sk_base_mobile/screens/new_inventory_inout/new_inventory_inout_controller.dart';
import 'package:sk_base_mobile/screens/inventory_inout/components/responsive.dart';
import 'package:sk_base_mobile/util/screen_adaper_util.dart';
class NewInventoryInout extends StatelessWidget {
NewInventoryInout({super.key});
String inOrOut;
NewInventoryInout({super.key, this.inOrOut = 'in'});
final controller = Get.put(NewInventoryInoutController());
@ -131,22 +126,39 @@ class NewInventoryInout extends StatelessWidget {
TextStyle(fontSize: ScreenAdaper.sp(22), color: AppTheme.nearlyBlack),
// value: _dropdownValue,
decoration: InputDecoration(
floatingLabelBehavior: FloatingLabelBehavior.always,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(ScreenAdaper.sp(15))),
labelText: "出/入库",
label: const Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"*",
style: TextStyle(color: Colors.red),
),
Text("出/入库"),
]),
),
onChanged: (String? newValue) {
// setState(() {
// _dropdownValue = newValue;
// });
},
icon: Icon(
Icons.arrow_drop_down_outlined,
size: ScreenAdaper.sp(40),
),
items: <String>[
'入库',
'出库',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
child: Text(
value,
style: TextStyle(fontSize: ScreenAdaper.sp(30)),
),
);
}).toList(),
);
@ -160,10 +172,19 @@ class NewInventoryInout extends StatelessWidget {
controller: controller,
focusNode: focusNode,
decoration: InputDecoration(
floatingLabelBehavior: FloatingLabelBehavior.always,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(ScreenAdaper.sp(15))),
labelText: "选择产品",
));
label: const Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"*",
style: TextStyle(color: Colors.red),
),
Text("产品"),
])));
}, itemBuilder: (context, product) {
return ListTile(
title: Text(product.name ?? ''),

View File

@ -2,18 +2,14 @@ import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/app_theme.dart';
import 'package:sk_base_mobile/screens/inventory_inout/inventory_inout_controller.dart';
import 'package:sk_base_mobile/screens/landing/landing_controller.dart';
import 'package:sk_base_mobile/util/logger_util.dart';
import 'package:sk_base_mobile/util/screen_adaper_util.dart';
class FloatingCreateButton extends StatelessWidget {
FloatingCreateButton({super.key});
final controller = Get.find<LandingController>();
final inventoryInoutController = Get.find<InventoryInoutController>();
@override
Widget build(BuildContext context) {
return Obx(() => controller.showCreateBtn.value
? InkWell(
return InkWell(
borderRadius: BorderRadius.circular(ScreenAdaper.sp(50)),
onTap: inventoryInoutController.showInOrOutPickerDialog,
child: Container(
@ -21,102 +17,14 @@ class FloatingCreateButton extends StatelessWidget {
width: ScreenAdaper.height(140),
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(colors: [
AppTheme.primaryColorLight,
AppTheme.primaryColor
])),
gradient: LinearGradient(
colors: [AppTheme.primaryColorLight, AppTheme.primaryColor])),
child: Icon(
Icons.add,
color: Colors.white,
size: ScreenAdaper.sp(70),
),
),
)
: TweenAnimationBuilder(
curve: Curves.easeInOut,
tween: Tween<double>(begin: 0, end: 1),
duration: const Duration(milliseconds: 200),
builder: (context, value, child) {
return Stack(
alignment: Alignment.center,
children: [
GestureDetector(
onTap: () {
print('元素被点击');
//
},
child: Transform.translate(
offset: Offset(-ScreenAdaper.width(120) * value,
-ScreenAdaper.height(120)),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: ScreenAdaper.height(200),
width: ScreenAdaper.height(200),
decoration: const BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(30)),
gradient: LinearGradient(colors: [
AppTheme.primaryColorLight,
AppTheme.primaryColor
]),
),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.add_circle_outline,
color: AppTheme.nearlyWhite,
size: ScreenAdaper.sp(70),
),
Text(
'入库',
style: TextStyle(
color: AppTheme.nearlyWhite,
fontSize: ScreenAdaper.sp(50),
letterSpacing: ScreenAdaper.width(5),
fontWeight: FontWeight.w700),
)
]),
))),
Transform.translate(
offset: Offset(ScreenAdaper.width(120) * value,
-ScreenAdaper.height(120)),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: ScreenAdaper.height(200),
width: ScreenAdaper.height(200),
decoration: const BoxDecoration(
// shape: BoxShape.circle,
borderRadius: BorderRadius.all(Radius.circular(30)),
gradient: LinearGradient(colors: [
AppTheme.primaryColorLight,
AppTheme.primaryColor
]),
),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
//
Icons.remove_circle_outline,
color: AppTheme.nearlyWhite,
size: ScreenAdaper.sp(70),
),
Text(
'出库',
style: TextStyle(
color: AppTheme.nearlyWhite,
fontSize: ScreenAdaper.sp(50),
letterSpacing: ScreenAdaper.width(5),
fontWeight: FontWeight.w700),
)
])),
),
],
);
},
));
}
}