Dart - Warp

Warp이란?

줄과 행을 사용하여 위젯을 배치할 때 우리는 때때로 공간이 부족했던 적이 있을 것이다. 이럴 때 사용하면 좋은 것이 Warp기능이다. Warp은 줄과 행을 사용하는 것 처럼 자식을 한 번에 하나씩 배치해주는 기능이다. 공간이 부족할 경우 알아서 다음 칸으로 넘아가는 기능이 있어 위젯 배치에 유용하게 사용할 수 있다.

어떻게 생성할까?

예시 코드를 참고해보자

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'IndexedStack',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('IndexedStack')),
      body: Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('AH')),
      label: const Text('hello1'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('ML')),
      label: const Text('hello2'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('HM')),
      label: const Text('hello3'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('JL')),
      label: const Text('hello4'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('JL')),
      label: const Text('hello5'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('JL')),
      label: const Text('hello6'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('JL')),
      label: const Text('hello7'),
    ),
  ],
)
    );
  }
}

실행 결과 확인
실행 화면의 크기를 이동하며 위젯간의 이동을 확인해보는 것을 추천한다.