컨테이너

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..

플러터 프로젝트를 새로 만들면 기본적으로 MaterialApp을 사용해 UI를 생성합니다. 딱히 신경 안 쓰고 개발하다 궁금해서 공부해봤습니다. MaterialApp Flutter는 Material Design을 바탕으로 위젯이 만들어집니다 MaterialApp은 Material Design을 사용할 수 있게 해주는 class 인 것이죠 ( 플러터에 미리 정의되어 있어 별도의 개발이 필요 없음 ) 아래 예제 코드를 같이 실행시키며 확인해봅시다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your a..

플러터의 모든 UI는 위젯으로 구현됩니다. 이렇게 UI를 구성하는 위젯의 class는 두 가지가 있습니다. StatelessWidget | StatefulWidget StatelessWidget (상태를 가지지 않는 위젯) import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { int count = 0; @override Widget build(BuildContext context) { return MaterialApp( title: 'StatelessWidget', home: Scaffold( appBar: AppBar( title: Text("Stateless..

지금 하고있는 Flutter 프로젝트에서 카카오 맵 api를 적용시키려 많은 삽질을 했다. ( 대부분이 키 해시 관련 문제였지만 ) 여러분들은 이 글을 보고 조금이라도 편하게 하시길 네이버 맵은 사용 방법이 훨씬 쉽습니다. 혹시 네이버 맵을 사용하실 분들은 아래를 참고해주세요 [Flutter] Naver Map 사용하기 최근 지도 관련 어플을 Flutter의 Naver Map으로 개발했습니다. 확실히 UI도 한국인들에게 친숙하면서 깔끔하고, 지도에 위치한 장소나 식당 등의 최신화가 잘 되어있더라구요. (구글 맵 같은 경우 폐 ahang.tistory.com 이 글은 Window, Android 기준으로 작성되었습니다. 1. 프로젝트 생성 import 'package:flutter/material.dart..