[Flutter]06 Flexible

ref : 코딩 애플 [쉽게 배우는 플러터 강의]

---

저번 시간 숙제를 대강 해봤는데 수정할 점이 많다.

일단

1. appbar 에 있는 아이콘들을 검정 색으로 바꾸고 싶음

2. 지금은 별 아이콘으로 했지만 원래는 Image로 들어가야할 것이 오른쪽에 있는 텍스트와 높이가 같았으면 좋겠음

3. 텍스트들의 왼쪽정렬 오른쪽 정렬 각각 따로 적용하는 법

 

고쳐야 할 문제가 많다.

이번 강의를 들으면서 고쳐보려고 한다.

---

row 방향으로 container를 2개 만들어 볼거다

container의 width를 100 lp 막 이런식으로 줄 수도 있겠지만

가로 폭의 50% 를 차지하게 만들고 싶을 수도 있다.

그럴 땐 아래처럼 Flexible 이라는 위젯으로 감싸준다.

그러면 % 로 값을 지정할 수 있다.

 

flex 의 값에 숫자를 넣어주면 되는데 이것은 배수를 의미한다

예를 들어 3대 7로 주고 싶으면 다음과 같이 써주면 된다.

 

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(),
            body: Row(
              children: [
                Flexible(child: Container(color: Colors.blue, ), flex: 3,),
                Flexible(child: Container(color: Colors.green ), flex: 7,),
              ],
            )
        )
    );

  }
}

 

---

Expanded( ) 는 flex : 1 가진 Flexible 박스와 똑같다.

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(),
            body: Row(
              children: [
                Expanded(child: Container(color: Colors.blue, ),),
                Container(width : 100 ,color: Colors.green ),
              ],
            )
        )
    );

  }
}

---

저번 숙제! 당근마켓 만들기

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(),
            body: Container(
              height: 150,
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Image.asset('flower.jpg', width: 150,),
                  Container(
                    width: 300,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('카메라팝니다',),
                        Text('금호동 3가'),
                        Text('7000원'),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Icon(Icons.favorite),
                            Text('4'),
                          ],
                        )
                      ],
                    ),
                  )
                ],
              ),
            )
        )
    );

  }
}

Image 파일 넣고 싶으면 

Image.asset('flower.jpg', width: 150,),

 

 //row와 column 안에서 왼쪽 정렬 오른쪽 정렬하는 법은 다음과 같다.
child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('카메라팝니다',),
    Text('금호동 3가'),
    Text('7000원'),
    Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Icon(Icons.favorite),
        Text('4'),
      ],
    )
  ],
),

row 와 column 안에서 왼쪽/오른쪽 정렬을 하고 싶으면 위와같이 AxisAlignment 를 쓰면 된다.