저번까지 한거 확인하는 코드

echo $JAVA_HOME

• java-21-openjdk-amd64가 뜨면 완료

home으로 이동

cd ../

git colne 연결

git clone 깃허브링크

프로젝트 파일로 이동

cd SpringMVC6

maven 다운

/home/git/클라우드/SpringMVC06

apt install maven

상위 폴더로 이동

cd ../

클라우드 폴더로 이동

/home/git/

cd 클라우드 이름

pull

/home/git/클라우드

git pull

프로젝트 파일로 이동

cd SpringMVC06

mvn

/home/git/lgdx6_cloud/SpringMVC06

mvn clean pakage

서버실행

home/git/lgdx_cloud/SpringMVC06

cd target

home/git/lgdx_cloud/SpringMVC06/target

java -jar SpringMVC06-0.0.1 자동완성

• https://pub.dev/packages/image_picker/install

  import 'package:flutter/material.dart';
  import 'package:image_picker/image_picker.dart';
  final ImagePicker picker = ImagePicker();
  class ExImage extends StatelessWidget {
  const ExImage({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: Column(
        children: [
          ElevatedButton(
            onPressed: () async {
              // Pick an image.
              final XFile? image = await picker.pickImage(source: ImageSource.gallery);
          },
            child: Text("갤러리 접근"),
          ),
          ElevatedButton(onPressed: () async {
            // Capture a photo.
            final XFile? photo = await picker.pickImage(source: ImageSource.camera);
          },
              child: Text("카메라 접근")),
        ],
      )),
    );
  }
  }
  

```

내장 데이터 베이스 연동해보기

라이브러리 다운로드

1. pub.dev 접속

2. 대충 사용법

3. pubspec.yaml에 추가 후 저장 및 pub get

라이브러리 전체 프로세스

1. 로그인 시 storage에 저장
2. 앱을 실행시켜서 storage에 저장 되어 있는 값 확인
3. 1 값이 있으면 바로 LoginSuccessPage로 이동
4. 2 값이 없으면 LoginPage로 이동
5. 로그아웃 storage값 삭제 -> LiginPage로 이동

2. VPC 생성

3. 생성중 화면

4. 생성완료 화면

5. GitHub 레파지포리 생성

6. 전자정부 프레임워크 Git 공유하기

1. application.properties

2.

3.

4.

5.

6.

7.

8.

9.

10. 초록색 창에 토큰 복사

11. 아이디 입력후 비밀번호 창에 토큰값 붙여넣기 하고. preview---finish

7. 서브넷 생성

8. 서버 생성

1. 3세대 서버 생성 후 신규 서버로 선택

2.

3.

4.

5.

6.

7. 서버 생성 버튼

9.

1. 다운로드 후 실행파일 실행

2. 비밀번호 확인 후 복사

3.

4. 생성된 ssh 창 선택후 프롬프트 실행되면 root입력. 입력후 password입력 명령어에 마우스 우클릭 딱 한번만 하고 엔터

5. 실행 완료

DB-sql문 포매팅 방법

VsCode(app.py)

from flask import Flask, request,Blueprint
# 파일 관리를 위해 Blueprint
# 해당 파일 명을 import 진행
# from 파일명  import 변수명
from dbConnect import member
app = Flask(__name__)
# register_blueprint() 사용해서 연결
app.register_blueprint(member, url_prefix="/member") # prefix 별칭
@app.route('/')
def test():
    # return타입에 html 띄울 수 있는 함수 혹은 문자열 혹은 json이 반환
    return 'hello'
@app.route('/send')
def send():
    # 데이터 받는법
    # request.args.get('보내준 곳에서의 key값')
    test = request.args.get('test')
    print(test)
    return "hello234"
if __name__ == '__main__':
    app.debug = True #저장 하면 즉시 반영
    app.run('192.168.219.102', port = 8086)

VsCode(dbConnect.py)

# python - mysql 연결 라이브러리
import pymysql
from flask import Blueprint, request
import json
# 1. Blueprint 설정
member = Blueprint("member", __name__, template_folder="templates")
@member.route('/')
def test():
    return 'hello member'
@member.route('/insert')
def insert():
    #0. 클라이언트 값 받기
    email = request.args.get('email')
    password = request.args.get('password')
    age = int(request.args.get('age')) # request의 경우 str 타임으로 받아오기 때문에 DB와 타입 일치 위해 형변환!
    name = request.args.get('name')
    print(email,password,age,name)
    # 1. db 연결 - host, user, password,schema, encoding
    db = pymysql.connect(host='localhost', user='root', password='1234', db='flutter_db', charset = 'utf8')
    # 2. 데이터 접근 객 체(cursor 객체 생성)
    # db 연결한 변수 안에 cursor가 존재
    cursor = db.cursor()
    # 3. sql문 작성
    # sql = "insert into member values('test2','1234','test2',20)"
    # pymysql의 포맷팅
    # %(변수명)s
    sql = "insert into member values(%(email)s, %(password)s, %(name)s, %(age)s)"
    # 4. 실행 cursor.excute(sql)
    cursor.execute(sql,{"email": email, "password" : password, "age" : age, "name" : name})
    # 필수는 아니나 유용한 변수 insert, update, delete 성공한 행의 개수를 파악
    row = cursor.rowcount
    # 5. 저장 후 db 닫기
    db.commit()
    db.close()
    # 데이터 insert 성공시 row라는 변수에 양수가 들어가 예정(성공한 행의 개수)
    if row > 0:
        return "success"
    else :
        return "fail"
@member.route("/login")
def login():
    # 0. 데이터 받기
    id = request.args.get("id")
    password = request.args.get("pw")
    # 1. db 연결
    db = pymysql.connect(host = "localhost",  user ="root", password = "1234", db= "flutter_db", charset = "utf8")
    # 2. 데이터 접근 객체 생성
    cursor = db.cursor()
    # 3.sql 작성
    sql = "select * from member where id = %(id)s and pw = %(password)s"
    # sql = "select * from member"
    # 4. 실행
    cursor.execute(sql, {'id': id, 'password' : password})
    # 5. 결과 받아오기
    result = cursor.fetchall() # 모든 행에 데이터 가져오기
    # cursor.fetchone() # 한개의 행만 가져오기
    # cursor.fetchmany(2) # ()안의 숫자 행 만큼 가져오기
    print(result)  # select 결과값은 튜플로 가져옴
    # 튜플은 Flask 내에서 reurtn되지 않습니다!!(return이 가능 한 타입은 json혹은 문자열)
    # 튜플은 json타입으로 변환
    row_headers = [x[0] for x in cursor.description] #db table의 name, type code, size~~
    print(row_headers) # table의 컬럼명
    json_data = [] # dict 구조들이 들어갈 예정
    for rv in result:
        json_data.append(dict(zip(row_headers, rv)))
        #zip 함수 사용해 다른 2개를 묶는 역할 -> 튜플
        #튜플 -> dict로 형변환
    #dict 가 있는 list를 json으로 변환 --> json 라이브러리 사용
    # json.dumps()
    data = json.dumps(json_data)
    # 마지막 db 저장 close
    db.commit()
    db.close()
    return data

클라우드 서비스란?

• 게시글 수정 눌러서 확인하기

네이버 클라우드

콘솔

• 로그인 후 콘솔 대시보드로 들어가기
• 지역(region 바꾸기)
• 플랫폼 VPC로 변경
• 서비스에서 server랑 VPC 즐겨찾기(별표) 누르기

Commit

• gitTest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>첫 번째 커밋</h1>
</body>
</html>

GitBash

0. cd로 작업 폴더로 이동

   • pwd로 현재 작업 폴더 확인 가능

1. git init

• 현재 경로에서 git 명령(commit,pull,push)을 사용할 수 있게끔 초기화
• 로컬레퍼지토리 생성
• 폴더 옆에 master가 뜨면 완료

2. git config --global user.name "이름" git config --global user.email "이메일"

   • 사용자 정보 등록

3. 커밋(내 로컬에서 커밋할때),(다른 주소를 커밋할때는 4번을 먼저) 3-1. git add 커밋할 프로젝트 => 커밋 활성화 단계 3-2. git commit -m "커밋 메시지" => 커밋 진행 단계(의무사항)

4. git remote add origin 주소

   • 원격 저장소 연결

5. git push origin master

   • 푸쉬 명령

6. git pull origin master

   • 풀 명령

1. 로컬 레퍼지토리 삭제(내역)

• rm -rf .git
• 폴더 옆에 master가 사라진다.

2. 사용자 정보 확인

• git config --global --list

3. 등록된 원격 저장소 확인

• git remote -v

4. 등록된 원격 저장소 삭제

• git remote rm 원격저장소 이름

참고) https://verdant-structure-e78.notion.site/Git-a9eefbccbc89495397d196172b8bcf85

Git이란?

• Git 저장소 호스팅을 지원하는 웹 서비스로 온라인 상에서 여러 사용자들이 컴퓨터 파일을 공유하도록 도와준다

Git의 장점

• 소스코드를 주고 받을 필요 없이, 같은 파일을 여러명이 동시에 작업하는 병렬개발이 가능
• 프로젝트 관리, 배포, 이슈 추적 기능등 프로젝트 진행에 있어 편리한 기능들을 지원

GitHub의 원리

• 🌟🌟중요한 순서🌟🌟
  • Commit을 하기전 다른 팀원이 했던 내용을 먼저 pull 하고
  • 자신의 코드를 Commit -> Push를 통해 올려주어야 한다.

GitHub의 필요성

• 재택근무, 비대면 작업이 활성화 되는 요즘 온라인 협업도구의 필요성 증가
• GitHub에 남겨진 프로젝트 결과물들이 포트폴리오 역할을 하고 동시에 그 사람의 작업 능력을 증명
• 협업 능력을 중요시 하는 요즘 GitHub 사용 경험은 필수

GitHub 활용시 지켜야 하는 규칙

• 수정할 때 같은 파일을 동시에 수정하지 않기!
• pull,push 작업을 할때 꼭 commit을 통해서 local repository최신화 시켜주기!
• 개발을 한 후 commit -> push 할때 꼭! 팀원들에게 알려주기 EX)

Git 설치

• https://git-scm.com/downloads/win 들어가서 설치
• 실행 후 싹다 Next -----> Finish

import 'package:flutter/material.dart';
import 'package:flutter_http/screen/join_page.dart';

TextEditingController emailCon = TextEditingController();
TextEditingController pwCon = TextEditingController();

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로그인 페이지'),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            margin: EdgeInsets.all(12),
            padding: EdgeInsets.all(12),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                    controller: emailCon,
                    decoration: InputDecoration(
                        label: Row(
                          children: [
                            Icon(Icons.account_circle),
                            Text("email 입력 "),
                          ],
                        ),
                        hintText: "example@example.com",
                        hintStyle: TextStyle(color: Colors.grey[300])),
                    keyboardType: TextInputType.emailAddress,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                      obscureText: true,
                      controller: pwCon,
                      decoration: InputDecoration(
                        label: Row(
                          children: [
                            Icon(Icons.key),
                            Text("pw 입력 "),
                          ],
                        ),
                      )),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.blueAccent),
                        onPressed: () {

                        },
                        child: Text('로그인하기')),
                    ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.grey),
                        onPressed: () {
                          Navigator.push(context, MaterialPageRoute(builder: (
                              _) => JoinPage()));
                        },
                        child: Text('회원가입하기'))
                  ],
                ),
                SizedBox(
                  height: 40,
                ),
                Container(
                  color: Colors.grey[200],
                  width: double.infinity,
                  height: 2,
                ),
                SizedBox(
                  height: 40,
                ),

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

join_page

import 'package:flutter/material.dart';

class JoinPage extends StatelessWidget {
  const JoinPage({super.key});

  @override
  Widget build(BuildContext context) {
    TextEditingController input_id = TextEditingController();
    TextEditingController input_pw = TextEditingController();
    TextEditingController input_age = TextEditingController();
    TextEditingController input_name = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text('회원가입 페이지'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                  label: Row(
                    children: [
                      Icon(Icons.account_circle),
                      Text("email 입력 "),
                    ],
                  ),
                  hintText: "example@example.com",
                  hintStyle: TextStyle(color: Colors.grey[300])),
              keyboardType: TextInputType.emailAddress,
              controller: input_id,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                label: Row(
                  children: [
                    Icon(Icons.key),
                    Text("비밀번호 입력 "),
                  ],
                ),

              ),
              keyboardType: TextInputType.text,
              obscureText: true,
              controller: input_pw,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                  label: Text("나이 입력 "),
                  hintText: "20",
                  hintStyle: TextStyle(color: Colors.grey[300])),
              keyboardType: TextInputType.number,
              controller: input_age,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                  label: Text("이름 입력 "),
                  hintText: "플러터",
                  hintStyle: TextStyle(color: Colors.grey[300])),
              keyboardType: TextInputType.text,
              controller: input_name,
            ),
          ),

          ElevatedButton(onPressed: (){

          }, child: Text('회원 가입'))
        ],
      ),
    );
  }
}

MySQL연동하고 데이터 강제로 넣어보기

• dbConnect.py

  # python - mysql 연결 라이브러리
  import pymysql
  from flask import Blueprint
  

1. Blueprint 설정

member = Blueprint("member", name, template_folder="templates")

@member.route('/') def test(): return 'hello member'

@member.route('/insert') def insert(): # 1. db 연결 - host, user, password,schema, encoding db = pymysql.connect(host='localhost', user='root', password='1234', db='flutter_db', charset = 'utf8')

# 2. 데이터 접근 객 체(cursor 객체 생성)
# db 연결한 변수 안에 cursor가 존재
cursor = db.cursor()

# 3. sql문 작성
sql = "insert into member values('test2','1234','test2',20)"

# 4. 실행 cursor.excute(sql)
cursor.execute(sql)

# 필수는 아니나 유용한 변수 insert, update, delete 성공한 행의 개수를 파악
row = cursor.rowcount

# 5. 저장 후 db 닫기
db.commit()
db.close()

# 데이터 insert 성공시 row라는 변수에 양수가 들어가 예정(성공한 행의 개수)
if row > 0:
    return "success"
else :
    return "fail"

- app.py

from flask import Flask, request,Blueprint

파일 관리를 위해 Blueprint

해당 파일 명을 import 진행

from 파일명 import 변수명

from dbConnect import member

app = Flask(name)

register_blueprint() 사용해서 연결

app.register_blueprint(member, url_prefix="/member") # prefix 별칭

@app.route('/') def test(): # return타입에 html 띄울 수 있는 함수 혹은 문자열 혹은 json이 반환 return 'hello'

@app.route('/send') def send(): # 데이터 받는법 # request.args.get('보내준 곳에서의 key값') test = request.args.get('test') print(test) return "hello234"

if name == 'main': app.debug = True #저장 하면 즉시 반영 app.run('192.168.219.179', port = 8086)

```

app.py

from flask import Flask, request
app = Flask(__name__)
@app.route('/')
def test():
    # return타입에 html 띄울 수 있는 함수 혹은 문자열 혹은 json이 반환
    return 'hello'
@app.route('/send')
def send():
    # 데이터 받는법
    # request.args.get('보내준 곳에서의 key값')
    test = request.args.get('test')
    print(test)
    return "hello234"
if __name__ == '__main__':
    app.debug = True #저장 하면 즉시 반영
    app.run('192.168.219.179', port = 8086)

안드로이드 스튜디오 돌아와서 서버 연결

• ex_flask

  import 'package:dio/dio.dart';
  import 'package:flutter/material.dart';
  // tf 컨트롤러
  TextEditingController testCon  = TextEditingController();
  final dio = Dio();
  class ExFlask extends StatelessWidget {
  const ExFlask({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            TextField(
              controller: testCon,
            ),
            ElevatedButton(onPressed: () async{
              String test = testCon.text;
              // 1. url 작성
              String url = 'http://192.168.219.179:8086/send';
              // 핸드폰도 작은 컴퓨터 입니다.
              // 즉 핸드폰도 서버가 될 수 있습니다.!
              // 코드에 작성한 localhost는 flutter 쪽에선 핸드폰
              // vscode쪽(python)에서는 컴퓨터
              // cmd 창 ipconfig 통해서 ip 주소 알아낸 다음 코드 수정
              // 2. 통신 라이브러리 - dio 라이브러리
              // dio 객체 생성했는지 확인(없으면 객체 생성코드 작성)
              // 3. 통신(get/post)
              // get(url,(queryParameters{map구조로 작성}))
              Response res = await dio.get(
                  url,
                  queryParameters:{'test' : test}
              );
              print(res);
            },
              child: Text("보내기"),
            ),
          ],
        ),
      ),
    );
  }
  }

통신 라이브러리 dio사용

• pubspec.yaml

  dependencies:
  dio: ^5.8.0+1

MySQL 다운로드

• 들어가서 두번째꺼 다운로드, 로그인 안하고 아래쪽에 다운로드 시작버튼 https://dev.mysql.com/downloads/installer/
• 실행 후 다 NEXT----Finish

WorkBench 다운로드

• 들어가서 같은 방법으로 다운로드 https://dev.mysql.com/downloads/workbench/

스키마 생성

• workbench 들어가서 왼쪽 가운데 회색창 클릭
• status누르고 우클릭 후 Create Schema
• 이름 지정하고 Apply
• 생성된 스키마에 우클릭 후 Set as Default Schema 하면 자동으로 스키마를 찾아간다.

테이블 생성

• 스키마 드롭다운 내리고 테이블 우클릭 후 Create Table
• 이름 지정, 컬럼, 타입 지정 후 Apply후 창 뜨면 Finish

• json파싱을 이해한다.
• Dart언어의 Future와 await를 이해한다.
• API를 사용하여 http 통신과 json파싱을 구현한다.

동기 vs 비동기

Future 예시

• 궁극적으로 원하는 물건은 음식!
• 영수증은 추후 음식으로 변경 예정!

• 영수증 == Future 객체

Dart 언어 – future, async, await 이론

• Futuer 객체는 추후 어떠한 타입으로 변형 될지 대기 하는 객체
• <>제네릭으로 타입으로 어떤 결과물이 올 지 알고 있다.
• Future클래스는 비동기 작업시 사용
• 일정 소요시간 후에 실제 데이터나 에러를 반환
• async클래스는 await메서드를 가지고 있음
• await 로 선언된 메서드는 응답이 처리 될 때까지 대기

JSON

• XML : eXtensible Markup Language

• HTML은 정해진 태그만 사용 가능 하지만 Extendible하게 XML은 내가 만든 태그를 사용 가능

• 하지만 이러한 태그들은 개발에 있어 공유하기 어려움

• Json : jacascript objext Notation k:v 값으로 설정 된 값으로 데이터를 더 편하게 보기

• Json viewer 설치하여 조금 더 편하게 보기!

var 타입은 List <String> 을 대신할 수 있다.

코드

• image_listview

import 'package:flutter/material.dart';
import 'package:fluuter_listview/model/image_model.dart';
import 'image_detail.page.dart';
var ryanName = [
  '리틀 라이언',
  '반짝 라이언',
  '하트하트 라이언',
  '춘식이와의 만남',
  '룸메는 춘식이',
  '좋아요'
];
var imgList = [
  'image/ryan1.jpg',
  'image/ryan2.png',
  'image/ryan3.jpg',
  'image/ryan4.png',
  'image/ryan5.png',
  'image/ryan6.jpg',
];
class ImageListview extends StatefulWidget {
  const ImageListview({super.key});
  @override
  State<ImageListview> createState() => _ImageListviewState();
}
class _ImageListviewState extends State<ImageListview> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          setState(() {
            imgList.add("image/ryan1.jpg");
            ryanName.add("리틀라이언");
          });
        },
      ),
      body: SafeArea(
        child: ListView.builder(
          itemCount: imgList.length,
          itemBuilder: (context, index) {
            // 하위 위젯에게 클릭과 같은 이벤트를 부여하는 위젯 - GestureDetector
            return GestureDetector(
              onTap: () {
                print("hello $index");
                //img_model 객체생성(new생략 가능)
                ImgModel im = ImgModel(index, imgList[index], ryanName[index]);
                // 상세 페이지 이동 (예시로 만들어 둔 ImageDetailPage)
                Navigator.push(context, MaterialPageRoute(
                    builder: (_) => ImageDetailPage(imgModel:im,)),
                );
                // 팝업창 띄우기
                // 내장함수 showDialog
                showDialog(
                  context: context,
                  builder: (_) {
                    // 위젯을 리턴하는 이유 : Dialog 창 디자인
                    return Dialog(
                      child: Container(
                        width: MediaQuery.of(context).size.width * 0.7,
                        height: 380,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Colors.white,
                        ),
                        child: Column(
                          children: [
                            const SizedBox(height: 32),
                            ClipRRect(
                              borderRadius: BorderRadius.circular(10),
                              child: Image.asset(
                                imgList[index],
                                width: 200,
                                height: 200,
                              ),
                            ),
                            const SizedBox(height: 10),
                            Text(
                              ryanName[index],
                              style: const TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.bold,
                                color: Colors.grey,
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  ElevatedButton.icon(
                                    onPressed: () {
                                      setState(() {
                                        ryanName.removeAt(index);
                                        imgList.removeAt(index);
                                      });
                                      // dialog도 하나의 페이지로 인식 --> 이전
                                      Navigator.pop(context);
                                    },
                                    icon: const Icon(Icons.close),
                                    label: const Text('삭제하기'),
                                    style: ElevatedButton.styleFrom(
                                      backgroundColor: Colors.grey,
                                    ),
                                  ),
                                  const SizedBox(width: 10),
                                  ElevatedButton.icon(
                                    onPressed: () {
                                      Navigator.pop(context);
                                    },
                                    icon: const Icon(Icons.close),
                                    label: const Text('close'),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                );
              },
              child: Card(
                child: Row(
                  children: [
                    Expanded(child: Image.asset(imgList[index])),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(ryanName[index]),
                          Text("${index + 1}번째 라이언"),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

• image_detail_page

import 'package:flutter/material.dart';
import 'package:fluuter_listview/model/image_model.dart';
// class ImageDetailPage extends StatelessWidget {
//   const ImageDetailPage({
//     super.key,
//     required this.ryanName,
//     required this.imgPath,
//     required this.index,
//   });
class ImageDetailPage extends StatelessWidget {
  const ImageDetailPage({super.key, required this.imgModel,
  });
  // index, ryanName정보, 이미지 경로
  // final int index;
  // final String ryanName;
  // final String imgPath;
  final ImgModel imgModel;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("${imgModel.index} 번째 라이언")),
      body: Center(
        child: Column(
            children: [
              Image.asset(imgModel.imgPath),
              Text('world')
            ]),
      ),
    );
  }
}

flutter_listview lib.zip └── lib/ ├── main.dart ├── grid_listview.dart ├── HorizontalListview.dart └── vertical_listview.dart

List View : 스크롤이 가능한 배열형 위젯

코드

• HorizontalListview

import 'package:flutter/material.dart';
import 'package:fluuter_listview/vertical_listview.dart';
class Horizontallistview extends StatelessWidget {
  const Horizontallistview({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          // 가로 리스트뷰로 변경 코드
          // scrollDirection을 미작성시 vertical이 기본
          scrollDirection: Axis.horizontal,
          itemBuilder: (context,index) {
            return Container(
              margin: EdgeInsets.all(4),
              height: 50,
              color: Colors.lightBlueAccent,
              child: Text("${intList[index]}번째"),
            );
          }
        ),
      ),
    );
  }
}

• verticalListview

import 'package:flutter/material.dart';
// 1~100 있는 리스트 생성
// 리스트 안에 있는 내장 메소드
// generate(몇개 만들지, 한개 만든 후 실핼될 코드)
List<int> intList = List<int>.generate(100,(index) => index++);
class VerticalListview extends StatelessWidget {
  const VerticalListview({super.key});
  @override
  Widget build(BuildContext context) {
    print(intList);
    return Scaffold(
      body: SafeArea(
          child: ListView.builder(
            itemCount: intList.length,
              itemBuilder: (context,index){ // builder의 매개변수 context _로 수정가능
                // 매개변수 buildContext, int
                // ListView의 한 칸(item)에는 index가 존재
                // return 위젯
                // 디자인
                return Container(
                  // 회색줄 : lint 줄(hint)
                  // 의미  : 에러 x, 경고 x
                  // --> 추천
                  margin: EdgeInsets.all(8),
                  color: Colors.greenAccent,
                  height: 50,
                  child: Text("${intList[index]}번째 아이템"),
                );
              }
              )),
    );
  }
}

• gird_listview

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
// 1.count
List<int> intList = List<int>.generate(100,(index) => index++);
class GridListviewCount extends StatelessWidget {
  const GridListviewCount({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
          childAspectRatio: 1/2
          ),
          itemBuilder: (_,index){
            return Container(
              margin: EdgeInsets.all(4),
              height: 50,
              color: Colors.purple,
              child: Text("${intList[index]}번째"),
            );
          },
        ),
      ),
    );
  }
}
// 2. extend -- 비율
class GridListviewExtend extends StatelessWidget {
  const GridListviewExtend({super.key});
  @override
  Widget build(BuildContext context) {
    // 디바이스 가로길이를 구하는 코드
    print(MediaQuery.of(context).size.width);
    return Scaffold(
      body: SafeArea(
        child: GridView.builder(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 100,
                  // 디바이스의 가로길이 ~/ maxCrossAxisExtend에 작성한 숫자 +1 개수 출력
            ),
            itemBuilder: (_, index){
              return Container(
                margin: EdgeInsets.all(4),
                height: 50,
                color: Colors.pinkAccent,
                child: Text('${intList[index]}번쩨'),
              );
            }),
      ),
    );
  }
}

flutter_pagemove lib/ ├── main.dart └── screen/ ├── bluepage.dart ├── color_page.dart ├── login_page.dart ├── login_success_page.dart └── red_page.dart

화면이동- 로그인 페이지

• const클래스 에서는 상수가 아닌 값을 선언할 수 없다는 뜻
  • 해결방안1. 클래스 앞에 const지워주기
  • 해결방안2. 변수명에 final작성해주기

• 가급적 해결방안2로 해결하기 : const같은 경우는 컴파일시 값이 결정되기 때문에 앱을 생성할 때 한번만 생성하게됨. 특정 화면 rerendering될 경우 재생성을 막을 수 있어 내부 리소스 낭비를 막을 수 있다.

dart언어 클래스, 생성자

생성자 생성

• this키워드는 클래스 나 자신을 뜻함

  Animal(String name, int age){
    this.name = name;
    this..age = age;
  }

• 한줄로 요약 가능 이때 반드시 name, age 값이 있어야 하므로 Late,?연산사 생략 가능!

  Animal(this.name, this.age);

함수/ 메소드 추가 설명

• 선택적 매개변수, 위치적 매개변수, Function 타입 등 함수/ 메소드에 대한 지식이 더 존재하나 추후 등장시 설명(예시코드만)

• Navigator를 활용하여 페이지를 이동할 수 있다.
• Push, Pop의 차이를 이해한다
• 페이지 이동에 대한 예제를 풀 수 있다.
• https://grow-grow.tistory.com/7
• 수정하기

화면이동 이론

• Flutter에서 화면 간 이동 처리를 위해 Navigator 사용!
• Navigator 내 push(), pop(), replace() 메소드를 이용해서 페이지 이동
• Navigator는 전환 애니메이션을 사용하여 화면을 Stack으로 관리,
• BuildContext를 이용해서 어떠한 페이지로 이동할지 Routing하여 페이지 이동

Stack 구조란?

• 데이터를 차례대로 쌓아 데이터를 관리 : FILO구조
• 데이터 삽입은 push
• 데이터 삭제는 pop로 구성
• 참고) 들어온 순서대로 나가는 FIFO Queue 구조 있음

BuildContext란?

• Flutter의 모든 Widget은 build 라는 메소드를 가지고 있음
• 안드로이드의 Context가 있듯이 Flutter에 BuildContext가 존재
• SnackBar를 보여주거나 화면이동 등 buildContext를 사용하여 호출
• Flutter는 위젯으로 시작해서 위젯으로 끝난다
• Flutter UI의 가장 작은 단위는 위젯이다
• BuildContext는 현재 빌드에 대한 정보를 저장하는 객체(위젯의 모양, 환경, 동작 등

route란?

• 기본적인 프로그래밍 관점의 의미
  • 디바이스와 네트워크를 다른 네트워크를 연결하는 네트워킹 디바이스 경로 결정, 데이터 전달 등을 담당

• Routing이란?
  • 네트워크에서 경로, 링크를 선택하는 프로세스 => 결국 flutter의 route도 유사     어느 화면으로 이동할지 경로 결정하고 해당 페이지로 데이터 전달하는 기능

코드 구조

메소드 종류

• Flutter에서 화면 간 이동 처리를 위해 Navigator 내 메소드 종류

• push(), pushNamed(), pushAndRemoveUntil(), pop(), canPop(), pushReplacement() 등

• https://pub.dev/

fluttertoast: ^8.2.12

• fluttertoast 검색

• installing탭 들어가기

• pubspec.yaml 파일에

  dependencies:
  fluttertoast: ^8.2.12

  추가

• 저장하고 오른쪽 위에 pub get클릭

• 코드 0뜨면 설치 성공

실습(간단하게 띄워보기)

ex20

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class Ex20Lib extends StatelessWidget {
  const Ex20Lib({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: 
      Center(
        child: ElevatedButton(onPressed: (){
            Fluttertoast.showToast(
              msg: "안녕하세요!",
              toastLength: Toast.LENGTH_SHORT,
              gravity: ToastGravity.BOTTOM,
              timeInSecForIosWeb: 1,
              backgroundColor: Colors.blue,
              textColor: Colors.white,
              fontSize: 16.0
          );
        },
            child: Text("토스트 띄우기")),
      )),
    );
  }
}

• 실행화면

• 템플릿 선택해서 드래그 앤 드랍으로 화면을 구성하고 코드를 만들어 주는 사이트 https://app.flutterflow.io/

Figma to Flutter

• Figma로 구성한 화면을 실제 Flutter에 적용할 수 있게 해주는 Figma사이트 https://www.figma.com/community/plugin/1236863310201087089/figma-to-flutter

Firebase Studio

• 온라인 웹상에서 앱개발을 할 수 있는 사이트
• 전혀 설치같은게 필요없다. https://firebase.studio/

ex18_stateful

import 'package:flutter/material.dart';
// stl -> stateless 단축키
// stf -> stateful 단축키
class ExStateful extends StatefulWidget {
  const ExStateful({super.key});
  // 클래스 내부에서 변수를 사용하지 못하므로 반드시 final키워드를 사용하여 진행
  final int data1 = 5;
  @override
  State<ExStateful> createState() => _ExStatefulState();
}
class _ExStatefulState extends State<ExStateful> {
  // 일반 변수 지정이 가능! -> 해당하는 클래스는 상태를 체크하기 위한 기능을 물려받아
  // 생성되므로, 데이터 값이 언제든 바뀔 수 있다!
  bool isChecked1 = false;
  bool isChecked2 = false;
  bool isChecked3 = false;
  @override
  Widget build(BuildContext context) {
    // build 메소드는 화면을 설계하기 위해서 확정되어 있는 내용들만 사용할 수 있다!
    // 즉, 변수는 값이 바뀌므로 사용할 수 없다! => 문제점 완화! set state()
    // set state() : 상태가 바뀌거나 변수의 데이터가 바뀜을 감지할 수 있는 메소드
    // => 값이 바뀌면 바뀐 내용을 활용하여 build 메소드에게 화면 재구성을 자동적으로 요청 할 수 있다!
    return Scaffold(
      body: SafeArea(
          child: Column(
            children: [
              // value 값 : true(체크 0), flase(체크x)
              Row(
                children: [
                  Checkbox(value: false, onChanged: (vlaue){
                    // 상태가 바뀌면 어떤 작업을 할지 로직을 세울 수 있는 영역!
                    setState(() {
                      isChecked1 = vlaue!;
                    });
                  }),
                  Text('data1'),
                ],
              ),
              Row(
                children: [
                  Checkbox(value: false, onChanged: (vlaue){
                    // 상태가 바뀌면 어떤 작업을 할지 로직을 세울 수 있는 영역!
                    setState(() {
                      isChecked2 = vlaue!;
                    });
                  }),
                  Text('data2'),
                ],
              ),
              // 사용자의 편의성을 위한 위젯
              // CheckboxListTile
              CheckboxListTile(
                title: Text('data3'),
                  controlAffinity: ListTileControlAffinity.leading,
                  value: isChecked3 , onChanged: (v){
                  setState(() {
                    isChecked3 = v!;
                  });
              })
            ],
          )
      ),
    );
  }
}
//////////////////////////
class ExStateless extends StatelessWidget {
  const ExStateless({super.key});
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

ex19_radio

import 'package:flutter/material.dart';
class Ex19Radio extends StatefulWidget {
  const Ex19Radio({super.key});
  @override
  State<Ex19Radio> createState() => _Ex19RadioState();
}
enum Gender { man, woman }
class _Ex19RadioState extends State<Ex19Radio> {
  Gender g = Gender.woman; // 기준이 되는 변수
  bool isChecked = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // 객체타입
            // value는 radio의 버튼의 고유 값
            // groupValue를 바탕으로 value값과 같으며 true, 다르면 false
            RadioListTile(
              title: Text("남성"),
              value: Gender.man, groupValue: g, onChanged: (v) {
                print(v);
                setState(() {
                  g = v!;
                });
              },
            ),
            RadioListTile(
              title: Text("여성"),
              value: Gender.woman, groupValue: g, onChanged: (v) {
                print(v);
                setState(() {
                  g = v!;
                });
              },
            ),
            Switch(activeColor: Colors.red, value: isChecked, onChanged: (v){
              setState(() {
                isChecked = v;
              });
            })
          ],
        ),
      ),
    );
  }
}