[Flutter] 플러터 Exercise(1)

[ Flutter 환경셋팅  ]

1. Fultter SDK (WebBrowser Download)
   * Path >> C:\flutter

2. Andriod Studio Download (Default Setting..)

   * SDK Folder, JDK Location

 

   * Plugins >> Flutter Install

   * Project >> More Actions >> SDK Manager >> SDK Tools(TAP) >> Android SDK Command-line Tools (latest) 

 

3. 환경변수 등록 ( PC- 시스템고급설정 )
   * 사용자변수 Path에 "Flutter/bin" 까지의 경로추가

4. 기타설정
   * CMD(명령프롬포트)
      >>> "flutter doctor"  (플러터 개발환경 여부체크)
   * 플러터 프로젝트 생성 (C:\Users\ikik1\StudioProjects\contect)

 

---

"뷰: Project" >> "프로젝트명 contect" >> lib >> main.dart 메인

 

"main.dart" -- 앱을 구동하는 기본적인 시작파일

* Main Frame 생성  >> "stless" + [Tap]  * 화면은 >>> "위젯"으로 구성한다.  "위젯의 선언은 대문자로하며.. 소괄호로 감싼다." return MaterialApp(    home: ???              >> "실질적인, 앱을 랜더링 하는 선언위치" );

cf). 위젯 예

순번	종류	작성 예
1	글자위젯	Text('안녕')
2	이미지위젯	Image.asset('경로..'),
3	아이콘위젯	Icon(Icons.shop)  * Icons.phone, Icons.message, Icons.contact_page
4	박스위젯	Container(width: 50, height:50, color:Colors.red, child: Text('컨테이너 하위요소'))
5	다중배치위젯	Row(children: [...])          "가로 배치" Column(children: [...])    "세로 배치"

 

"pubspec.yaml" -- 앱 구성에 관한 설정(Settings) 파일

(프로젝트 내에서 assert이름의, 경로 아래에 모든 사진파일을 인식) flutter:     assets:       - assets/

 

---

[ 플러터 실습(1) ]

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());  // App 구동..
}

//  Main 앱을 구동시키기 위한 Main Class
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome UkJae FlutterAppHome'),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('본문에 들어가는 내용'),
            Image.asset('Ironman.jpg'),
            Icon(Icons.star),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: SizedBox( -- width, height, child 정도의 옵션 사용시,  Container대신 SizedBox
            height: 70,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

"Scaffold" -- 앱을 (상단, 중간부, 하단)으로 나뉘는 레이아웃 구성 틀 

Scaffold(     appBar:     <-- 상단요소 (헤더)     body:         <-- 내용 영역 (중간부 바디)     bottomNavigationBar: <-- 하단요소  )

 

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome UkJae FlutterAppHome'),
        ),
        body: Align(  // 또는 Center
          alignment: Alignment.topCenter,
          child: Container(
            width: double.infinity, height: 50, color: Colors.blue,
            // decoration: BoxDecoration (
            //   border: Border.all(color: Colors.black),
            // ),
            //margin: EdgeInsets.all(20),
            //                   fromLTRB(left, top, right, bottom)
            //margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
            //padding: EdgeInsets.all(10),
            child: Text('ukjae Body!!...'),
          ),
        ),

      ),
    );
  }

"Container 내부요소에 디자인 적용(마진, 패딩, 보더)"

 

---

[ 플러터 실습(2) ]

 

 Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('욱재 App.!...'),     // 좌측영역 문구
          leading: Icon(Icons.star),        // 좌측영역 아이콘
          actions: [Icon(Icons.shop), Icon(Icons.shop)], // 우측영역 아이콘
        ),
        body: SizedBox(
          child: IconButton(
            icon: Icon(Icons.star),
            onPressed: (){},
          )
          //ElevatedButton(
          //  child: Text('Click'),
          //  onPressed: (){ ... },
          //)

          //Text('안녕하세요',
            //style: TextStyle( color: Colors.red, fontSize: 30 ),
            // 폰트색상 설정
            // Colors.색상명
            // Color(Oxffaaaaaa)
            // Color.fromRGBO()
          //),
        )
      ),
    );
  }

"이벤트와 연결되는 사용가능한 버튼"  

* TextButton()  * IconButton()  * ElevatedButton()

 

 

 

End..