🚀 1단계 buildMethod를 Widget으로 분리하기 #1
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import 'package:cart_sample/cart/widget/add_more_widget.dart'; | ||
| import 'package:cart_sample/cart/widget/billing_widget.dart'; | ||
| import 'package:cart_sample/cart/widget/menu_widget.dart'; | ||
| import 'package:cart_sample/cart/widget/store_name_widget.dart'; | ||
| import 'package:cart_sample/util/util.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| part 'widget/order_widget.dart'; | ||
|
|
||
| class CartScreen extends StatefulWidget { | ||
| const CartScreen({Key? key}) : super(key: key); | ||
|
|
||
| @override | ||
| State<CartScreen> createState() => _CartScreenState(); | ||
| } | ||
|
|
||
| class _CartScreenState extends State<CartScreen> { | ||
| final Map _store = { | ||
| 'image': 'images/chickenCartoonImage.jpg', | ||
| 'title': '치킨 잠실점', | ||
| }; | ||
|
|
||
| final Map _menu = { | ||
| 'name': '후라이드 치킨', | ||
| 'image': 'images/chicken.png', | ||
| 'description': '• 찜 & 리뷰 약속 : 참여. 서비스음료제공', | ||
| 'price': '18000', | ||
| }; | ||
|
|
||
| final Map _billing = { | ||
| 'delivery price': '3000', | ||
| }; | ||
|
|
||
| late final String _toBePaidPrice = _calculateToBePaidPrice(); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Scaffold( | ||
| backgroundColor: const Color.fromRGBO(246, 246, 246, 1.0), | ||
| appBar: AppBar( | ||
| leading: const BackButton(color: Colors.black), | ||
| title: const Text('장바구니', style: TextStyle(color: Colors.black)), | ||
| elevation: 0, | ||
| backgroundColor: Colors.white, | ||
| ), | ||
| body: ListView( | ||
| children: [ | ||
| SizedBox(height: 10), | ||
| StoreNameWidget(_store['image'], _store['title']), | ||
| SizedBox(height: 1), | ||
| MenuWidget( | ||
| _menu['name'], | ||
| _menu['image'], | ||
| _menu['description'], | ||
| _menu['price'], | ||
| ), | ||
| SizedBox(height: 1), | ||
| AddMoreWidget(), | ||
| BillingWidget( | ||
| _menu['price'], | ||
| _billing['delivery price'], | ||
| _toBePaidPrice, | ||
| ), | ||
| ], | ||
| ), | ||
| bottomNavigationBar: _OrderWidget(_toBePaidPrice), | ||
| ); | ||
| } | ||
|
|
||
| String _calculateToBePaidPrice() { | ||
| return '${int.parse(_menu['price']) + | ||
| int.parse(_billing['delivery price'])}'; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class AddMoreWidget extends StatelessWidget { | ||
| const AddMoreWidget({Key? key}) : super(key: key); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return GestureDetector( | ||
| onTap: () { | ||
| debugPrint('GestureDetector'); | ||
| }, | ||
| child: Container( | ||
| decoration: BoxDecoration( | ||
| color: Colors.white, | ||
| border: Border( | ||
| bottom: BorderSide(color: Colors.grey.withOpacity(0.3), width: 2), | ||
| ), | ||
| ), | ||
| height: 50, | ||
| child: Row( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| Icon(Icons.add), | ||
| Text('더 담으러 가기', style: TextStyle(fontSize: 17)), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import 'package:cart_sample/util/util.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class BillingWidget extends StatelessWidget { | ||
| const BillingWidget( | ||
| this._totalPrice, | ||
| this._deliveryPrice, | ||
| this._toBePaidPrice, { | ||
| Key? key, | ||
| }) : super(key: key); | ||
|
|
||
| final String _totalPrice; | ||
| final String _deliveryPrice; | ||
| final String _toBePaidPrice; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Container( | ||
| decoration: BoxDecoration( | ||
| color: Colors.white, | ||
| border: Border( | ||
| bottom: BorderSide(color: Colors.grey.withOpacity(0.3), width: 2), | ||
| ), | ||
| ), | ||
| child: Column( | ||
| children: [ | ||
| SizedBox(height: 20), | ||
| Padding( | ||
| padding: const EdgeInsets.symmetric(horizontal: 20), | ||
| child: Row( | ||
| children: [ | ||
| Text('총 주문금액'), | ||
| Spacer(), | ||
| Text('${NumberUtil.formatByDefaultCurrency(_totalPrice)}원'), | ||
| ], | ||
| ), | ||
| ), | ||
| SizedBox(height: 10), | ||
| Padding( | ||
| padding: const EdgeInsets.symmetric(horizontal: 20), | ||
| child: Row( | ||
| children: [ | ||
| Text( | ||
| '배탈팁', | ||
| style: TextStyle(fontSize: 16), | ||
| ), | ||
| Spacer(), | ||
| Text( | ||
| '${NumberUtil.formatByDefaultCurrency(_deliveryPrice)}원', | ||
| style: TextStyle(fontSize: 16), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.all(20), | ||
| child: Divider(color: Colors.grey), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.symmetric(horizontal: 20), | ||
| child: Row( | ||
| children: [ | ||
| Text( | ||
| '결제예정금액', | ||
| style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), | ||
| ), | ||
| Spacer(), | ||
| Text( | ||
| '${NumberUtil.formatByDefaultCurrency(_toBePaidPrice)}원', | ||
| style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| SizedBox(height: 20), | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class MenuWidget extends StatelessWidget { | ||
| const MenuWidget( | ||
| this._name, | ||
| this._image, | ||
| this._description, | ||
| this._price, { | ||
| Key? key, | ||
| }) : super(key: key); | ||
|
|
||
| final String _name; | ||
| final String _image; | ||
| final String _description; | ||
| final String _price; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Container( | ||
| color: Colors.white, | ||
| child: Column( | ||
| children: [ | ||
| Row( | ||
| children: [ | ||
| SizedBox(width: 20), | ||
| Text( | ||
| _name, | ||
| style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold), | ||
| ), | ||
| Spacer(), | ||
| IconButton( | ||
| icon: Icon(Icons.close, color: Colors.grey), | ||
| onPressed: () {}, | ||
| ), | ||
| ], | ||
| ), | ||
| Row( | ||
| children: [ | ||
| SizedBox(width: 20), | ||
| Container( | ||
| decoration: BoxDecoration( | ||
| border: Border.all( | ||
| color: Colors.grey.withOpacity(0.3), | ||
| width: 1, | ||
| ), | ||
| borderRadius: BorderRadius.circular(12), | ||
| ), | ||
| child: ClipRRect( | ||
| borderRadius: BorderRadius.circular(12), | ||
| child: Image.asset( | ||
| _image, | ||
| width: 70, | ||
| height: 70, | ||
| fit: BoxFit.cover, | ||
| ), | ||
| ), | ||
| ), | ||
| SizedBox(width: 10), | ||
| Column( | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: [ | ||
| Text( | ||
| _description, | ||
| style: TextStyle(color: Color.fromRGBO(125, 125, 125, 1.0)), | ||
| ), | ||
| Text(_price), | ||
| ], | ||
| ), | ||
| ], | ||
| ), | ||
| SizedBox(height: 20), | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| part of '../cart_screen.dart'; | ||
|
|
||
| class _OrderWidget extends StatelessWidget { | ||
| const _OrderWidget( | ||
| this._toBePaidPrice, { | ||
| Key? key, | ||
| }) : super(key: key); | ||
|
|
||
| final String _toBePaidPrice; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Container( | ||
| color: Colors.white, | ||
| child: SafeArea( | ||
| child: Container( | ||
| height: 65, | ||
| padding: const EdgeInsets.symmetric( | ||
| horizontal: 20, | ||
| vertical: 10, | ||
| ), | ||
| child: ElevatedButton( | ||
| child: Row( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| Container( | ||
| width: 25, | ||
| height: 25, | ||
| decoration: BoxDecoration( | ||
| color: Colors.white, | ||
| shape: BoxShape.circle, | ||
| ), | ||
| child: Center( | ||
| child: Text( | ||
| '1', | ||
| style: TextStyle( | ||
| color: Color.fromRGBO(44, 191, 188, 1.0), | ||
| fontWeight: FontWeight.bold, | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| SizedBox( | ||
| width: 7, | ||
| ), | ||
| Text( | ||
| '${NumberUtil.formatByDefaultCurrency(_toBePaidPrice)}원 ' | ||
| '배달 주문하기', | ||
| style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), | ||
|
There was a problem hiding this comment. 이쪽도 의견이 궁금합니다. 저의 경우 parameter가 있을 경우는 comma를 붙이고, 그 외는 안붙이는걸로 컨벤션을 정한 적도 있어요 예) Widget(
parameter: 123,
)
Widget(123); |
||
| ), | ||
| ], | ||
| ), | ||
| style: ButtonStyle( | ||
| backgroundColor: MaterialStateProperty.all( | ||
| Color.fromRGBO(44, 191, 188, 1.0), | ||
| ), | ||
| ), | ||
| onPressed: () { | ||
| debugPrint('ElevatedButton'); | ||
| }, | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class StoreNameWidget extends StatelessWidget { | ||
| const StoreNameWidget( | ||
| this._image, | ||
| this._title, { | ||
| Key? key, | ||
| }) : super(key: key); | ||
|
|
||
| final String _image; | ||
| final String _title; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Container( | ||
| color: Colors.white, | ||
| height: 70, | ||
| child: Row( | ||
| children: [ | ||
| SizedBox(width: 20), | ||
| ClipRRect( | ||
| borderRadius: BorderRadius.circular(12), | ||
| child: Image.asset(_image, width: 35, height: 35), | ||
| ), | ||
| SizedBox(width: 10), | ||
| Text( | ||
| _title, | ||
| style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16), | ||
| ) | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
테스트 해보니 어떤게 더 가독성이 좋으신거 같은가요?
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
코딩 스탠다드 측면의 고민
플러터로 개발을 하려다 보니 trailing comma에 대한 코딩 스탠다드가 필요할것 같다는 생각이 들었습니다.
여러 방향으로 고민하고 다른 분들 의견을 들어보니 크게 3가지 방향으로 나눠지더라구요.
3번을 1차적으로 제외, 1/2 번 사이에서 고민중입니다.
일관성 측면에서는 1번이 좋다고 생각하고 있고, Line Length 80 제한을 바탕으로한 약간의 융통성을 발휘한 2번도 나름 나쁘지 않다는 생각입니다.
영빈님 팀에서 사용하시는 실무적 스탠다드는 어떤 방향일지 너무 궁금합니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저희는
1번을 전제로 하되, 아래 쪽 코멘트처럼 파리미터 명이 없을 경우는 comma를 생략하고 있습니다.
line length를 활용할 경우는 단점이 모든 팀원이 같이 설정을 맞춰야 하는데요. 이 부분이 git으로 관리가 좀 어려운 점이 있는 것 같아요.
그리고 모티러를 이용하는 경우도 있고 노트북 화면만 이용하는 케이스들도 있어서요. 하지만 기본 80은 요즘 모니터 크기에 비해 너무 짧다는 판단에 line length는 120으로 지정해서 이용하고 있습니다.