From 7f309e999b5956e5a6e8e8e085ecf1c6ea577496 Mon Sep 17 00:00:00 2001 From: louis <869322496@qq.com> Date: Wed, 20 Mar 2024 11:26:44 +0800 Subject: [PATCH] feat: UI redo for in or out picker --- .../components/custom_app_bar.dart | 1 - .../components/date_container.dart | 1 - .../inventory_inout_controller.dart | 185 ++++++++++++------ lib/screens/login/login.controller.dart | 3 - lib/screens/login/login.dart | 3 +- .../new_inventory_inout.dart | 47 +++-- lib/widgets/floating_action.dart | 126 ++---------- 7 files changed, 172 insertions(+), 194 deletions(-) diff --git a/lib/screens/inventory_inout/components/custom_app_bar.dart b/lib/screens/inventory_inout/components/custom_app_bar.dart index 2ea2ab2..5a2c096 100644 --- a/lib/screens/inventory_inout/components/custom_app_bar.dart +++ b/lib/screens/inventory_inout/components/custom_app_bar.dart @@ -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'; diff --git a/lib/screens/inventory_inout/components/date_container.dart b/lib/screens/inventory_inout/components/date_container.dart index b1260d2..8db307e 100644 --- a/lib/screens/inventory_inout/components/date_container.dart +++ b/lib/screens/inventory_inout/components/date_container.dart @@ -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'; diff --git a/lib/screens/inventory_inout/inventory_inout_controller.dart b/lib/screens/inventory_inout/inventory_inout_controller.dart index 204dbee..7d7aaf9 100644 --- a/lib/screens/inventory_inout/inventory_inout_controller.dart +++ b/lib/screens/inventory_inout/inventory_inout_controller.dart @@ -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 showInOrOutPickerDialog() async { showDialog( context: Get.overlayContext!, @@ -51,73 +56,118 @@ class InventoryInoutController extends GetxController { AnimatedPositioned( duration: const Duration(milliseconds: 100), left: value * 80, - child: GestureDetector( - onTap: () { - Get.back(); - showInventoryInoutCreateDialog(); - }, - child: Container( - height: ScreenAdaper.height(350), - width: ScreenAdaper.height(350), - decoration: const BoxDecoration( + 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)), - 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(80), + child: ElevatedButton( + onPressed: () { + Get.back(); + showInventoryInoutCreateDialog('in'); + }, + style: ButtonStyle( + backgroundColor: MaterialStateProperty.all( + Colors.transparent), + shadowColor: MaterialStateProperty.all( + Colors.transparent), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: + BorderRadius.all(Radius.circular(30)), ), - SizedBox( - height: ScreenAdaper.height(10), - ), - Text( - '入库', - style: TextStyle( + ), + padding: MaterialStateProperty.all( + EdgeInsets.zero), + ), + child: Container( + height: ScreenAdaper.height(350), + width: ScreenAdaper.height(350), + alignment: Alignment.center, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.add_circle_outline, + color: AppTheme.nearlyWhite, + size: ScreenAdaper.sp(80), + ), + SizedBox( + height: ScreenAdaper.height(10), + ), + Text( + '入库', + style: TextStyle( decoration: TextDecoration.none, 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: () { - Get.back(); - showInventoryInoutCreateDialog(); - }, - 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: [ + duration: const Duration(milliseconds: 100), + 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 - ]), + ], ), - alignment: Alignment.center, - child: Column( + borderRadius: + BorderRadius.all(Radius.circular(30)), + ), + child: ElevatedButton( + onPressed: () { + Get.back(); + 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), + 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), ), @@ -127,15 +177,21 @@ class InventoryInoutController extends GetxController { Text( '出库', style: TextStyle( - decoration: TextDecoration.none, - color: AppTheme.nearlyWhite, - fontSize: ScreenAdaper.sp(60), - letterSpacing: - ScreenAdaper.width(5), - fontWeight: FontWeight.w700), + decoration: TextDecoration.none, + color: AppTheme.nearlyWhite, + fontSize: ScreenAdaper.sp(60), + letterSpacing: ScreenAdaper.width(5), + fontWeight: FontWeight.w700, + ), ) - ])), - )), + ], + ), + ), + ), + ), + ), + ), + ), ], ); }, @@ -144,9 +200,8 @@ class InventoryInoutController extends GetxController { } /// 打开新建库存出入库对话框 - Future showInventoryInoutCreateDialog() async { + Future 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); }, ); } diff --git a/lib/screens/login/login.controller.dart b/lib/screens/login/login.controller.dart index dafcab7..eabe2c8 100644 --- a/lib/screens/login/login.controller.dart +++ b/lib/screens/login/login.controller.dart @@ -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); diff --git a/lib/screens/login/login.dart b/lib/screens/login/login.dart index 79fc5df..706acf4 100644 --- a/lib/screens/login/login.dart +++ b/lib/screens/login/login.dart @@ -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()); - double formWidth = 700; + final double formWidth = 700; @override Widget build(BuildContext context) { return Scaffold( diff --git a/lib/screens/new_inventory_inout/new_inventory_inout.dart b/lib/screens/new_inventory_inout/new_inventory_inout.dart index 8b87eb2..affcc4f 100644 --- a/lib/screens/new_inventory_inout/new_inventory_inout.dart +++ b/lib/screens/new_inventory_inout/new_inventory_inout.dart @@ -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: [ '入库', '出库', ].map>((String value) { return DropdownMenuItem( 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( - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(ScreenAdaper.sp(15))), - labelText: "选择产品", - )); + floatingLabelBehavior: FloatingLabelBehavior.always, + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(ScreenAdaper.sp(15))), + 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 ?? ''), diff --git a/lib/widgets/floating_action.dart b/lib/widgets/floating_action.dart index 9513959..3cef6d1 100644 --- a/lib/widgets/floating_action.dart +++ b/lib/widgets/floating_action.dart @@ -2,121 +2,29 @@ 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(); final inventoryInoutController = Get.find(); @override Widget build(BuildContext context) { - return Obx(() => controller.showCreateBtn.value - ? InkWell( - borderRadius: BorderRadius.circular(ScreenAdaper.sp(50)), - onTap: inventoryInoutController.showInOrOutPickerDialog, - child: Container( - height: ScreenAdaper.height(140), - width: ScreenAdaper.height(140), - decoration: const BoxDecoration( - shape: BoxShape.circle, - gradient: LinearGradient(colors: [ - AppTheme.primaryColorLight, - AppTheme.primaryColor - ])), - child: Icon( - Icons.add, - color: Colors.white, - size: ScreenAdaper.sp(70), - ), - ), - ) - : TweenAnimationBuilder( - curve: Curves.easeInOut, - tween: Tween(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), - ) - ])), - ), - ], - ); - }, - )); + return InkWell( + borderRadius: BorderRadius.circular(ScreenAdaper.sp(50)), + onTap: inventoryInoutController.showInOrOutPickerDialog, + child: Container( + height: ScreenAdaper.height(140), + width: ScreenAdaper.height(140), + decoration: const BoxDecoration( + shape: BoxShape.circle, + gradient: LinearGradient( + colors: [AppTheme.primaryColorLight, AppTheme.primaryColor])), + child: Icon( + Icons.add, + color: Colors.white, + size: ScreenAdaper.sp(70), + ), + ), + ); } }