[Flutter] Transform.translate를 이용한 좌표이동 - 영역침범하기

 

 

Flutter에서는 자신을 감싸고 있는 위젯의 영역을 넘어 특정 위치로 이동하고자 할 때,  Transform 위젯을 사용한다. 

Transform.translate(
  offset: const Offset(X값, Y값), 
  child : 위젯
)

이렇게 했을 경우, Column을 사용할 때, 이전 Item 위젯의 영역까지 침범하여 위젯의 위치를 설정할 수 있다.

 

transform을 적용하기 전인 정상적인 Column 구조

다음은 간단한 전체소스이다. 

 

[전체소스]

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Transform.translate 예제';

    Widget BoxDecoItem(String msg) {
      return Center(
        child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
            begin: Alignment.bottomLeft,
            end: Alignment.topRight,
            colors: [
              Color.fromARGB(19, 179, 11, 11),
              Color.fromARGB(49, 179, 11, 11),
              Color.fromARGB(255, 179, 11, 11),
            ],
          )),
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(10),
              child: Row(
                children: [
                  Text(
                    msg,
                    style: TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  Spacer(),
                  Text(
                    "(BoxDecoration)",
                    style: TextStyle(
                      fontSize: 14.0,
                      color: Colors.white,
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      );
    }

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(title: Text(title)),
        body: ListView(
          children: <Widget>[
            Image.network(
                "https://cdn1.epicgames.com/columbine/offer/DETROIT_1-2560x1440-4fd6608a56880dc5d8e9d968517113c3.jpg"),
            Transform.translate(
                offset: const Offset(0.0, -130.0),
                child: Column(
                  children: [
                    BoxDecoItem('Transform.translate\nOffset(0.0, -130.0)'),
                    Image.network(
                      "https://pbs.twimg.com/profile_images/1455205013899423755/D7DqriNA_400x400.png",
                      height: 80,
                      width: 80,
                    ),
                  ],
                ))
          ],
        ),
      ),
    );
  }
}