플러터 기본 위젯 예제(MaterialWidget) - 위젯 겹치기

많은 분들에게 기본적인 도움이라도 되길 바라며, 학습 목적 외에 상업적 이용은 금합니다. 

 

출처: 패스트캠퍼스 15개 프로젝트로 실무까지 끝내는 Dart & Fultter 앱 개발, 챗 gpt

출처: https://forfire700.tistory.com/151 [IT STUDY CAFE:티스토리]

 

---

코드

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Widget 비율 조정'),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: Body(),
    ),
  ));
}
 
class Body extends StatelessWidget {
  const Body({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.center,
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(150),
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Container(
            width: 280,
            height: 280,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(150),
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Text('Count 0',
              style: TextStyle(
                color: Colors.red,
                fontSize: 32,
              )),
        ),
      ],
    );
  }
}
 

 

 

완성 이미지