[Flutter] 플러터 Exercise(2)

플러터 두번째 시간..

---

[ 플러터 실습(3) ]

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('욱재 App.!...'),
          leading: Icon(Icons.star),
          actions: [Icon(Icons.shop), Icon(Icons.shop)],

        ),
        body: Row(
          children: [
            // Expanded(child: Container(color: Colors.grey)),
            // Container(width: 100, color: Colors.cyanAccent)
            Flexible(child: (Container(color: Colors.red,)),flex: 3 ),
            Flexible(child: (Container(color: Colors.green,)), flex: 7)
          ],
        )
      ),
    );
  }
}

"가로(폭) 에 관한 설정.. " 

* Flexible  >> 가로 폭 비율(3 : 7)  * Expanded >> 동일영역 타 "width를" 제외한 영역전체

 

* AndroidStudio 콘솔창 띄우는 단축 키 "[Alt] + 4"

---

[ 플러터 실습(4) ]

 

 ### LayOut 실습 ### 

Step1. 예시 디자인 준비 (명확한 참고디자인)

Step2. 예시화면에 네모 영역 분할해서 그리기...

Step3. 바깧 네모박스부터 하나하나 위젯으로 그리기

Step4. 마지막으로 레이아웃잡혔으면.. 디자인 Style.. 적용하기

 

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Container(
          height: 150,  // 전체크기를 지정
          padding: EdgeInsets.all(10),

          child: Row(
            // crossAxisAlignment: CrossAxisAlignment.start,

            children: [
              Image.asset('camera.jpg', width: 150),
              Container(
                width: 300,
                child: Column(
                  //x축 정렬
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('카메라 팝니다. ', style: TextStyle(color: Colors.blue, fontSize: 25)),
                    Text('가양동 9단지 '),
                    Text('150000원'),
                    Row(
                      // Row내부에서 좌 우 정렬 시.. mainAxisAlignment
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Icon(Icons.favorite),
                        Text('100')
                      ],
                    )
                  ],
                ),
              )
            ],
          ),
        )
      ),
    );
  }
}

"폭에 관하여 %로 적용하거나 Flexible, Expanded"를 사용해서 리 팩토링 필요. 

 

---

[ 플러터 실습(5) ]

1. 커스텀 위젯   * 재사용이 많은 UI * 큰 UI요소들.. 커스텀 위젯 생성 "stless" >>> [TAB] 키  class AAA extends StatelessWedgit {  return .. } "사용하려는 곳에서 AAA()를 호출시.. return영역 반환"  2. 변수사용 var a = SizedBox(    child: Text('안녕') ); >>> 추후에 성능상 문제가 발생 ( 변하지 않는 UI.. 만) 3. 'ListView'    -- 내용이 많을 시, 스크롤 바가 생성되도록 하는 명령          controller라는 옵션사용하여 스크롤에 관한 디테일 한 제어가 가능  return (    ...    home: Scaffold(        body: ListView(          controller : ..          children: [            Text('...')          ]         )   );

 

End..