sd4beatles 님의 블로그

1. Adding More Filter Options우리가 만든 filter에 option을 더 추가할 예정이다. 현재까지는 'Glutten-free' 였다면, 추가적으로 "Lactos-Free"를 더 추가해서 아래의 meal filter option을 풍요롭게 해준다.import 'package:flutter/material.dart';import 'tabs.dart';import '../widget/main_drawer.dart';class FilterScreen extends StatefulWidget{ const FilterScreen({super.key}); @override StatecreateState(){ return _FilterScreen(); }}class _FilterS..

1. Before Start- DrawerFlutter에서 **Drawer(드로어)**는 화면의 왼쪽(또는 오른쪽)에서 슬라이드하여 나타나는 패널로, 보통 내비게이션 메뉴를 표시하는 데 사용됩니다. 드로어는 앱의 다양한 섹션이나 기능으로 쉽게 접근할 수 있도록 해줍니다.- ListTile- SwitchListTile2. Prodjct2.1 Main Drawer 정의(part 01) - DrawerHeaderDrawer는 Scaffold의 dreawer option으로 들어가게 된다. 물론, 그 방대한 Drawer Widget을 option에 집어넣게 된다면, 가독성을 저하시키는 원인이 되므로, 우리는 일단 이를 ./widgets/main_drawer.dart에 집어넣는다.import 'package:fl..

1. SettingsBefore diving into the details of the examples, you should install Express Validator.npm install express-validator2. Questions2.1 Validation ChecksQ) Now, we use Express Validator to check if the queries from the request comply with the conditions: the query must be in string format, not empty, and between 3 and 10 characters in length. As a tip, you should import the validationResult..

1. Passing Functions Through Multiple Layers of Widgetsuser들에게 MealDetails Screen 속의 item이 맘에 들면, favorite에 추가하는 기능을 만들어보자. 이때, 추가적인 기능을 어디에다가 사용할지가 관건인데, 이는 appBar속에 넣어보도록 하자.일단, favorite star가 들어가야 할 곳은 당연히, ./screens/meal_details.dart에 지정해야 한다.(** mea_details.dart widget class는각 meal의 detail을 담는 screen을 위한 widget이라는 것을 잊지말자.**Step 01) AppBar 의 option인 actions에 다가 InconButton을 집어 넣도록 하자.import..

1. Updating MealDeatilScreenCategory---> MealScreen ---> MealDatilsScreen으로 차례대로 코딩을 진행하였다.이때, MealDetailsScreen에는 위에 보이는 것처럼 이미지밖에 나오지 않도록 코드를 작성했는데, 이를 코드를 추가하여 , 음식성분 등 음식에 대한 세부정보를 추가하도록 하자.import 'package:flutter/material.dart';import 'package:meals/models/meal.dart';class MealDetailsScreen extends StatelessWidget{ const MealDetailsScreen({ super.key, required this.meal, }); fina..

유튜브의 영상의 task를 영어로 번역하였음. 각 task에 맞는 적절한 코드를 써보도록 하자. 아래의 기본적인 코드는 생략하겠음-src |-routes |-companies.mjs |-products.mjs |-index.mjs |-utils |-constants.mjs index.mjsUnder src/utils/constants.mjs contains the following data.export const products=[ { id:1, label:"Galaxy23", popularity:5 }, { id:2, label:"TV", popularity:3 }, ..

1. copyWith() method만약 우리가 object 또는 관련된 object가 있고, properties를 변경하고 싶다고 가정하자. 그렇다면, 일일히 우리가 성질들을 하나씩 다시 정의내리는 것은 정말로 귀찮은 일이 될것이다. (예를들면, object.prop1=true,object.prop2="red" ....아 같이 말이다.) 이럴 때를 대비해서, 우리는 copyWith method를 사용하게 된다. 이 method는 우리가 변경하고 싶어하는 객체의 성질들과 그에 해당되는 values를 가지고 오며, 변경된 값을 반환한다.2. ColorSchem Class에 관련된 글ColorSchem Class는 따로 글을 남기지 않을 예정이다. 왜냐하면, 아래의 blog가 너무 상세하게 기술하고 있어서,..

1. Dismissible웹을 사용할때, 손가락으로 swiping해서 제거하는 경우를 많이 보았을 것이다. 이러한 기능을 우리 어플에게도 구현을 해보도록 하자. 이럴 때,쓰는 것이 바로 Dismissble이라는 클래스인데, 이는 아래와 같다."Dragging or flinging this widget in the DismissDirection causes the child to slide out of view."Dismissible({required Key key, required Widget child,...)1) Dismissible : Widget child (required)현재 우리의 어플 같은 경우엔, 지우고 싶은 item은 ExpenseItem이며, 해당되는 index의 expense를 집어..

1. Flutter 문법1.1 setState()setState()는 framework에게 현재 객체의 상태가 바뀌었다는 것을 알려주는 method이다. 그렇지만, 여기에는 정말로 주의할 점이 있는데 이는 아래와 같다."변수의 선언 위치가 정말로 중요하다! 변수의 선언 위치에 따라서 변경이 되지 않을 수 있다" *import 'package:flutter/material.dart';class MyWidget extends StatefulWidget { const MyWidget({super.key}); @override State createState() => _MyWidgetState();}class _MyWidgetState extends State { @override Widget buil..

1. TextEditingController Class이전의 방식으로 text filed의 값을 조정하는 방법은 사실 초기변수를 선언해야하고, 그리고 user가 interface를 통해서 값을 집어넣으면,이를 수정하는 함수를 선언도 했어야 했다. 그러나, 이러한 방식은 사실 상당히 귀찮다는 것을 알수가 있다. 이러한 코드라인을 간결하게 해주는 flutter에서 제공되어지는 TexEdigingController class를 대안으로 고려해볼 수 있다."If you modify the text or selection properties, the text field will be notified and will update itself appropriately."이의 공식문서 한 문장이 이 class를 잘 대..