전체 글67 [flutter] Column 세로축 중앙(center) 정렬 방법 두 가지 및 정렬관련 자주 사용하는 옵션 플러터에서 가장 많이 사용하는 위젯 중 하나가 Column위젯입니다. 하지만 Column위젯을 Center위젯으로 감싸도 중앙 정렬이 되지 않습니다. 그 이유와 해결방법 두 가지를 알아보겠습니다. ▣ Column 화면 중앙 정렬 방법 1 Column정렬을 하기 위해서는 Center위젯으로 감싸줘야 합니다. Center위젯은 가로축 세로축 모두를 중앙으로 이동시켜줍니다, 하지만 Column위젯은 세로축의 크기가 지정되지 않은 무한대? 의 크기 이기 때문에 Center위젯을 사용해도 화면선 중앙으로 정렬되지 않습니다. 그래서 사용하는 것이 mainAxisAlignment: MainAxisAlignment.center, 옵션입니다. body: SafeArea( child: Center( child: Colum.. 2022. 6. 29. [flutter]Container 영역 및 간단한 옵션 정리 플러터에서 Container를 사용하는 경우가 많은데 Container영역이 생각한 것과 다를 때가 있습니다. Container영역에 대해 자세하게 알아보겠습니다. ▣ Container의 영역 Container의 영역은 child가 없을 때는 가능한 큰 영역을 가지려고 하는 특성이 있습니다. 그래서 Scaffold에 child 없는 Container의 영역은 화면 전체입니다. 하지만 Container가 child를 가지게 되면 해당 child만큼의 영역만 가지게 됩니다. child: Text('abc')와 같이 코딩을 하면 abc문자열만큼만 Container영역이 됩니다. ▣ Container 특징 Container는 멀티 child를 가질 수 없습니다. 단 하나의 child만 가질 수 있는 것이 특징입.. 2022. 6. 29. [flutter] 플러터 toast(토스트) 만드는 방법 플러터에서 toast를 만들어 보겠습니다. 총 4단계로 만드는 방법은 매우 쉽습니다. 1. 플러터에서 토스트를 만들기 위해서는 fluttertoast.dart를 import 해야 합니다. fluttertoast.dart를 import 하기 위해 먼저 pubspec.yaml 파일로 이동합니다. 2. pubspec.yaml파일에서 fluttertoast: ^8.0.9를 입력합니다. 3. 다시 main.dart파일로 와서 package:fluttertoast/fluttertoast.dart 파일을 import 합니다. 4. Fluttertoast.showToast를 이용해 토스트를 만들고 옵션들을 설정해 줍니다. 옵션은 직관적으로 알 수 있습니다. 2022. 6. 29. [flutter]플러터 스낵바안에 버튼 만들기 플러터에서 자주 사용하는 스낵바에 버튼 만드는 방법을 알아보겠습니다. ScaffoldMessenger.of(context). showSnackBar(SnackBar())를 통해 스낵바를 만들어 줍니다. 그리고 SnackBar인자 중 하나인 action : SnackBarAction()을 이용해 스낵바 내부에 버튼을 만들어줍니다. 아래는 스낵바를 만들고 스낵 바안에 버튼을 만든 후 버튼을 누르면 스낵바를 숨기는 코드입니다. TextButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('스낵바를 숨기려면 확인버튼을 눌러주세요'), duration: Duration(seconds: 5), acti.. 2022. 6. 29. [flutter] 스낵바(SnackBar) 구버전, 신버전 플러터 스낵바가 업그레이드되었습니다. 구버전의 스낵바는 스낵바가 생성된 후 다른 페이지로 넘어가면 스낵바도 같이 없어지는 문제가 있었지만 이번 신버전 스낵바는 페이지 이동과 관계없이 설정한 시간만큼 스낵바를 보여주게 됩니다. ▣ 구버전 스낵바(SnackBar) 구버전 스낵바의 경우 Scaffold.of를 사용합니다. Scaffold.of 는 나의 부모 context를 가리킵니다. Builder이 없다면 부모의 Scaffold context가 없기 때문에 에러를 발생합니다. 그래서 Builder(context)를 사용해서 현재 페이지의 Scaffold의 constext를 가리켜 에러를 없앨 수 있습니다. 아래 구조도를 통해 보면 좌측 이미지는 Scaffold.of를 이용하면 부모의 Scaffold의 c.. 2022. 6. 28. [flutter]Drawer사용 방법 및 구조도(UserAccountsDrawerHeader, ListView, ListTile) 플러터에서 Drawer사용 방법은 매우 간단합니다. 아래 이미지와 같이 만들기 위해서 Drawer을 생성하고 ListView위젯을 생성한 후 UserAccountsDrawerHeader위젯과 ListTile위젯을 생성하면 됩니다. 우측 이미지를 보면 상단 핑크색이 UserAccountsDrawerHeader위젯이고 하단 Home, Q&A, Settings가 ListTile입니다. ▣ Drawer위젯 만드는 순서 Drawer위젯 생성 ListView위젯 생성 UserAccountsDrawerHeader위젯 생성 ListTile위젯 생성 ▣ 코드 drawer: Drawer( // 드로월위젯 child: ListView( // 리스트뷰위젯 padding: EdgeInsets.zero, children: [ U.. 2022. 6. 28. [flutter] 앱바 좌측, 우측에 아이콘 및 아이콘버튼 생성하기 앱바에 햄버거 바와 같은 메뉴 버튼이나 검색 버튼 등을 넣고 싶을 때가 있습니다. 앱바 우측 또는 좌측에 여러 아이콘 버튼 넣는 방법을 알아보겠습니다. ▣ leading과 actions을 이용한 AppBar에 아이콘 추가 왼쪽에 아이콘 버튼을 추가하고 싶다면 AppBar 인자로 leading을 넣어 주면 됩니다. 우측에 아이콘 버튼을 넣고 싶다면 AppBar 인자로 actions을 넣어 주면 됩니다. 아래 코드를 확인해 보면 leading인자에 IconButton을 넣고 여기서 버튼을 눌렀을 때 실행할 것과 Icon종류를 선택할 수 있습니다. 반대로 우측에 아이콘 버튼을 넣고 싶다면 leading대신 actions인자를 이용하면 됩니다. appBar: AppBar( title: Text('나의 어플'.. 2022. 6. 27. [flutter]플러터 이미지 넣고(CircleAvatar) 크기 조절하기 플러터 이미지 넣는 방법은 여러 가지가 있습니다. 그중 가장 쉽게 접근할 수 있는 CircleAvatar에 대해 알아보겠습니다. ▣ pubspce.yaml파일 수정과 이미지넣기 먼저 이미지를 넣으려면 경로에 폴더를 만들고 이미지 파일을 넣어 주서야 합니다. 그리고 pubspec.yaml페이지를 수정해야 합니다. 저는 assets폴더를 만들어 lalee.png파일과 pika.png파일을 넣어두었습니다. 그리고 pubspce.yaml파일을 수정했습니다. 위와 같이 코드를 추가해 주었습니다. 여기서 주의할 점은 띄어쓰기가 매우 중요합니다. 스페이스바나 탭키를 한 번만 잘못 입력해도 에러가 나기 때문에 위와 같이 입력해주고 저장해야 합니다. (스페이스바 기준 2칸) assets : (스페이스바기준 4칸) -.. 2022. 6. 27. 이전 1 2 3 4 5 6 7 ··· 9 다음
