컨테이너

이번 포스팅에서는 알림, 경고 또는 로딩창으로 사용할 수 있는 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..

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