CricketMelody

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 코드..

온보딩 스크린(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..

커스텀 위젯 클래스 생성- 커스텀 위젯은 클래스로 만든다.커스텀위젯 클래스 생성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..

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( ..

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(), ], ))); }예시를..

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라고 ..

TextButton()body: SizedBox( child: TextButton( // TextButton onPressed: () {}, child: Text('Button', style: TextStyle( fontSize: 30, )))),- 기본 형식은 위와 같다. - onPressed()에는 버튼 클릭시 동작 시키고자 하는 함수명을 넣는다.- 버튼을 비활성화 시킬 때는 onPressed에 null 값을 넣어준다.- 버튼의 스타일은 style: ButtonStyle()로 지정해준다.ElevatedButton()body: SizedBox( ..

텍스트 스타일(style: TextStyle())- 텍스트에 여러가지 하위 속성들을 입히고자 한다면 Text() 위젯, style: 안에 원하는 스타일을 입력한다.- color : 텍스트에 색깔을 입힌다.- letterSpacing : 글자 간격을 지정한다.- fontSize : 글자 사이즈를 지정한다.- fontWeight : 폰트의 생김새를 지정한다. - Color의 경우 color 명으로도 색을 지정할 수 있지만 다른 방법으로도 세밀하게 색상을 지정할 수 있다. Color c = const Color(0xFF42A5F5);Color c = const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);Color c = const Color.fromARGB(255, 66, 165, ..

먼저 body 영역에 간단하게 Container 위젯을 작성해본다.  margin- margin을 통해 컨테이너의 바깥쪽 영역에 여백을 줄 수 있다.padding- padding을 통해 컨테이너의 안쪽 영역에 여백을 줄 수 있다.  - EdgeInsets.all(크기) : 모든 외부 면에 크기만큼의 여백을 준다.- EdgeInsets.fromLTRB(크기, 크기, 크기, 크기) : 왼쪽(L), 위쪽(T), 오른쪽(R), 아래(B) 만큼의 여백을 준다.- EdgeInsets.only(top:크기, bottom:크기, left:크기, right:크기) : 외부 면 중 원하는 부분에 원하는 크기만큼의 여백을 준다. decoration: BoxDecoration()- 하위 속성들은 BoxDecoration 아래..

Material Design- MaterialApp()도 하나의 위젯 개념으로 사용된다.- MaterialApp()을 사용하면 구글이 기본으로 제공하는 Material 테마, 위젯을 사용할 수 있게 된다.- 프로젝트 생성 시 초기에 import되는  flutter/material.dart 가 이에 해당되며, import 후 MaterialApp 사용 시 구글이 만든 디자인 규칙에 따라 안드로이드 앱에서 자주 볼 수 있는 UI 위젯을 사용할 수 있게 된다. Cupertino Design- 머터리얼 디자인은 안드로이드에 적용하기 위한 디자인 규칙으로 iOS 앱과는 어울리지 않는다.- 아이폰과 같은 디자인을 적용하고자 한다면 쿠퍼티노 디자인을 사용해야 하며, flutter/cupertino.dart 패키지를 ..

프로젝트 초기 생성 시 여러 파일들과 main.dart 파일도 함께 생성된다.기본적으로 이해를 돕기 위해 프로젝트 생성 시 샘플 코드가 들어 있지만 쓸모가 없기 때문에 void main() 함수 블럭 하위의 모든 코드를 삭제한다. 깔끔하다. main 함수 블럭 아래에 stless를 입력한 후 Flutter Stateless Widget을 선택한다.- dart 언어는 main 함수 내에 작성된 코드가 실행된다. 생성된 클래스의 이름을 지정해준다. return 구문 뒤의 Container를 MaterialApp으로 바꿔주면 메인페이지에 대한 기본 세팅은 끝난다.  텍스트 위젯- Text('텍스트') 아이콘 위젯- Icon(Icons.아이콘 이름) 이미지 위젯- Image.asset('경로')- 이미지를 넣고..