FLUTTER 시작

공식사이트

https://flutter-ko.dev/docs

Flutter 문서

 

기본 프로젝트 구조

 

기본 메인 소스

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();
  }
}

 

HTML 개발방식은 <태그>의 사용, Flutter 개발방식은 위젯()의 사용.

//텍스트 문구 사용 Text()
MaterialApp(
	home: Text('테스트')
)
//아이콘 사용 Icon()
MaterialApp(
	home: Icon(Icons.star)
)
//이미지 사용
MaterialApp(
	home: Image.asset('assets/img01.jpg')
)
//박스 사용 Container()
MaterialApp(
	home: Container(width: 100, heigit: 100, color: Colors.yellow)
)


//추가적으로 플러터는 기준이 부모로 자식위치를 정해줄 수 있다.
MaterialApp(
	home: Center(
    	child: Container(width: 100, heigit: 100, color: Colors.yellow)
    )
)

 

위젯 안에 위젯을 넣어 사용할 수도있는데

아래는 네모박스 안에 텍스트를 넣는 방법

return MaterialApp(
  home: Center(
    child: Container(width: 350, height: 350, color: Colors.blue,
    child: Text('박스안에 나있다.'))
  )
);

 

Scaffold() 위젯

- 앱의 상,중,하를 나눠주는 위젯.

//기본 구조
return MaterialApp(
  home: Scaffold(
    appBar: 상단 위젯,
    body: 중단 위젯,
    bottomNavigationBar: 하단 위젯,
  )
);

//테스트 코드
return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('제목')),
        body: Text('안녕'),
        bottomNavigationBar: BottomAppBar(child: Text('난 하단'))
      )
    );

 

가로 또는 세로 배치

//가로배치
return MaterialApp(
      home: Scaffold(
        body: ROW(
          children: [Icon(Icons.star), Icon(Icons.star), Icon(Icons.star)]
        ),
      )
    );

//세로배치
return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [Icon(Icons.star), Icon(Icons.star), Icon(Icons.star)]
        ),
      )
    );
    
//배치한 것들의 간격을 조정하는 옵션
mainAxisAlignment: MainAxisAlignment.spaceEvenly   //가로 정렬
crossAxisAlignment: CrossAxisAlignment.start       //세로 정렬

 

테스트1

결과

코드

return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임') ),
        body: Text('안녕'),
        bottomNavigationBar: BottomAppBar(
        //child: Container(   높이,넓이 등만 사용할 거면 가벼운 SizeBox 사용
          child: SizedBox(
            height: 50,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page),
              ],
            ),
          ),
        ),
      )
    );
    
// 추가 설명
Row() 로 만해서 하단 아이콘 배치시 높이를 조절할 수가 없다.
때문에 컨테이너로 감싸서 높이 속성을 줄 수있는데,
Container은 비교적 무거워서 높이,넓이의 속성만 줄 경우 SizeBox를 사용

※ 추가로 MaterialApp에 debugShowCheckedModeBannser: false 속성을 주면,

앱바 우측 끝에 DEBUG의 빨간 띠가 없어진다.

Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Charactor card',
      home: MyCard(),
    );
  }

 

넓이 비율 조정 (Flexible 위젯)

기본적으로

Container()에서는 with속성에 고정값만 줄 수 있고, %는 줄 수 없기때문에,

Flexible위젯으로 Container()을 감싸야한다.

즉, 아래와 같이 하면 파란박스와 초록박스의 영역이 3:7만큼 된다.

return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Row(
          children: [
            Flexible(child: Container(color: Colors.blue), flex: 3),
            Flexible(child: Container(color: Colors.green), flex: 7)
          ],
        ),
      )
    );

추가로 Flexible와 비슷한 Expanded위젯이 있는데

Expanded는 기본으로 flex:1 을 가지고 있는 위젯이다.

박스를 만들고 싶을때 사용.

아래와 같이 하면  파란색이 다 차지한다.

body: Row(
          children: [
            Expanded(child: Container(color: Colors.blue)),
            Container(color: Colors.green)
          ],
        ),

 

스크롤이 있는 리스트 (ListView 위젯)

- 기본적으로 column과 같이 세로로 나열

- 스크롤바가 생긴다

- 사용자의 현재 스크롤 위치 감시가능

- 메모리 절약 가능

return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: [
            for(int i=0; i<100; i++)
              Text("나는 $i 번")
          ],
        ),
      ),
    );

결과

 

AppBar 속성중 그림자 영역 제어(elevation)

기본 속성 AppBar아래 새도우가 생성됨

elevation: 0 값을 줘서 새도우 삭제

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar'),
        backgroundColor: Colors.redAccent,
        elevation: 0,
      ),
    );
  }

 

이미지를 원형틀에 넣어주는 위젯 (CircleAvatar)

Assetimage에 이미지를 넣어주면 원형틀에 맞춰 이미지가 반영된다.

radius속성으로 크기 조정,

backgroundColor 속성도 있는데 배경색과 맞춰주면

테두리 없이 자연스럽게 이미지만 보여줄수도 있다.

child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            CircleAvatar(
              backgroundImage: AssetImage(''),
              radius: 60,
            ),

 

영역을 선으로 나눠주는 위젯(Divider)

이미지와 name 사이에 선을 나타내주는 Divider

 

Divider 위젯 내부 속성중 height는

선의 높이가 아니라 위 아래로부터 60만큼 떨어지겠다는 의미

즉, 60으로 지정하면 위 이미지로부터 30, 아래 NAME 텍스트로부터 30떨어진다는 뜻

endIndent 속성은 끝에서부터 얼마까지만 표시하겠다이고,

padding leftf를 30만큼 줬기 때문에 30으로 지정

body: Padding(
        padding: const EdgeInsets.fromLTRB(30, 40, 0, 0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('point01.jpg'),
                radius: 60,
              ),
            ),
            Divider(
              height: 60,
              color: Colors.grey[850],
              thickness: 0.5,
              endIndent: 30,
            ),
            Text('NAME',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2
            ),
            ),