[Flutter] copyWith()로 위젯 속성 값 추가하기

copyWith() 함수를 사용하면 위젯의 속성 값은 그대로 사용하면서 추가하고자 하는 코드만 작성할 수 있다. copyWith() 적용 전import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'sample', theme: ThemeData.dark(), // 기존 Theme 코드..

• format_list_bulleted 개발/Flutter
• · 2022. 11. 16.

[Flutter] 온보딩 스크린(Onboarding Screen)

온보딩 스크린(Onboarding Screen)은 사용자가 처음으로 애플리케이션을 실행했을 때 서비스에 대한 소개 및 기능 안내를 도와주는 화면이다. main.dartimport 'package:flutter/material.dart';import 'onboarding.dart'; // onboarding.dart importvoid main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: OnBoardingPage(), // on..

• format_list_bulleted 개발/Flutter
• · 2022. 11. 15.

[Flutter] Custom Widget 사용하기

커스텀 위젯 클래스 생성- 커스텀 위젯은 클래스로 만든다.커스텀위젯 클래스 생성1. 코드 빈 공간에 stless 입력 후 StatelessWidget을 상속받는 위젯 클래스를 하나 생성한다. 2. 클래스 생성 후 클래스 명을 자신이 원하는 이름으로 변경한다. 3. 하단의 return 우측에 자신이 담고자 할 레이아웃에 대한 코드를 입력한다. 4. 결과적으로 return에 해당하는 코드를 클래스 명을 통해 호출할 수 있도록 한다. import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Wi..

• format_list_bulleted 개발/Flutter
• · 2022. 11. 14.

[Flutter] UI 연습

import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: Container( height: 150, padding: EdgeInsets.all(10), child: Row( ..

• format_list_bulleted 개발/Flutter
• · 2022. 11. 14.

[Flutter] Flexible & Expanded 이해하기

Row 혹은 Column에 Children으로 박스(Container 혹은 SizedBox)를 넣을 경우 width나 height으로 위젯의 크기(lp)를 지정해주지만 절대적인 값이 아닌 비율(%)로 설정하고자 할 때가 있다. Flexible@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: Row( children: [ Container(), Container(), ], ))); }예시를..

• format_list_bulleted 개발/Flutter
• · 2022. 11. 9.

[Flutter] AppBar 사용하기

https://api.flutter.dev/flutter/material/AppBar-class.html AppBar class - material library - Dart APIA Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar. App bars typically expose one or more common actions with IconButtons which are optionally followed by a PopupMenuButton forapi.flutter.dev  앱 상단에 위치하는 부분을 AppBar라고 ..

• format_list_bulleted 개발/Flutter
• · 2022. 11. 9.