flutter 공부 2일차(코딩애플 : 쉬운 플러터 4강까지)

강의는 코딩애플님의 쉬운 플러터 듣는중

 

공부 시작!

 

여기서 analysis_options.yaml에서

rules:
    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
    prefer_typing_uninitialized_variables : false
    prefer_const_constructors_in_immutables : false
    prefer_const_constructors : false
    avoid_print : false

이렇게 추가한다.

lint를 잠깐 끄는 용도라고 한다.

아직은 뭔지 모르겠다.

나중에는 다시 킬 거 같다.

 

 

기본 형식

메인페이지 셋팅

 

main.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

앱 디자인 짜는 법

위젯 짜깁기와 같음

 

Q.박스 넣고싶어요!

A.박스 위젯 넣으세요.

 

 

위젯

 

글자위젯

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text("안녕")
    );
  }
}

 

이미지위젯

 

이미지를 등록하려면 먼저 assets 폴더 제작 후 사진을 넣어준다.

근데 그 후 바로 넣을 수 있는게 아니다.

pubspec.yaml(앱 만들때 필요한 정리자료들) 파일에 들어가서

 

flutter:
  assets:
    - assets/

로 바꿔준다

 

 

아이콘위젯

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Icon(Icons.star)
    );
  }
}

 

 

박스위젯

 

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container()
    );
    
    
    or 
    
    
      @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SizedBox()
    );

근데 위처럼 하면 그냥 투명박스임

 

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container( width: 50,height: 50, color: Colors.blue) //단위가 LP임
    );
  }

이렇게 설정하면 파란색 박스로 형성됨

 

 

상 중 하 나누기

 

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Container(),
        bottomNavigationBar: BottomAppBar(),
      )
    );
  }

 

 

기초 앱 구동해보기

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( //이게 무슨 형식이고
        appBar: AppBar( //이게 상단에 생기는거
       title: Text("앱임"), //상단바의 텍스트
        ),
        body: Text("안녕"), //내용
        bottomNavigationBar: Row( //하단
            mainAxisAlignment : MainAxisAlignment.spaceEvenly, //띄엄띄엄
          children : [ //자식 아이콘들
            Icon(Icons.phone),
           Icon(Icons.message),
          Icon(Icons.phone)]
        ),

      )
    );

결과물

 

 

정답

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); //앱 실행해주세요!!!! 라는 뜻
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( //이게 무슨 형식이고
        appBar: AppBar( //이게 상단에 생기는거
       title: Text("앱임"), //상단바의 텍스트
        ),
        body: Text("안녕"), //내용
        bottomNavigationBar: BottomAppBar( //하단
            child :  SizedBox(
              height: 50,
              child: Row(
                  mainAxisAlignment : MainAxisAlignment.spaceEvenly, //띄엄띄엄
          children : [ //자식 아이콘들
              Icon(Icons.phone),
           Icon(Icons.message),
          Icon(Icons.phone)]
        ),
            ),
        )
      )
    );
  }
}

 

 

 

 

SizedBox vs Container 

 

컨테이너가 조금 무거운애라 sizedBox를 선호하나봄?

예) width, height, child 같은 애들

 

 

예시 오류 사항 1)

  body: Container(
            width: 100,height: 100,color: Colors.blue,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black)
            ),

 

이런 경우 color를 두번 정의해줘서 에러가 남

 

 body: Container(
            width: 100,height: 100,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black)
            ),

한번만 해주니까 에러 안뜬다.

 

width: double.infinity

무한하게 꽉채워주세요!

 

 

폰트 속성

 

 

폰트 컬러

child: Text('안녕하세요',
  style: TextStyle(color: Colors.blueGrey),
),

color는 기본 컬러랑 ## 이것도 넣기 가능

 

폰트 두께

 

child: Text('안녕하세요',
  style: TextStyle(fontWeight: FontWeight.w700 ),
),

 

appbar 속성

          appBar: AppBar( actions: [Icon(Icons.star),Icon(Icons.star)],title: Text("앱임"), leading:Icon(Icons.star),backgroundColor : Colors.lightGreen, ), //상단바의 텍스트

 

 

숙제 당근마켓 ui만들기

 

내일부터 계속...