list item and menu item widget created

Wilker Oliveira · Wilker Oliveira · commit 62eb89c62319 · 2019-11-14T00:31:57.000-03:00
diff --git a/lib/src/ui/resources/app_color.dart b/lib/src/ui/resources/app_color.dart
@@ -16,4 +16,6 @@ class AppColor {
 
   static const Color creditCardFirstColor = Color(0xFFbdc3c7);
   static const Color creditCardSecondColor = Color(0xFF2c3e50);
+
+  static const Color debitColor = Color(0xFFB34747);
 }
diff --git a/lib/src/ui/resources/app_dimen.dart b/lib/src/ui/resources/app_dimen.dart
@@ -72,10 +72,19 @@ class AppDimen {
   static const double cardDetailWidth = 100.0;
 
   static const double menuCardHeight = 150.0;
+  static const double menuItemHeight = 90.0;
+  static const double menuItemWidth = 112.0;
+  static const double menuItemBorderRadius = 15.0;
+  static const double menuItemImageWidth = 48.0;
+  static const double menuItemTextSize = 12.0;
 
   static const double creditCardHeight = 126.0;
   static const double creditCardWidth = 390.0;
   static const double creditCardLogoWidth = 64.0;
   static const double creditCardLogoHeight = 64.0;
   static const double creditCardNumberSize = 22.0;
+
+  static const double listItemIconSize = 36.0;
+  static const double listItemContentWidth =  100.0;
+  static const double listItemContentHeight = 40.0;
 }
diff --git a/lib/src/ui/screens/card/card_screen.dart b/lib/src/ui/screens/card/card_screen.dart
@@ -6,10 +6,10 @@ import 'package:bank_cards/src/ui/resources/app_dimen.dart';
 import 'package:bank_cards/src/ui/resources/app_styles.dart';
 import 'package:bank_cards/src/ui/resources/decorations.dart';
 import 'package:bank_cards/src/ui/screens/base/base_widget.dart';
-import 'package:bank_cards/src/ui/widgets/common/common_widgets.dart';
 import 'package:bank_cards/src/ui/widgets/credit_card/credit_card_front.dart';
 import 'package:bank_cards/src/ui/widgets/custom_circular_progress_indicator.dart';
 import 'package:bank_cards/src/ui/widgets/menu/horizontal_menu_widget.dart';
+import 'package:bank_cards/src/ui/widgets/menu/menu_item_widget.dart';
 import 'package:bank_cards/src/utils/formatter.dart';
 import 'package:bank_cards/src/viewmodel/base/base_viewmodel.dart';
 import 'package:bank_cards/src/viewmodel/card/card_viewmodel.dart';
@@ -43,7 +43,6 @@ class _CardPageState extends State<CardPage> {
 
   @override
   Widget build(BuildContext context) {
-
     Size screenSize = MediaQuery.of(context).size;
 
     return BaseWidget<CardViewModel>(
@@ -253,7 +252,10 @@ class _CardPageState extends State<CardPage> {
 //             break;
         }
       },
-      child: CommonWidgets.menuItem(img, text),
+      child: MenuItemWidget(
+        image: img,
+        text: text,
+      ),
     );
   }
 }
diff --git a/lib/src/ui/screens/card/statement/statement_card_screen.dart b/lib/src/ui/screens/card/statement/statement_card_screen.dart
@@ -5,10 +5,10 @@ import 'package:bank_cards/src/ui/resources/app_dimen.dart';
 import 'package:bank_cards/src/ui/resources/app_styles.dart';
 import 'package:bank_cards/src/ui/resources/decorations.dart';
 import 'package:bank_cards/src/ui/screens/base/base_widget.dart';
-import 'package:bank_cards/src/ui/widgets/common/common_widgets.dart';
 import 'package:bank_cards/src/ui/widgets/common/custom_appbar.dart';
 import 'package:bank_cards/src/ui/widgets/credit_card/credit_card_front.dart';
 import 'package:bank_cards/src/ui/widgets/custom_circular_progress_indicator.dart';
+import 'package:bank_cards/src/ui/widgets/list_item/statement_item_widget.dart';
 import 'package:bank_cards/src/viewmodel/base/base_viewmodel.dart';
 import 'package:bank_cards/src/viewmodel/card/statement_card_viewmodel.dart';
 import 'package:flutter/cupertino.dart';
@@ -142,8 +142,16 @@ class _StatementCardScreenState extends State<StatementCardScreen> {
                   child: new ListView.builder(
                     itemCount: _statementResponse.statement.length,
                     itemBuilder: (BuildContext ctxt, int index) {
-                      return CommonWidgets.createInvoiceItem(
-                          _statementResponse.statement[index], model);
+                      return StatementItemWidget(
+                        icon: _statementResponse.statement[index].icon,
+                        title: _statementResponse.statement[index].description,
+                        description:
+                            _statementResponse.statement[index].additionalInfo,
+                        amount: model.toCurrency(
+                            _statementResponse.statement[index].amount,
+                            _statementResponse.statement[index].type),
+                        statementType: _statementResponse.statement[index].type,
+                      );
                     },
                   ),
                 ),
diff --git a/lib/src/ui/screens/home/bank_screen.dart b/lib/src/ui/screens/home/bank_screen.dart
@@ -1,13 +1,13 @@
-import 'package:bank_cards/src/ui/resources/decorations.dart';
-import 'package:bank_cards/src/ui/widgets/common/common_widgets.dart';
-import 'package:bank_cards/src/ui/widgets/menu/horizontal_menu_widget.dart';
-import 'package:flutter/material.dart';
-import 'package:bank_cards/src/ui/widgets/common/account_header.dart';
 import 'package:bank_cards/generated/i18n.dart';
+import 'package:bank_cards/src/ui/resources/app_color.dart';
 import 'package:bank_cards/src/ui/resources/app_dimen.dart';
 import 'package:bank_cards/src/ui/resources/app_styles.dart';
+import 'package:bank_cards/src/ui/resources/decorations.dart';
+import 'package:bank_cards/src/ui/widgets/common/account_header.dart';
+import 'package:bank_cards/src/ui/widgets/menu/horizontal_menu_widget.dart';
+import 'package:bank_cards/src/ui/widgets/menu/menu_item_widget.dart';
 import 'package:bank_cards/src/utils/formatter.dart';
-import 'package:bank_cards/src/ui/resources/app_color.dart';
+import 'package:flutter/material.dart';
 
 class BankPage extends StatefulWidget {
   @override
@@ -33,7 +33,6 @@ class _BankPageState extends State<BankPage> with TickerProviderStateMixin {
 
   @override
   Widget build(BuildContext context) {
-
     return new Container(
       decoration: BoxDecoration(
         gradient: Decorations.gradientDecoration(),
@@ -134,7 +133,10 @@ class _BankPageState extends State<BankPage> with TickerProviderStateMixin {
   Widget createNewItem(img, text, position) {
     return new GestureDetector(
       onTap: () {},
-      child: CommonWidgets.menuItem(img, text),
+      child: MenuItemWidget(
+        image: img,
+        text: text,
+      ),
     );
   }
 }
diff --git a/lib/src/ui/widgets/common/common_widgets.dart b/lib/src/ui/widgets/common/common_widgets.dart
diff --git a/lib/src/ui/widgets/list_item/statement_item_widget.dart b/lib/src/ui/widgets/list_item/statement_item_widget.dart
@@ -0,0 +1,78 @@
+import 'package:bank_cards/src/ui/resources/app_color.dart';
+import 'package:bank_cards/src/ui/resources/app_dimen.dart';
+import 'package:bank_cards/src/ui/resources/app_styles.dart';
+import 'package:bank_cards/src/ui/resources/decorations.dart';
+import 'package:bank_cards/src/utils/constants.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class StatementItemWidget extends StatelessWidget {
+  final String icon;
+  final String title;
+  final String description;
+  final String amount;
+  final String statementType;
+
+  const StatementItemWidget(
+      {Key key,
+      this.icon,
+      this.title,
+      this.description,
+      this.amount,
+      this.statementType})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      margin: EdgeInsets.only(
+        top: ScreenUtil.instance.setWidth(AppDimen.defaultDividerHeight),
+      ),
+      child: Container(
+        decoration: Decorations.listItemDecoration(),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            new ListTile(
+              leading: new Image(
+                image: AssetImage(this.icon),
+                width: ScreenUtil.instance.setWidth(AppDimen.listItemIconSize),
+              ),
+              title: Text(
+                this.title,
+                style: AppStyles.defaultTextStyle(),
+              ),
+              subtitle: Padding(
+                padding: EdgeInsets.only(
+                  top: ScreenUtil.instance.setWidth(AppDimen.simpleMargin),
+                ),
+                child: Text(
+                  this.description,
+                  style: AppStyles.formTextStyle(
+                      Colors.white, AppDimen.defaultLabelSubTitleSize),
+                ),
+              ),
+              trailing: Container(
+                alignment: Alignment.center,
+                width:
+                    ScreenUtil.instance.setWidth(AppDimen.listItemContentWidth),
+                height: ScreenUtil.instance
+                    .setHeight(AppDimen.listItemContentHeight),
+                child: Text(
+                  this.amount,
+                  style: TextStyle(
+                      color: this.statementType == Constants.statementTypeDebit
+                          ? AppColor.debitColor
+                          : AppColor.green,
+                      fontSize:
+                          ScreenUtil.instance.setSp(AppDimen.formTextSize),
+                      fontWeight: FontWeight.bold),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/src/ui/widgets/menu/menu_item_widget.dart b/lib/src/ui/widgets/menu/menu_item_widget.dart
@@ -0,0 +1,61 @@
+import 'package:bank_cards/src/ui/resources/app_color.dart';
+import 'package:bank_cards/src/ui/resources/app_dimen.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class MenuItemWidget extends StatelessWidget {
+  final String image;
+  final String text;
+
+  const MenuItemWidget({Key key, @required this.image, @required this.text})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.all(
+        ScreenUtil.instance.setWidth(AppDimen.simpleMargin),
+      ),
+      height: ScreenUtil.instance.setHeight(AppDimen.menuItemHeight),
+      width: ScreenUtil.instance.setWidth(AppDimen.menuItemWidth),
+      decoration: new BoxDecoration(
+        border: new Border.all(color: AppColor.green),
+        borderRadius: new BorderRadius.only(
+          bottomLeft: Radius.circular(
+            ScreenUtil.instance.setWidth(AppDimen.menuItemBorderRadius),
+          ),
+          bottomRight: Radius.circular(
+            ScreenUtil.instance.setWidth(AppDimen.menuItemBorderRadius),
+          ),
+          topRight: Radius.circular(
+            ScreenUtil.instance.setWidth(AppDimen.menuItemBorderRadius),
+          ),
+          topLeft: Radius.circular(
+            ScreenUtil.instance.setWidth(AppDimen.menuItemBorderRadius),
+          ),
+        ),
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          Image.asset(
+            image,
+            width: ScreenUtil.instance.setWidth(AppDimen.menuItemImageWidth),
+          ),
+          Padding(
+            padding: EdgeInsets.all(
+              ScreenUtil.instance.setWidth(AppDimen.simpleMargin),
+            ),
+            child: Text(
+              text,
+              style: TextStyle(
+                fontSize: ScreenUtil.instance.setSp(AppDimen.menuItemTextSize),
+                color: Colors.white,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -16,4 +16,6 @@ class AppColor {`
`16`	`16`
`17`	`17`	`static const Color creditCardFirstColor = Color(0xFFbdc3c7);`
`18`	`18`	`static const Color creditCardSecondColor = Color(0xFF2c3e50);`
	`19`	`+`
	`20`	`+ static const Color debitColor = Color(0xFFB34747);`
`19`	`21`	`}`