컨테이너

최근 지도 관련 어플을 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..

사용자의 동작(클릭, 더블 클릭, 오래 누르기 등)을 감지하는 것을 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( "컨..

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

Row Class 예제코드 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: Scaffold( appBar: AppBar( title: Text('Row'), centerTitle: true, ), body: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 100, height: 100, colo..