쌤닷컴

[완성 화면]

[주요 개념]

- 이미지 import

- 위젯간의 간격은 Sizedbox로 조정

- padding

padding: EdgeInsets.fromLTRB(30, 40, 0, 0)

- Debug표시 없애기

debugShowCheckedModeBanner: false,

- 써클 아바타

CircleAvatar(
  backgroundImage: AssetImage('assets/charizard-mega-y.png'),
  radius: 60,
  backgroundColor: Colors.amber[600],
)

[완성 전체 코드]

import 'package:flutter/material.dart';
import 'package:mild_5/1.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'BBANTO',
      home: Grade()
    );
  }
}

class Grade extends StatelessWidget {
  const Grade({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[600],
      appBar: AppBar(
        title: Text('BBANTO'),
        backgroundColor: Colors.amber[700],
        centerTitle: true,
        elevation: 0,
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30, 40, 0, 0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/charizard.gif'),
                radius: 60.0,
                backgroundColor: Colors.black,
              ),
            ),
            Divider(
              height: 60.0, // 가로선 기준 위아래 간격이 30씩
              color: Colors.grey[850],
              thickness: 1,
              endIndent: 30.0,
            ),
            Text('Name',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2.0,
            ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text('BBANTO',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2,
              fontSize: 28,
              fontWeight: FontWeight.bold
            ),),
            SizedBox(
              height: 30,
            ),
            Text('BBANTO POWER LEVEL',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text('14',
              style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2,
                  fontSize: 28,
                  fontWeight: FontWeight.bold
              ),),
            SizedBox(
              height:25
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10,
                ),
                Text('using lighsaber',
                  style: TextStyle(
                    fontSize: 16,
                    letterSpacing: 1
                  ),
                )
              ],
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10,
                ),
                Text('face hero tattoo',
                  style: TextStyle(
                      fontSize: 16,
                      letterSpacing: 1
                  ),
                )
              ],
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10,
                ),
                Text('fire flames',
                  style: TextStyle(
                      fontSize: 16,
                      letterSpacing: 1
                  ),
                )
              ],
            ),
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/charizard-mega-y.png'),
                radius: 60,
                backgroundColor: Colors.amber[600],
              )
            )
          ],
        ),
      ),

    );
  }
}

pubspec.yaml 파일 띄워쓰기 2칸 중요

아래와 같이 사용

import 'package:flutter/material.dart'; //flutter/material.dart 불러오기

void main() => runApp(MyApp());  //최상단 MyApp실행하기

class MyApp extends StatelessWidget {  //MyApp 설계
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(  //MyApp에서 가장 기본인 MaterialApp 설정하기
      title:'My First App', //보통 타이틀, 테마, 홈으로 구성
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),  // home이 중요한데 가장 먼저 열리는 페이지 실행
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(  //페이지에서 가장 기본인 Scaffold로 시작
        appBar: AppBar( //scaffold의 구성은 appBar와 body가 기본
          title: Text('My App'),
        ),
        body: Center( //body는 보통 center에 column넣고 시작
          child: Column(
            children: [
              Text("Hello"),
              Text("Hello"),
              Text("Hello"),
              Text("Hello"),
            ],
          ),
        )
    );
  }
}

플러터는 객체 기반 언어

커스텀 위젯도 모두 클래스로 구현

stful, stless로 불러쓸 수 있음

사용 예시

개발환경 구성은 아래 링크

https://www.youtube.com/watch?v=usE9IKaogDU&list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C 

초보때는 린트 꺼주는게 나을 수도?

analysis_options.yaml 파일에 rules에 추가하기

rules:
  prefer_typing_uninitialized_variables : false
  prefer_const_constructors : false
  prefer_const_constructors_in_immutables : false
  prefer_const_literals_to_create_immutables : false
  avoid_print : false

애셋 폴더 경로지정(이미지 같은거 사용)

- 이미지 저장용 assets폴더 만들기

- 이미지, 아이콘 등 폴더에 넣기

- 이미지 등록하기 pubspec.yaml 파일에

- 아래 이미지처럼 써주기

 - 사용할 때는 image.assets('경로')

5강 플렉서블, 익스팬디드

1. 플렉서블(비율적으로 배치)

2. 익스팬디드(플렉스 1과 같음) - 나머지 꽉 채울 때

4강

텍스트 다루기

버튼 3종류

앱바 아이콘 텍스트 배치

박스 다루기

박스에 패딩, 마진, 테두리(decoration사용) 효과주기

정렬, 박스 꽉 채우기

가로세로 배치하는 법과 Scaffold

** ctrl + space로 자동완성 잘써라.. 외우지말고

1. 기본 앱의 구성 (Top, Body, Bottom)

2. 위젯 가로 배치

3. 위젯 세로 배치  : Row -> Column으로 변경

4. 정렬

  가로기준 가운데 정렬 :

mainAxisAlignment: MainAxisAlignment.center,

  가로기준 가운데 정렬 1줄 꽉 차게 퍼뜨려서 배치

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

  가로기준에서 세로 정렬?

crossAxisAlignment: CrossAxisAlignment.center,

! 숙제 코드

더보기

4가지 위젯

1. 텍스트 위젯

Text('Hello')

2. 아이콘 위젯

Icon(Icons.shop)

3. 이미지 위젯

  가. 이미지 보관용 assets폴도 만들기

  나. pubspec.yaml에서 assets폴더 등록하기

  다. Image.asset('경로')     예) Image.asset('flower.png')

4. 박스 위젯

  가. Container()

  나. SizedBox()

  다. Center()

  라. 스타일은 width, height는 단위가 LP로 50LP는 1.2cm를 의미 // color: Colors.blue

참고강의: https://www.youtube.com/watch?v=mLQ-ehf3d6Y&list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C&index=3

C++을 사용하고 있고 cin/cout을 사용하고자 한다면,  ios_base::sync_with_stdio(false)와 cin.tie(NULL)를 둘 다 적용해 주고, endl 대신 개행문자(\n)를 쓰자. 단, 이렇게 하면 더 이상 scanf/printf/puts/getchar/putchar 등 C의 입출력 방식을 사용하면 안 된다.

Java를 사용하고 있다면, Scanner와 System.out.println 대신 BufferedReader와 BufferedWriter를 사용할 수 있다. BufferedWriter.flush는 맨 마지막에 한 번만 하면 된다.

Python을 사용하고 있다면, input 대신 sys.stdin.readline을 사용할 수 있다. 단, 이때는 맨 끝의 개행문자까지 같이 입력받기 때문에 문자열을 저장하고 싶을 경우 .rstrip()을 추가로 해 주는 것이 좋다.

아래 정보는 백준온라인 게시글을 참고한 것입니다.

출처: https://www.acmicpc.net/blog/view/56

참고로 mmap쓰는 방법은 아래 사이트 참고하세요

https://doocong.com/algorithm/fast-input-mmap/