컨테이너

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

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