Flutter 5회차 - Image Asset 폴더에 담기, Widget: Chip, Wrap, Button

// ignore_for_file: avoid_unnecessary_containers, sort_child_properties_last, prefer_const_literals_to_create_immutables, prefer_const_constructors

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.red,
                width: 100,
                height: 100,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('안녕'),
                    Text('반가워'),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      Icon(Icons.ac_unit),
                      Icon(Icons.call),
                    ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      Icon(Icons.ac_unit),
                      Icon(Icons.call),
                    ],)
                  ],) 
              ),
              Container(
                color: Colors.orange,
                width: 100,
                height: 100,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('안녕'),
                    Text('반가워'),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      Icon(Icons.ac_unit),
                      Icon(Icons.call),
                    ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      Icon(Icons.ac_unit),
                      Icon(Icons.call),
                    ],)
                  ],) 
              ),
            ],
          ),
        ),
          ),
    );
  }
}

 

// ignore_for_file: avoid_unnecessary_containers, sort_child_properties_last, prefer_const_literals_to_create_immutables, prefer_const_constructors

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration
                (
                    color: Colors.red,
                    shape: BoxShape.circle,
                  ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('안녕'),
                    Text('반가워'),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      Icon(Icons.ac_unit),
                      Icon(Icons.call),
                    ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      Icon(Icons.ac_unit),
                      Icon(Icons.call),
                    ],)
                  ],) 
              ),
              Container(
                width: 8,
              ),
              Container(
                
                width: 100,
                height: 100,
                decoration: BoxDecoration
                (
                    color: Colors.orange,
                    shape: BoxShape.circle,
                  ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('안녕'),
                    Text('반가워'),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      Icon(Icons.ac_unit),
                      Icon(Icons.call),
                    ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      Icon(Icons.ac_unit),
                      Icon(Icons.call),
                    ],)
                  ],) 
              ),
            ],
          ),
        ),
          ),
    );
  }
}

 

 

넘치기 때문에 ListView로 스크롤을 만들어줬는데, scrollDirection 속성을 바꿔주면 이렇게 된다.

하지만 이 방법 말고도 다음 줄로 넘어가게 하는 wrap widget을 쓰는 방법이 있다. Row Widget 같은 경우 화면 밖을 넘어가면 ListView로 해주어야하기 때문에..

스페이싱 속성

가운데 정렬

실습결과

// ignore_for_file: avoid_unnecessary_containers, sort_child_properties_last, prefer_const_literals_to_create_immutables, prefer_const_constructors

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("최근 검색어", style: TextStyle(fontWeight: FontWeight.w900, fontSize: 15),),
              Container(
                padding: EdgeInsets.all(8),
                height: 52,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    SizedBox(height: 8,),
                    Chip(
                      label: Text("부리타 정수기"), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                    SizedBox(width: 4,),
                    Chip(label: Text("브리타 정수기"), side: BorderSide(color: Colors.black12), backgroundColor: Colors.white),
                    SizedBox(width: 4,),
                    Chip(label: Text("부리타정수기 필터 한국형"), side: BorderSide(color: Colors.black12), backgroundColor: Colors.white),
                    SizedBox(width: 4,),
                    Chip(label: Text("부리타 정수기"), side: BorderSide(color: Colors.black12), backgroundColor: Colors.white),
                    SizedBox(width: 4,),
                    Chip(label: Text("부리타 정수기"), side: BorderSide(color: Colors.black12), backgroundColor: Colors.white),
                  ]),
              ),

              Text("🚀 당일배송·새벽배송되는 로켓프레시 상품", style: TextStyle(fontWeight: FontWeight.w900, fontSize: 15)),
              
              Container(
                padding: EdgeInsets.all(8),
                height: 52,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    SizedBox(height: 8,),
                    Chip(
                      label: Text("부리타 정수기"), 
                      labelStyle: TextStyle(color: Colors.green),
                      backgroundColor: Colors.green.withOpacity(0.1)
                    ),
                    SizedBox(width: 4,),
                    Chip(label: Text("부리타 정수기"), labelStyle: TextStyle(color: Colors.green),
                      backgroundColor: Colors.green.withOpacity(0.1)),
                    SizedBox(width: 4,),
                    Chip(label: Text("부리타 정수기"), labelStyle: TextStyle(color: Colors.green),
                      backgroundColor: Colors.green.withOpacity(0.1)),
                    SizedBox(width: 4,),
                    Chip(label: Text("부리타 정수기"), labelStyle: TextStyle(color: Colors.green),
                      backgroundColor: Colors.green.withOpacity(0.1)),
                    SizedBox(width: 4,),
                    Chip(label: Text("부리타 정수기"), labelStyle: TextStyle(color: Colors.green),
                      backgroundColor: Colors.green.withOpacity(0.1)),
                  ]),
              ),
              SizedBox(height: 16,),
              Text("쿠팡 추천 검색어", style: TextStyle(fontWeight: FontWeight.w900, fontSize: 15)),
              SizedBox(height: 8,),
              Wrap(
                spacing: 8,
                runSpacing: 10,
                children: [
                  Chip(label: Text("브리타 정수기"), side: BorderSide(color: Colors.black12), backgroundColor: Colors.white),

                  Chip(
                    
                      label: Text("부리타 정수기 필터"), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                  Chip(
                      label: Text("브리타 정수기"), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                  Chip(
                      label: Text("부리타 정수기 3.5 "), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                  Chip(
                      label: Text("브리타 정수기필터"), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                  Chip(
                      label: Text("정수기"), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                  Chip(
                      label: Text("브리타 필터"), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                  Chip(
                      label: Text("부리타 정수기"), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                  Chip(
                      label: Text("부리타정수기 필터 한국형세트"), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                  Chip(
                      label: Text("독일 부리타정수기 필터 6"), 
                      side: BorderSide(color: Colors.black12), 
                      backgroundColor: Colors.white
                    ),
                ],
              )
            ],
            
            ),
        ),
      ),
    );
  }
}