DBA BIBLE

먼저 공홈 주소로 들어가서 처음부터 공부를 시작해 보도록 하겠다.

https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ko#2

F1버튼으로 Flutter:New Project선택

F1버튼을 누르면 자동으로 검색을 열어준다.

여기서 flutter 를 치면

아래와 같이 Flutter: New Project가 나오는데

이걸 선택한다.

Application 선택

Project의 파일이 저장될 경로를 지정한다.

그리고 프로젝트의 이름을 입력하고 Enter.

폴더의 콘텐츠를 신뢰하느냐를 물어본다. yes를 선택. (no선택시 flutter기능 상당부분을 사용할수 없음)

초기 앱 시작을 위해 아래 파일을 연다.

pubspec.yaml의 내용을 아래 코드로 바꿔준다.

name: namer_app
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 0.0.1+1

environment:
  sdk: '>=2.19.4 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

  english_words: ^4.0.0
  provider: ^6.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

#pubspec.yaml 파일은 앱에 관한 기본 정보(예: 현재 버전, 종속 항목, 함께 제공될 애셋)를 지정함.

#앱 이름을 namer_app이 아닌 다른 이름으로 지정했다면 이에 따라 첫 번째 줄을 변경해야 합니다.

위 코드의 최상단에 작성된 name: namer_app를 

위 스샷처럼 앱 이름으로 변경한다.

나는 FLUTTER_APPLICATION_1이니 이것으로 변경하겠다.

대소문자를 구문하는지 모르겠어서 똑같이 대문자로 했다.

또 다른 구성 파일 analysis_options.yaml을 열어서 수정한다.

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    prefer_const_constructors: false
    prefer_final_fields: false
    use_key_in_widget_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_const_constructors_in_immutables: false
    avoid_print: false
    
    
    
이 파일은 코드를 분석할 때 Flutter의 엄격성 정도를 결정합니다. 
이번이 Flutter를 처음 사용하는 것이므로 분석 도구에 쉬엄쉬엄하자고 지시하는 것입니다. 
이는 나중에 언제든지 조정할 수 있습니다. 
사실 실제 프로덕션 앱을 게시할 때가 가까워지면 분명 이보다는 더 엄격하게 분석 도구를 만들게 됩니다

lib/ 디렉터리 아래의 main.dart 파일을 열어서 수정한다.

아래 코드로 변경

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
        ],
      ),
    );
  }
}

이렇게 어플을 만들기위한 초기 셋팅이 완료되었다.

이렇게 스크린샷을 찍고 설명을 공홈에 있는것 그대로 가져다 쓰는건

영~ 시간낭비도 심하고 공부하는데 방해가 되므로

공부하실분은 공홈에 들어가서 하시고..

다음부터는 간략하게 필요한것만 정리해서 올려야겠다..