Flutter

[코딩애플] 쉬운 플러터 5강 : Flexible과 숙제 안해오면 때림

유호야 2022. 11. 25. 23:51
반응형

지난 번 숙제가 있었는데

간단해 보이는 이 레이아웃을 만들기가 쉽지가 않다~^^

ㅈ

제일 헷갈렸던 부분은 오른쪽 appBar에서 두 부분으로 박스를 나눠서 오른쪽은 actions: []로 그리고 어떻게든 spaceEvenly의 속성을 넣으려고 했는데

그것이 안된다......... !

 

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(
          title:
          Row(
            children: [Text('금호동4가', style: TextStyle(color: Colors.black)), Icon(Icons.arrow_drop_down, color: Colors.black,), Align(alignment: Alignment.topRight,),
            Align(
              alignment: Alignment.topRight,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [Icon(Icons.search), Icon(Icons.menu),Icon(Icons.notifications)],
              ),
            ),
          ],
          ),
        ),
        body: SizedBox(
          width: 500,
          height: 650,
          child: Image.asset('camera.jpg', alignment: Alignment.topLeft,),
        ),
        bottomNavigationBar: BottomAppBar(),
      ),
    );
  }
}

 

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(
          title:
          Row(
            children: [Text('금호동4가', style: TextStyle(color: Colors.black)), Icon(Icons.arrow_drop_down, color: Colors.black,), Align(alignment: Alignment.topRight,)],
          ),
          actions: [Icon(Icons.search), Icon(Icons.menu),Icon(Icons.notifications)],
        ),
        body: SizedBox(
          child: Row(
            children: [
              Image.asset('camera.jpg', width: 400),
              Column(
                children: [
                  Text('캐논 DSRL 100 (단렌즈, 충전기 16기가SD 포함'),
                  Text('성동구 행당동 - 끌올 10분 전'),
                  Text('210,000원'),
                  Row(
                    children: [
                      Icon(Icons.favorite_border_sharp),
                      Text('4', textAlign: TextAlign.right,),
                    ],
                  )
                ],
              ),
            Align(alignment: Alignment.topLeft,),
            ],
          ),
        ),
        bottomNavigationBar: BottomAppBar(),
      ),
    );
  }
}

 

두 가지의 방법으로 고군분투해봤으나 실패 ㅋㅋㅋ
역시 프론트는 쉽지 않다 하지만 강의를 듣고 나면 디자인은 잘 다룰 수 있지 않을까 하는 희망을 갖고 공부해본다!

결국은 모르는 것 투성이기 때문에 또 구글링 실력도 내 실력이라는 것

그래도 내 결과물은 처참하긴 하다^^....

강의를 보면서 부족한 부분을 다듬어 보자

먼저 flexible 이라는 새로운 개념을 배워보자

궁금했던 개념을 알려준다 50%의 width를 넣고 싶을 때
Container()를 Flexible이라는 위젯으로 감싸주면 된다. 

flex: 안에 비율로 1:9 2:8과 같이 입력해준다.

body: Row(
  children: [
    Flexible(child: Container(color: Colors.red), flex: 5, ),
    Flexible(child: Container(color: Colors.green), flex: 5, ),
  ],
),

Row일때와 Column일 때 모두 가능하다. 

그리고 Flexible을 쓰기 귀찮다 할 때 사용할 수 있는 다른 방법이 있다. 

body: Row(
  children: [
    Expanded(child: Container(color: Colors.red),),
    Flexible(child: Container(color: Colors.green), flex: 2, ),
  ],
),

이렇게 입력하면 red 색상이 1 그리고 green 색상이 2의 비율로 차지하게 된다. 

 

오른쪽 세 개 아이콘 spaceEvenly 하는 방법을 알고 싶다!

흑흑

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.white,
          titleTextStyle: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
          title: Row(
            children: [
              Text('금호동 4가'),
              Icon(Icons.arrow_drop_down, color: Colors.black, ),
            ],
          ), actions: [
              Icon(Icons.search, color: Colors.black,),
              Icon(Icons.menu, color: Colors.black, ),
              Icon(Icons.notifications, color: Colors.black, ),
            ],
        ),

        body: Container(
          height: 150,
          padding: EdgeInsets.all(15),
        child: Row(
          children: [
            Image.asset('camera.jpg', width: 150,),
            Flexible(child: Container(
              margin: EdgeInsets.only(left: 10, top: 5),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('캐논 DSRL S급 카메라', style: TextStyle(fontSize: 20)),
                  Text('금호동 3가 - 끌올 10분전', style: TextStyle(color: Colors.grey, fontSize: 14)),
                  Text('250,000원'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [Icon(Icons.favorite_border, ), Text('4',)],
                  )
                ],
              ),
            ), ),
          ],
        ),
        ), // 가장 바같 네모

      ),
    );
  }
}

 

 

찾았다!

actions 내에서 세 개의 아이콘이 있을 때 
중간 icon에다가 padding을 주는 방법을 사용했다. 

https://m2.material.io/components/app-bars-top/flutter#regular-top-app-bar

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

 

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.white,
          titleTextStyle: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
          title: Row(
            children: [
              Text('금호동 4가'),
              Icon(Icons.arrow_drop_down, color: Colors.black, ),
            ],
          ), actions: [
              Icon(Icons.search, color: Colors.black,),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16, ),
                child: Icon(Icons.menu, color: Colors.black, ),
              ),
              Icon(Icons.notifications, color: Colors.black, ),
            ],
        ),

        body: Container(
          height: 150,
          padding: EdgeInsets.all(15),
        child: Row(
          children: [
            Image.asset('camera.jpg', width: 150,),
            Flexible(child: Container(
              margin: EdgeInsets.only(left: 10, top: 5),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('캐논 DSRL S급 카메라', style: TextStyle(fontSize: 20)),
                  Text('금호동 3가 - 끌올 10분전', style: TextStyle(color: Colors.grey, fontSize: 14)),
                  Text('250,000원'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [Icon(Icons.favorite_border, ), Text('4',)],
                  )
                ],
              ),
            ), ),
          ],
        ),
        ), // 가장 바같 네모

      ),
    );
  }
}
반응형

'Flutter' 카테고리의 다른 글

Flutter 플러터 아이콘 찾기  (0) 2022.11.27
[코딩애플] 쉬운 플러터 6강 : 중요한 커스텀 위젯 문법  (0) 2022.11.26
[코딩애플] 쉬운 플러터 4강 : AppBar (아빠)  (0) 2022.11.25
[코딩애플] 쉬운 플러터 3강 : 박스잘그려야 앱 잘만듭니다  (0) 2022.11.24
[코딩애플] 쉬운 플러터 2강 : 가로세로 배치하는 법과 Scaffold  (0) 2022.11.24

'Flutter'의 다른글

  • 현재글[코딩애플] 쉬운 플러터 5강 : Flexible과 숙제 안해오면 때림

관련글

댓글

티스토리툴바