flutter

리턴되는 값은 ;로 끝내준다

MyApp, home: MyHomePage(), ThemeData, primarySwatch

//flutter material libray를 가져와야함
//안드로이드, iOS 등 일관된 디자인을 위한 것
import 'package:flutter/material.dart';

//fat arrow =>
//main이 호출할 함수 적어줌
//runApp은 위젯을 아규먼트로 가져야함, 플러터의 최상위 함수다
//MyApp()은 아무이름이나. 우리가 만들 위젯으로 스크린 레이아웃을 빌드하는 역할
//함수는 소문자로 시작, 클래스(위젯)은 대문자로 시작하며 camelcase 사용
void main() => runApp(MyApp());

//MyApp은 뼈대를 만드는 위젯으로 정적이다 stateless
//stl을 눌러 생성가능
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //MaterialApp이라는 flutter material 라이브러리 기능할 사용할 수 있는 위젯을 리턴
    //이로써 플러터가 제공하는 모든 기본 디자인과 기능 사용 가능
    //두번째 위치. 모든 위젯을 감쌈
    return MaterialApp(
      title: 'First app',
      //앱의 기본적인 테마를 지정하는 위젯
      //ThemeData역시 아규먼트를 가짐. primarySwatch는 견본을 뜻함. 기본적으로 사용할 색상견본을 사용하겠다
      theme: ThemeData(
        primarySwatch: Colors.blue      //그 중 블루 계열의 음영을 사용하겠다
      ),
    home: MyHomePage(),       //앱이 정상적으로 실행됐을 때 가장 먼저 보여줄 경로. MyHomePage는 커스텀 위젯.
       //홈 위젯이 없으면 아무것도 나타나지 않음. 이걸 Scaffold 위젯으로 바꿔도 
    );
  }
}

Scaffold, Center, Column

//데이타를 받거나 터치를 했을 때 모양이 바뀌면 stateful
//이건 그냥 간단한것이니 stateless로 만들것
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //sca 눌러서 고르기. 교육학에서 무언가 혼자 해낼 수 있도록 발판을 만들어준다는 의미
    return Scaffold(
      appBar: AppBar(
        title: Text('First app'),   //앱바에서 Text 위젯을 불러오는 이유: 앱화면에 출력되는 것이라 그럼
      ),
      body: Center(   //자식 위젯을 여러가지 가지고 있는 위젯
        child: Column(      //자신의 위젯내 모든 요소를 세로로 배
          children: [     //세로로 정렬될 것들을 배열에 넣기
            Text('Hello'),됨
            Text('Hello'),
            Text('Hello')
          ],
        ),
      ),
    );
  }
}

centerTitle, mainAxisAlignment

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Character Card',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: MyCard(),
    );
  }
}

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BBANTO'),
        centerTitle: true,    //앱바 타이틀을 중앙으로
        backgroundColor: Colors.redAccent,
        elevation: 0.0,   //그림자 효과가 사라짐
      ),
      body: Center(
        child: Column(    //위젯들을 가로축 기준으로 정렬. 세로는 관여 안 함
            mainAxisAlignment: MainAxisAlignment.center,      //위젯들을 세로축 기준으로 정렬. 상단, 중간, 하단
            children: [
              Text('Hello'),
              Text('Hello'),
              Text('Hello')
            ],
          ),
      ),
    );
  }
}

image

//pubspec.yaml
//아래 부분 활성화 시키고 경로 바꿔주기
   assets:
     - assets/puru.jpg
     - assets/puru_yellow.jpg

Row, CircleAvatar, Divider, Padding, TextStyle, SizedBox

CircleAvatar로 이미지 원에 넣기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,    //우측 상단의 빨간 줄? 리본?을 없애준다
      title: 'BBANTO',
      home: Grade(),
    );
  }
}


class Grade extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[800],       //body색
      appBar: AppBar(
        title: Text('BBANTO'),
        backgroundColor: Colors.amber[700],
        centerTitle: true,
        elevation: 0.0,
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,     //텍스트 시작점을 맞춰 정렬
          children: [
            Center(       //CircleAvatar를 누르면 좌측에 노란 전구가 생기며 그것을 눌러 "Wrap with Center" 클릭해서 중앙로 정렬
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/puru.png'),
                radius: 60.0,
              ),
            ),
            Divider(      //가로선
              height: 60.0,       //divider의 위아래 간격을 합해서 60.0px
              color: Colors.grey[850],
              thickness: 0.5,
              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.0,
                fontSize: 28.0,
                fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(
              height: 30.0,
            ),
            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.0,
                  fontSize: 28.0,
                  fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(
              height: 30.0,
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10.0,
                ),
                Text('using lightsaber',
                style: TextStyle(
                  fontSize: 16.0,
                  letterSpacing: 1.0,
                ),
                ),
              ],
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10.0,
                ),
                Text('face hero tattoo',
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10.0,
                ),
                Text('fire flames',
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                ),
              ],
            ),
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/puru_yellow.jpg'),
                radius: 40.0,
                // backgroundColor: Colors.amber[800],        //만약 배경이 투명한 거라면 배경을 따로 주도록 한다

              ),
            ),
          ],
        ),
      ),
    );
  }
}