개발노트

화면을 넘기는 TabBarView를 구현하기 위해서는 아래 3가지 위젯이 필요합니다. TabBarView: TabBarView는 여러 개의 탭에 대한 내용을 표시하기 위한 위젯입니다. 각 탭에 대한 컨텐츠를 생성하고, 사용자가 탭을 선택할 때 해당하는 내용이 표시됩니다. TabBarView는 DefaultTabController와 함께 사용되며, children 속성을 통해 각 탭에 대한 위젯들을 정의합니다. DefaultTabController: DefaultTabController는 TabBar와 TabBarView를 연결하고, 탭의 개수와 액션을 관리하는 위젯입니다. DefaultTabController는 length 속성을 통해 탭의 개수를 설정하고, child 속성에 TabBar와 TabBarV..

ScrollBar scrollBar는 스크롤 가능한 위젯(예: ListView, GridView)에 수직 또는 수평 스크롤 바를 추가하는 데 사용되는 위젯입니다. 스크롤 바는 사용자에게 현재 스크롤 위치를 시각적으로 표시하고, 사용자가 스크롤 바를 조작하여 컨텐츠를 스크롤할 수 있도록 합니다. ScrollBar 위젯은 스크롤 가능한 위젯과 함께 사용되며, 스크롤 위치를 제어하기 위해 ScrollController를 사용합니다. ScrollController는 스크롤 가능한 위젯과 스크롤 바 사이의 중개자 역할을 합니다. 이 컨트롤러를 사용하여 스크롤 위치를 읽거나 설정하고, 스크롤 위치에 대한 애니메이션 및 스크롤 이벤트 처리를 수행할 수 있습니다. ScrollController의 주요 메서드와 속성은 ..

Flutter의 Wrap 위젯은 자식 위젯을 행 또는 열로 배치하는 유연한 컨테이너 위젯입니다. Wrap 위젯은 자식 위젯이 가로 공간을 벗어날 때 자동으로 줄바꿈을 수행하여 적절하게 배치합니다. [Wrap 위젯이 사용되는 경우] 다양한 크기의 자식 위젯을 동적으로 배치해야 할 때. 가로 공간이 제한된 상황에서 자식 위젯을 배치해야 할 때. 자식 위젯을 행 또는 열로 그룹화하고, 공간이 부족한 경우 자동으로 줄바꿈하고자 할 때. [Warp 위젯의 주요속성] direction: 자식 위젯이 배치될 방향을 지정합니다. 기본값은 Axis.horizontal로 자식 위젯을 가로로 배치합니다. Axis.vertical을 설정하면 자식 위젯을 세로로 배치합니다. alignment: 자식 위젯의 정렬 방식을 지정합니..

Form Form 위젯은 데이터의 유효성을 검사하고 제출할 때 유용한 기능을 제공합니다. 이를 위해 Form 위젯 내부에서 GlobalKey를 사용하여 폼의 상태를 관리하고 유효성 검사를 수행할 수 있습니다. Form 위젯의 자식 위젯으로 사용되는 것들. TextFormFeild Form( child: Column( children: [ TextFormField( decoration: InputDecoration( labelText: 'Name', ), validator: (value) { if (value.isEmpty) { return 'Please enter your name.'; } return null; }, ), TextFormField( decoration: InputDecoration( l..

사용자로 부터 문자 입력을 받을 때 사용하는 TextField 위젯을 알아보도록 하겠습니다. 또한, TextField 위젯에 입력된 값을 받아오는 TextEditingController 을 활용해보겠습니다. TextField 텍스트 입력: 사용자가 텍스트를 입력할 수 있는 입력 필드를 제공합니다. 사용자는 키보드를 사용하여 텍스트를 입력할 수 있습니다. 힌트(Placeholder): 텍스트 필드에 입력될 내용을 설명하는 힌트를 제공할 수 있습니다. 힌트는 보통 회색 또는 다른 색상으로 표시되며, 사용자가 실제로 텍스트를 입력하기 전까지 힌트가 표시됩니다. 이벤트 처리: 텍스트 필드에서 텍스트가 변경되거나 사용자가 텍스트를 입력하는 등의 이벤트를 처리할 수 있습니다. 이를 통해 텍스트 필드에 대한 유효성 ..

ThemeData() Flutter에서 ThemeData 클래스는 앱의 전체적인 디자인 테마를 지정하는 데 사용됩니다. ThemeData를 사용하여 앱의 색상, 텍스트 스타일, 아이콘 테마 등을 일관되게 설정할 수 있습니다. ThemeData는 MaterialApp 위젯의 theme: 속성 에 주로 사용되지만, Cupertino 앱의 디자인도 지정할 수 있습니다. 색상 지정 - primaryColor: 앱의 기본 색상 - accentColor: 강조 색상 - scaffoldBackgroundColor: 스카폴드(전체 앱 화면)의 배경색 - backgroundColor: 앱의 일반적인 배경색 등... 텍스트 스타일 지정 - textTheme: 앱 전체의 텍스트 스타일을 설정합니다. 예: headline1,..

설치방법. 1. 아래 설치링크로 이동하여, pubspec.yaml 용 Install 소스를 복사합니다. - 설치 링크: https://pub.dev/packages/font_awesome_flutter/install font_awesome_flutter | Flutter Package The Font Awesome Icon pack available as Flutter Icons. Provides 1600 additional icons to use in your apps. pub.dev 2. pubspec.yaml에 아래와 같이 복사된 소스를 붙여넣고 저장하면 설치가 끝납니다. 위젯 사용하기. 1. 사이트 접속 및 가입하기 - Font Awesome 사이트: https://fontawesome.com/i..

FractionallySizedBox FractionallySizedBox 위젯은 부모 컨테이너 내에서 비율로 크기를 조정하는 데 사용되는 Flutter 위젯입니다. FractionallySizedBox는 부모 컨테이너의 가로 및 세로 공간에 대해 상대적인 비율을 지정할 수 있습니다. 이를 통해 화면 크기에 독립적으로 위젯의 크기를 조정할 수 있습니다. FractionallySizedBox( widthFactor: double, // 가로 비율 (0.0 ~ 1.0) heightFactor: double, // 세로 비율 (0.0 ~ 1.0) alignment: AlignmentGeometry, // 정렬 방식 (선택 사항) child: Widget, // 자식 위젯 ) widthFactor: 부모 컨테이..

Chat GPT SDK를 이용한다면 Flutter 앱에 Chat GPT를 연결하여 사용할 수 있습니다. 준비물.1 - 설치링크: https://pub.dev/packages/chat_gpt_sdk/install chat_gpt_sdk | Flutter Package create chat bot and other bot with ChatGPT SDK Support GPT-3.5 Turbo and SSE Generate Prompt pub.dev 준비물.2 ChatGPT API Key 받는 곳 - 링크: https://platform.openai.com/account/api-keys OpenAI API An API for accessing new AI models developed by OpenAI plat..

Expanded 위젯 부모 위젯에서 남은 공간을 채우기 위해 사용되는 위젯 1. 부모 위젯이 반드시 제한된 영역을 가져야합니다. Expanded 위젯은 부모 위젯에서 남은 공간을 채우기 위해 사용되므로, 만약 부모 위젯이 무제한 공간을 가진다면, Expanded 위젯을 사용될 수 없습니다. 2. Expanded 위젯은 컨테이너 안에 있어야합니다. Expanded 위젯은 컨테이너 안에서 사용되어야합니다. 그렇지 않으면 오류가 발생할 수 있습니다. 3. Expanded 위젯은 주 축(main axis)을 기준으로 동작합니다. Expanded 위젯은 부모 위젯의 주 축(main axis)을 기준으로 동작합니다. 이는 Row 또는 Column과 같은 부모 위젯에서 자주 사용되는 경우가 많습니다. 만약 주 축이 ..