본문 바로가기

전체 글

 (42)
[Flutter] 빈공간 채우기(Expanded,Flexible) 참고 : https://itgongbu.tistory.com/23 [Flutter] Flexible & Expanded 이해하기 Row 혹은 Column에 Children으로 박스(Container 혹은 SizedBox)를 넣을 경우 width나 height으로 위젯의 크기(lp)를 지정해주지만 절대적인 값이 아닌 비율(%)로 설정하고자 할 때가 있다. Flexible @override Widget bui itgongbu.tistory.com 정리해보자면, Expanded는 동일한 비율로 부모를 채울때 사용하고, Flexible는 유연하게 비율 산정이 가능함 두개를 병합해서 사용도 가능하고, 병합 사용하게되면, Flexible에서 설정한 비율을 우선 차지하고 나머지 비율을 Expanded가 차지하게 됨...
[Flutter] Divider 구분선 생성 간단하게 구분선 생성시 아래와 같이 실행 가능함 Divider(height: 1), 기본적으로는 ListView.builder에서 사용하는데, 위에 Divider 말고 다른거 사용하고 싶다면 ListView에 있는 ListView.separeated 로 사용해도 됨. 사용 방법은 원래 ListView.builder 위치에 ListView.separeated를 넣어서 아래 코드를 하단에 추가함 됨. (아 근데 좀더 찾아봐야 함,) body: ListView.separated( itemCount: mainList.length, itemBuilder: (BuildContext context, int index) { return ListTile( onTap: () {}, title: Container( alig..
[Flutter]? InputDecoration 관련 사항 (Textfield/Textformfield) 사용할때 궁금하면 찾아보기 여튼 뭐 Decoration 속성에 관련된 내용이고, 작업시 아래 블로그 확인하면 될듯 Textfield/Textformfield의 InputDecoration 속성 정리 항상 헷갈리는 InputDecoration의 속성에 대하여 정리해봅시다. icon: 필드의 왼쪽에 표시되는 아이콘입니다. labelText: 필드 위에 표시되는 레이블 텍스트입니다. helperText: 필드 하단에 표시되는 보조 velog.io InputDecoration class - material library - Dart API The border, labels, icons, and styles used to decorate a Material Design text field. The TextFiel..
[Flutter] 위젯 (Container, Child, Children) 실제로 배운거 적용해서 화면을 만들어보려고 하니 appbar는 이제 쉽게 가능한데 body에서 막혀서 좀 알아봤음 아래 배치를 만들기 위해서는 이런 트리를 가지고 가는데, 함 보면 Container나 Row, Column을 기본으로 가져가는 듯함. 근데 Container는 박스 한개이니까 한개의 값만 가짐. 그래서 Child를 씀 Row 나 Column 은 여러개를 나열하거나 배치 가능하니까, Children을 씀. 아래 예시를 보면 이해하기 쉬움 연결해서 정렬하는 것에 대한 부분을 알고싶으면 여기서 확인 https://sunyule.tistory.com/17 Layout 사용 속성 및 정렬 (Row와 Column, Stack) 1. 레이아웃 사용 속성은 3가지 Row와 Column, Stack (적용은..
[Flutter] 파일 분리 이론, 리팩토링(refactoring) 코드가 모두 main.dart에 있으면 코드 찾기도 어렵고, 관리도 어렵기때문에 파일 분리가 필요함.(= 리팩토링(refactoring)) 어떻게 하냐면 아래와 같음 1번 메인에서 home_page.dart 라는 파일을 따로 분리했고, 해당 위치를 import로 불러오면된다. 그리고 해당 내용을 return 값에 작성하여 파일간 연결되도록 한다. 2번 홈페이지에서는 클래스를 지정하고 해당 내용을 기입하면 됨. 1번 메인 import 'package:test/home_page.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyA..
[Flutter] 하단 메뉴바 만들기(bottomNavigationBar) 앱 하단에 페이지 전환을 위한 바를 만들고 싶을 경우 bottomNavigationBar 클래스를 사용함. 예시 bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.black, unselectedItemColor: Colors.black, showUnselectedLabels: true, selectedFontSize: 12, unselectedFontSize: 12, iconSize: 28, type: BottomNavigationBarType.fixed, items: [ BottomNavigationBarItem( icon: Icon(Icons.home_filled), label: '홈', backgroundColor: Colors.white,..
[Flutter] 하단 오른쪽 떠다니는 버튼 만들기(floatingActionButton) 오른쪽 하단에 표시되는 버튼 생성은 아래와 같이 함. floatingActionButton: FloatingActionButton( onPressed: () {}, backgroundColor: Color.fromARGB(255, 40, 94, 194), elevation: 1, child: Icon( Icons.add_rounded, size: 36, ), ),
[Flutter] ? 제스쳐 작동 할때 사용하는 클래스(GestureDetector) GestureDetector 아직 분석 못했음. 차차 검토 예정임. 아래는 출처 사이트 https://api.flutter.dev/flutter/widgets/GestureDetector-class.html GestureDetector class - widgets library - Dart API A widget that detects gestures. Attempts to recognize gestures that correspond to its non-null callbacks. If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit the..

티스토리툴바