컨테이너 안에 컨테이너

1. Align 통해 넣기

import 'package:flutter/material.dart';

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

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

// 홈 페이지 구성
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 화면의 주요 콘텐츠를 담는 Column
      body: Column(
        children: [
          // 외부 둥근 컨테이너
          Container(
            width: 100, // 컨테이너 너비
            height: 100, // 컨테이너 높이
            decoration: BoxDecoration(
              border: Border.all(), // 테두리 설정
              borderRadius: BorderRadius.circular(50), // 둥근 모서리 (반지름 50)
            ),
            // Align을 사용해 내부 컨테이너 배치
            child: Align(
              child: Container(
                width: 80, // 내부 컨테이너 너비
                height: 80, // 내부 컨테이너 높이
                decoration: BoxDecoration(
                  color: Colors.red, // 빨간색 배경
                  borderRadius: BorderRadius.circular(40), // 둥근 모서리 (반지름 40)
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2. stack을 통해 넣기

• 제일 밑에 출력할 부분을 스택의 가장 위 삽입

• Position 위젯을 통해 위치를 컨트롤

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(), // 메인 화면
    );
  }
}

// 메인 화면 정의
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 첫 번째 Stack 예제: 두 개의 둥근 컨테이너 배치
          Stack(
            children: [
              // 첫 번째 외부 컨테이너
              Container(
                width: 100, // 너비 100
                height: 100, // 높이 100
                decoration: BoxDecoration(
                  border: Border.all(), // 테두리 설정
                  borderRadius: BorderRadius.circular(50), // 둥근 모서리 설정 (원형)
                ),
              ),
              // 두 번째 내부 컨테이너 (Positioned로 위치 지정)
              Positioned(
                left: 10, // 왼쪽에서 10만큼 떨어짐
                top: 10, // 위쪽에서 10만큼 떨어짐
                child: Container(
                  width: 80, // 너비 80
                  height: 80, // 높이 80
                  decoration: BoxDecoration(
                    border: Border.all(), // 테두리 설정
                    borderRadius: BorderRadius.circular(40), // 둥근 모서리 설정 (원형)
                  ),
                ),
              ),
            ],
          ),
          Divider(), // 구분선 추가
          // 두 번째 Stack 예제: 사용자 입력 필드와 아이콘 배치
          Stack(
            children: [
              // 텍스트 입력 필드
              TextFormField(
                decoration: InputDecoration(
                  hintText: "Username", // 힌트 텍스트
                  contentPadding: EdgeInsets.only(
                    top: 100, // 상단 여백 100
                    left: 20, // 왼쪽 여백 20
                  ),
                  suffixIcon: Icon(Icons.do_not_disturb_on_total_silence), // 입력 필드 우측 아이콘
                  focusedBorder: OutlineInputBorder(), // 포커스 시 테두리 스타일
                  enabledBorder: OutlineInputBorder(), // 활성화 시 테두리 스타일
                ),
              ),
              // 입력 필드 위에 아이콘 배치
              Positioned(
                left: 15, // 왼쪽에서 15만큼 떨어짐
                top: 20, // 위쪽에서 20만큼 떨어짐
                child: Icon(Icons.person), // 사람 모양 아이콘
              ),
            ],
          ),
        ],
      ),
    );
  }
}