앱 개발 입문 수강 기록 4일 차_2023-02-23

오늘부터는 마크다운으로 입력하기 귀찮아서(예쁘게 되지도 않고) 일반모드로 작성

---

강좌명

CH01_05. UI 만들어보기 (앱의 타이틀, 화면에 표시되는 텍스트 표현 등)

1. UI 만들기
   1. AppBar
      1. 앱 페이지 상단에 고정된 위젯
      2. 페이지 이동 및 페이지 저장 버튼을 추가 가능
   2. FloatingActionButton
      1. 페이지 하단에 떠있는 버튼 위젯
   3. BottomNavigationBar
      1. 다양한 페이지를 선택할 수 있는 하단 고정 위젯
   4. BottomSheet
      1. 여러 액션을 사용할 수 있는 하단 고정 위젯
   5. 실습 코드
      1. 기존 내용에서 BottomNavigationBar, BottomNavigationBarItem 추가
      2. BottomNavigationBar 정의 내용 확인

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  int _idx = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("패스트캠퍼스 테스트"),
      ),
      body: Center(

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '패스트캠퍼스 강의입니다.',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Container(child: Text("난 컨테이너 안이에요"),
            color: Colors.redAccent,),
            TextButton(
              child: Text("난 텍스트 버튼!"),
              onPressed: (){
                print("텍스트버튼 눌림!");
              },
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "홈"
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.more),
            label: "더보기탭"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.more),
              label: "더보기탭2"
          )
        ],
        onTap: (index){
          setState(() {
            _idx = index;
          });
        },
        currentIndex: _idx,
      )
    );
  }
}

BottomNavigationBar({
    super.key,
    required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation,
    this.type,
    Color? fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color? selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme,
    this.unselectedIconTheme,
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels,
    this.showUnselectedLabels,
    this.mouseCursor,
    this.enableFeedback,
    this.landscapeLayout,
    this.useLegacyColorScheme = true,
  }) : assert(items != null),
       assert(items.length >= 2),
       assert(
        items.every((BottomNavigationBarItem item) => item.label != null),
        'Every item must have a non-null label',
       ),
       assert(0 <= currentIndex && currentIndex < items.length),
       assert(elevation == null || elevation >= 0.0),
       assert(iconSize != null && iconSize >= 0.0),
       assert(
         selectedItemColor == null || fixedColor == null,
         'Either selectedItemColor or fixedColor can be specified, but not both',
       ),
       assert(selectedFontSize != null && selectedFontSize >= 0.0),
       assert(unselectedFontSize != null && unselectedFontSize >= 0.0),
       selectedItemColor = selectedItemColor ?? fixedColor;

1. UI 만들기 - Cupertino
   1. iOS 디자인 위젯
      1. CupertinoActionSheet
   2. iOS 버전 BottomSheet 위젯
      1. CupertinoSegmentedControl
   3. 옵션 선택 가능한 위젯
      1. CupertinoAlertDialog
   4. iOS 디자인 다이얼로그 위젯
      1. CupertinoSwitch
   5. iOS 디자인 스위치 위젯
2. 정리
   1. 아직 안드로이드 모바일 에러는 해결하지 못함
   2. 안드로이드 스튜디오에서 자동완성으로 뜨는 구문과 강의에서 하는 구문이 다르다.
      1. Ver. 3.x와 Ver. 1.x의 차이인가?
   3. 위젯의 위치 설정을 따로 하지 않아도 알아서 나눠주는 게 편리하네.

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지
#직장인인강 #직장인자기계발 #패캠인강후기 #패스트캠퍼스후기
#환급챌린지 #오공완 #누적다운로드120만1인개발자와함께하는앱개발입문Online
http://bit.ly/3Y34pE0

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.