Flutter Wrap 사용법

Flutter Wrap위젯은 이미지나 Container 같은 위젯들을 가로로 여러 장을 나열했을 때, 화면을 넘어 Overflow가 되는 경우가 있다

이때, Overflow가 되는 위젯을 아래로 배치해주는 것이 Wrap위젯이다

그럼 한번 사용해 볼까

 

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            Image.asset("assets/flutter.png", width: 200),
            SizedBox(width: 10),
            Image.asset("assets/flutter.png", width: 200),
            SizedBox(width: 10),
            Image.asset("assets/flutter.png", width: 200),
          ],
        ),
      ),
    );
  }
}

Row를 사용해서 이미지를 3장 넣어 보았더니, 화면을 넘어가서 오른쪽에 호랑이무늬가 생겼다

우리는 이제 이걸 해결해야한다

 

 

2. Wrap

이때 사용하는 것이 Wrap이다. 어디 한번 써보도록 해보자

Column부분을 Wrap으로 바꿔주기만 하면 된다.

그리고 한번 실행시켜보자

호랑이가 사라지고 아래로 이동하게 되었다

근데 이미지를 보니 두 개 정도 들어갈 수 있을 거 같은데?라고 생각이 들었다

 

그래서 코드를 조금 수정해 보았다

맨 첫 번째 이미지만 가로 사이즈를 100으로 설정해 봤다

역시, 컴퓨터는 거짓말을 하지 않아