컨테이너

대표적으로 위젯을 순서대로 배치할 수 있는 Class는 Column과 Row 입니다. Column과 Row는 각각 세로, 가로 방향 순서대로 위젯들을 배치합니다. 두 Class는 쉽고 깔끔하게 위젯들을 원하는 방향으로 배치해주지만, 두 개의 도형이나 사진이 겹쳐있는 듯한 위젯을 만들어 사용하는데 한계가 있습니다. 이번 글에선 위젯들의 위치를 원하는 곳에 배치할 수 있는 Stack과 Positioned Class를 알아보겠습니다. 혹시 Column와 Row Class가 궁금하신 분들은 아래 링크를 참고하시면 좋을 것 같습니다. [Flutter] Row, Column Class Row Class 예제코드 import 'package:flutter/material.dart'; void main() { runA..

최근 지도 관련 어플을 Flutter의 Naver Map으로 개발했습니다. 확실히 UI도 한국인들에게 친숙하면서 깔끔하고, 지도에 위치한 장소나 식당 등의 최신화가 잘 되어있더라구요. (구글 맵 같은 경우 폐업했지만 운영 중이라고 표기된 매장이 여럿있어서 골치아팠습니다) 사용법도 어렵지않으니 아래 내용을 천천히 따라오시면 충분히 개발하실 수 있습니다. 이 글은 Window, Android 기준으로 작성되었습니다. 1. 프로젝트 생성 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context..

플러터로 개발하면서 비동기 작업을 해보신 적 있으신가요? 여기서 비동기란 동시에 일어나지 않는다란 뜻을 가지고 있으며 대표적으로 프로젝트 외부에서 데이터를 가져올 때 발생합니다 (Firebase같은 DB에서 데이터 가져오는 경우, 외부에서 데이터를 크롤링하는 경우 등등) 이러한 비동기의 문제는 데이터를 받아오기 전 다음 작업으로 넘어가 내가 원하는 값을 사용할 수 없다는 건데요 쉽게 아래 코드로 확인해보겠습니다 import 'dart:async'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState()..

사용자의 동작(클릭, 더블 클릭, 오래 누르기 등)을 감지하는 것을 Gesture라고 합니다. Flutter에는 Container와 같이 Gesture를 감지할 수 없는 위젯들에게 Gesture 기능을 부여할 수 있는 위젯이 있습니다. ( 쉽게 설명해 버튼이 아닌 위젯을 버튼처럼 사용할 수 있게 해주는 위젯 ) 이번 글에선 그 두가지의 위젯과 간단한 차이점을 소개합니다. InkWell | GestureDetector InkWell 예제 코드 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => ..

이번 포스팅에서는 알림, 경고 또는 로딩창으로 사용할 수 있는 SnackBar를 다룹니다! SnackBar 예제 코드 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { final scaffoldKey = GlobalKey(); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'SnackBar', home: Scaffold( key: scaffoldKey, appBar: AppBar( title: Text('Snac..

Column 또는 Row로 위젯들을 배치하거나 크기가 매우 큰 위젯들을 배치하게 되면 아래 에러는 한번쯤 경험해보셨을 겁니다. The following assertion was thrown during layout: A RenderFlex overflowed by 93 pixels on the bottom. 에러 내용을 읽어보면 화면의 크기보다 위젯이 더 큰 경우 발생하는 단순한 overflow 에러인데요, 에러를 발생시키는 위젯을 삭제하거나 크기를 줄여 에러를 해결할 수도 있지만 그 위젯을 꼭 사용해야하는 경우라면 골치 아픈 상황이 발생합니다. 이런 경우 SingleChildScrollView로 에러를 해결해보세요! SingleChildScrollView 예제코드 import 'package:flutt..

과거 Java나 Kotlin으로 앱을 개발할 때, 한 Screen을 완성하기 위해 메인 화면 뿐만아니라 Appbar(또는 Toolbar), BottomNavigationBar, Drawer 등 다양한 위젯들을 따로 만들어 조합했던 기억이 있습니다. 현재는 주로 Flutter로 Scaffold 위젯을 사용하며 위와 같은 귀찮음이 크게 줄었는데요, 아직 써보지 않으셨다면 이번 기회에 여러 분들도 Scaffold를 한번 사용해보셨으면 좋겠습니다! Scaffold Class 예제 코드 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget ..

Container Class 예제 코드 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Container', home: Scaffold( appBar: AppBar( title: Text('Container'), centerTitle: true, ), body: Container( width: 300, height: 300, color: Colors.cyanAccent, child: Center( child: Text( "컨..