전체 글

[ Flutter ] 화면 이동

새로운 화면으로 이동 💬 화면 전환을 하는 네비게이션 앱을 만들기 위해 기반이 되는 소스 코드를 작성하자. 더보기 더보기 import 'package:flutter/material.dart'; // 앱 시작 부분 void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: FirstPage(), )..

[ Flutter ] 쿠퍼티노 디자인

쿠퍼티노 기본 UI 💬 쿠퍼티노 디자인에서는 AppBar 대신 CupertinoNavigationBar를 사용하며 CupertinoSwitch, CupertinoButton 등을 사용한다. import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', t..

[ Flutter ] 애니메이션

Hero 💬 화면 전환시 자연스럽게 연결되는 애니메이션을 지원 💬 이전 화면으로 돌아갈 때도 자연스럽게 애니메이션이 동작한다. 💬 애니메이션 효과의 대상이 되는 양쪽 화면의 위젯을 Hero 위젯으로 감싸고, tag 프로퍼티를 반드시 동일하게 지정해야 한다. // 첫 번째 페이지 class HeroPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Hero'), ), body: Center( child: GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute(buil..

[ Flutter ] 다이얼로그

AlertDialog showDialog( context: context, barrierDismissible: false, // 사용자가 다이얼로그 바깥을 터치하면 닫히지 않음 builder: (BuildContext context) { return AlertDialog( title: Text('제목'), content: SingleChildScrollView( child: ListBody( children: [ Text('Alert Dialog입니다'), Text('OK를 눌러 닫습니다.'), ], ), ), actions: [ FlatButton( child: Text('OK'), onPressed: () { // 다이얼로그 닫기 Navigator.of(context).pop(); }, ), Flat..

[ Flutter ] 버튼

ElevatedButton ElevatedButton( child: Text('Button'), color: Colors.orange, // 색상 onPressed: () { // 클릭시 실행할 코드 }, ), TextButton TextButton( child: Text('Button'), onPressed: () { }, ), OutlinedButton OutlinedButton( onPressed: () {} child: Text("Button"), ), IconButton IconButton( icon: Icon(Icons.add), color: Colors.red, // 아이콘 색상 iconSize: 100.0, // 아이콘 크기 기본값 24.0 onPressed: () { }, // 클릭시 실..

[ Flutter ] 화면 배치

Container 💬 child를 포함한 부모 위젯으로 주로 사용된다. 💬 width, height를 지정하지 않으면 최대 크기로 확장한다. 💬 배경 색상을 설정할 수 있다. 예제 더보기 Container( color: Colors.red, width: 100, height: 100, padding: const EdgeInsets.all(8.0), margin: const EdgeInsets.all(8.0), ) SizedBox 💬 여백을 주기 위한 단순 용도로 사용하기도 하며, Container처럼 child를 포함한 부모 위젯으로 사용되기도 한다. 💬 width, height가 설정되지 않으면 child의 크기에 맞게 크기가 설정된다. 예제 더보기 SizedBox( width: 100, height:..

[ Dart ] 기타 유용한 기법

cascade 구문 (..) 💬 동일한 객체에 대해서 작업을 이어서 수행할 수 있다. 💬 객체를 반환하는 함수만 사용 가능하다. final items = [1, 2, 3, 4, 5]; var result = items; result.add(6); result.remove(2); print(result); // 1, 3, 4, 5, 6 // 계단식 표기법 .. 연산자 print(items ..add(6) ..remove(2)); // 1, 3, 4, 5, 6 컬렉션 if 💬 컬렉션 내부에 if 문이나 for 문을 사용할 수 있다. 하지만 { } 블록은 사용할 수 없다. bool promoActive = false; if (promoActive) { print([1, 2, 3, 4, 5, 6]); } els..

[ Dart ] 함수형 프로그래밍

일급 객체 💬 함수를 표현할 수 있는 것들은 모두 값으로 취급할 수 있으므로, 다른 변수에 함수를 대입할 수 있다. void greeting(String text) { print(text); } void main() { var f = greeting; // 함수를 다른 변수에 대입할 수 있음 f('hello'); } 💬 다른 함수의 인수로 함수 자체를 전달하거나 함수를 반환받을 수도 있다. void something(Function(int i) f) { f(10); } void main() { something((value) { print(value); }); } ▫ Function은 함수를 매개변수로 전달하고자 할 때 사용하는 타입이다. ▫ f() 함수는 익명 함수이며, 예제에서는 print를 수행하고..

[ Dart ] 컬렉션

List 💬 순서가 있는 자료를 담는 컬렉션 💬 다트에서는 배열을 제공하지 않는다. 💬 컬렉션도 타입 추론을 사용할 수 있으므로 일반적으로 var를 사용한다. // List items = ['짜장', '라면', '볶음밥']; var items = ['짜장', '라면', '볶음밥']; items[0] = '떡볶이'; print(items.length); print(items[2]); 스프레드 연산자(...) 💬 컬레션을 펼쳐주는 연산자로 다른 컬렉션 안에 컬렉션을 삽입할 때 사용한다. var items = ['짜장', '라면', '볶음밥']; // '짜장', '라면', '볶음밥' var items = ['떡볶이', ...items, '순대']; // '떡볶이', '짜장', '라면', '볶음밥', '순대' ..