[Flutter] 강의 5-6

5강 : 폭 조정 (가로회전/태블릿 등에서 참고)

• Flexible
• Expanded

        body: Row(
          children: [
            //방법1
            Expanded(child: Container(color: Colors.blue)), // 남은 공간을 blue로 다 채움
            Container(width: 100, color: Colors.grey)
            //넓이 꽉차게 조정하기 - 탭같은 넓이에서 자연스럽게 넓이 조절
            /*방법2
            Flexible(child: Container(color:Colors.blue), flex: 5),
            Flexible(child: Container(color:Colors.green), flex: 5),
            Flexible(child: Container(color:Colors.red), flex: 5) */
          ],

          ),

6강-1 : 커스텀위젯 (⭐중요!⭐)

아래에 stless 라고 치면 자동완성됨!

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context){

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue
        ),
        body: ShopItem() // 아래에서 정의한 커스텀위젯
        ),
        
      );
  }
}

// 커스텀위젯 : 아래 함수에 정의하면 'ShopItem'만 위에 써주면 긴 코드를 쓸 필요가 없음
class  ShopItem extends StatelessWidget {
  const ShopItem({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) { //build는 있어야함
    return SizedBox(
      child: Text('안녕'),
    );
  }
}

6강-2 : 변수 (절대 바뀌지 않을 레이아웃)

import 'package:flutter/material.dart';

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

//성능의 문제가 있어서 잘 안씀
//절대 바뀌지 않을 로고같은 것 넣을 수 있음
var a = SizedBox(
  child: Text('안녕'),
);

class MyApp extends StatelessWidget{
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context){

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue
        ),
        body: a // 아래에서 정의한 커스텀위젯
        ),
        
      );
  }
}

6강-3 : ListView - 긴 목록이 필요할때

1) 스크롤바 생김
2) 스크롤 위치 감시도 가능함 - controller
3) 메모리 절약기능도 있음 (스크롤에 안나오는 부분은 메모리에서 삭제가능-성능개선)

6강-4 : 숙제 - ListView, 커스텀위젯 이용한 bottomNavigationBar 만들기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context){

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue
        ),
        body: ListView( //스크롤이 필요할 만큼 긴 내용일 경우
          children: [
              Row(
                children: [Icon(Icons.person_pin), Text('Yuna Lee')],
              ),
            Row(
              children: [Icon(Icons.person_pin), Text('Yuna Lee')],
            ),
            Row(
              children: [Icon(Icons.person_pin), Text('Yuna Lee')],
            ),
            Row(
              children: [Icon(Icons.person_pin), Text('Yuna Lee')],
            )
          ],
        ),
        bottomNavigationBar: CustomBottom() //커스텀위젯
        ),
        
      );
  }
}

//커스텀위젯
class CustomBottom extends StatelessWidget {
  const CustomBottom({super.key});

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Icon(Icons.icecream_outlined),
          Icon(Icons.safety_check),
          Icon(Icons.dehaze)
        ],
      ),
    );
  }
}