[Flutter] 잡다한 노트

https://d2.naver.com/helloworld/3384599

iOS/Android 협업을 위해 3가지 정도의 방법이 있다.

1. Naming Convention 맞추기

2. 스터디 / 세미나 같이 하기

3. 라이브러리 개발

 

개발 과제에 특화된 스팩이 있다.

 

React Native, Webview를 비교하였을 때,

Flutter는 Bridge를 거치지 않고, 바로 Canvans에 UI를 렌더링하기 때문에 기대 이상의 성능을 보여준다.

https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

What’s Revolutionary about Flutter | HackerNoon

 

1.

Flutter 설치 후, 'flutter doctor' 를 통해, 제대로 진행되지 않는 과정을 알 수 있음.

 

Once you have installed any missing dependencies, you can run the flutter doctor command again to verify that you've set everything up correctly.

 

Android Studio Setup Wizard.

 

 

2.

https://docs.flutter.dev/get-started/codelab

 

[Learn]

1) Basic Structure of Flutter app

2) Finding and using package

3) Hot reload for a quicker development cycle

4) Stateful widget

5) infinite, lazily loaded list

 

Downloading http://dl.google.com/android/repository/sys-img/google_apis_playstore/x86-30_r09-windows.zip

 

3. Android Emulator

Emulator 설치가 안되는 경우가 있었음

[해결책]

1) ANDROID_AVD_PATH 환경 변수 추가

2) SDK Tools 새로 설치

 

 

[code]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
	const MyApp({super.key});
    
    @override
    Widget build(BuildContext context) {
    	return MaterialApp(
        	title: 'Welcome to Flutter',
            home: Scaffold(
            	appBar: AppBar(
                	title: const Text('Welcome to Flutter')
                ),
                body: const Center(
                	child: Text('Hello World'),
                ),
            ),
        );
    }
}

Q0) What is Material App

- Material is mobile과 web에서 표준인 visual design language이다.

- Flutter 는 많은 Material Widget을 제공한다.

- pubspec.yaml 파일에서, uses-material-design 부분이 true면 좋다.

 

Q1) What is StatelessWidget

- app 그 자체를 widget으로 만드는 역할

(alignment, padding, layout 모두가 widget임)

Stateless widget은 immutable이고, property가 바뀔 수 없음을 의미함.

Stateful widget은 widget의 lifetime 동안 change 될 수 있는 state를 의미함. 

 

 

 

 

Q2) What is super.key

 

Q3) What is BuildContext in "Widget build(BuildContext context){"

- widget의 main job 중 하나는, build() method를 제공하는 것임

(A widget's main job is to provide a build() method that holds the widget tree for the home screen.

 

Q4) What is Scaffold

- Material Library에 Scaffold widget이 있는데, 일반적인 app bar와 body property가 있음.

 

 

<External Package 사용하는 법>

[기본 지식]

'pubspec.yaml' 파일은 flutter 앱에서 dependency와 assets을 관리함.

'pubspec.lock' 파일은 project에 가져온 패키지의 버전을 알려줌.

UpperCamelCase

boilerplate 코드 : 코드에 공통적으로 많이 들어가는 코드

 

Dependencies specify other packages that your package needs in order to work.

flutter pub get을 하면, package를 프로젝트에 가져올 수 있음

 

<Stateful Widget을 만드는 방법>

stful을 입력시 boilerPlate 코드가 등장함.

 

- Stateful Widget을 구현하는 것은 2가지 클래스를 필요로 함.

1) A statefulWidget class that creates an instance of State class.

- The StatefulWidget class is, itself, immutable and can be thrown away and regenerated, but the State class persists over the lifetime of the widget.

 

[컨벤션]

state 클래스의 이름은 '_' 로 시작하는게 일반적

[ctrl] + [\] : hot reload

 

 

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

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

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

  @override
  Widget build(BuildContext) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: RandomWords(),
        ),
      ),
    );
  }
}


class RandomWords extends StatefulWidget {
  const RandomWords({Key? key}) : super(key: key);

  @override
  State<RandomWords> createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

 

<Create Infinite Scroll>