컨테이너

대표적으로 위젯을 순서대로 배치할 수 있는 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..

플러터로 개발하면서 비동기 작업을 해보신 적 있으신가요? 여기서 비동기란 동시에 일어나지 않는다란 뜻을 가지고 있으며 대표적으로 프로젝트 외부에서 데이터를 가져올 때 발생합니다 (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..

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

플러터의 모든 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..