Flutter 이미지 위에 문자 표시하기 (Stack & Positioned 사용하기)

css에서는 position: absolute를 사용해서 이미지 위에 덮어씌우는 느낌 (겹치기)으로 이미지의 위에 문자를 표시하거나 할 수 있다. 그런 기능을 Flutter에서는 Positioned라는 것을 사용하면 된다

위젯 위에 위젯을 올라와 있고 그 위치를 마음대로 조정하는 게 가능하다는 말이다

이제 시작해 보도록 할까

 

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/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final _formatKey = GlobalKey<FormState>();

    return Scaffold(
      body: Stack(),
    );
  }
}

 

 

2. Stack

stack이란 두개의 요소가 겹치게 할 수 있도록, 사용하는 위젯이다.

프로그래밍 언어를 배우다보면 stack이라는 말을 자주 들을 수가 있는데, 하나씩 쌓이는 느낌으로 이해하면 될 것 같다

그럼 먼저 이미지로 베이스를 먼저 깔아보자

practice_page.dart

 

children: [
  Image.asset(
    "assets/flutter.png",
    fit: BoxFit.cover,
    width: double.infinity,
  ),
],

위의 코드를 넣어주었다. Stack위젯 > children안에 이미지를 넣고 가로넓이를 화면에 맞춰주는 코드이다

이대로 실행시켜보면 아래와 같다

 

 

3. Positioned

이제 겹쳐지게 할 수 있도록 하는 positioned를 사용해 보겠다

practice_page.dart

Positioned(
  top: 40,
  left: 70,
  child: Container(
    child: Text(
      "Positioned",
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
        fontSize: 30,
      ),
    ),
  ),
),

Positioned를 사용하면 옵션이 있는데, 그중 top, left를 알아보겠다

Positioned를 사용하면 위젯이 이미지에 겹쳐지게 되는데, 그 이미지의 제일 왼쪽 위 모서리를 기준으로 둔다

그 상태에서 top을 사용했을 때 어떠한 수치를 주면 위에서부터 그 수치만큼 아래로 내려간다

left도 왼쪽기준으로 수치를 준만큼 오른쪽으로 이동한다

right, bottom도 있지만 이건 직접 해보시길...

위의 코드를 한번 실행해 보자

이렇게 손쉽게 이미지와 겹치게 할 수 있다.

나중에 배너나, 뭐든 겹치게 하고 싶을 때 Stack과 Positioned를 사용하면 될 것 같다