Flutter/Concept

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

[ Flutter ] 초기 설정

환경 변수 등록 💬 플러터의 명령 파일은 bin 폴더에 들어 있다. 💬 파일이 들어 있는 경로를 운영체제의 환경 변수에 등록해두면 어디에서나 플러터 명령을 사용할 수 있다. 환경 구성 검사 flutter doctor 💬 플러터를 개발할 환경 구성이 잘 되어있는지 확인 핫 리로드 💬 수정한 코드를 추가 빌드 없이 즉시 앱에 반영하는 기능 코드 자동 완성 기능 StatelessWidget 클래스 빠르게 작성하기 StatefulWidget 빠르게 작성하기