[Flutter 플러터] 5. 위젯 배치해보기

컨테이너 안에 스크롤뷰 배치해보기

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          title: Text('컨테이너 안에 스크롤뷰 배치해보기'),
        ),
        body: Body(),
      ),
    ),
  );
}

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(height: 200, width:double.infinity, color: Colors.grey, margin: const EdgeInsets.symmetric(vertical: 10),),
        Container(height: 300, width:double.infinity, color: Colors.grey, margin: const EdgeInsets.symmetric(vertical: 10),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(height: 100, width: 200, color: Colors.red, margin: const EdgeInsets.symmetric(vertical: 6),),
              Container(height: 100, width: 200, color: Colors.red, margin: const EdgeInsets.symmetric(vertical: 6),),
              Container(height: 100, width: 200, color: Colors.red, margin: const EdgeInsets.symmetric(vertical: 6),),
              Container(height: 100, width: 200, color: Colors.red, margin: const EdgeInsets.symmetric(vertical: 6),),
              Container(height: 100, width: 200, color: Colors.red, margin: const EdgeInsets.symmetric(vertical: 6),),
            ],
          ),
        ),),
        Container(height: 200, width:double.infinity, color: Colors.grey, margin: const EdgeInsets.symmetric(vertical: 10),),
      ],
    );
  }
}

 

 

 

 

 

 

위젯을 비율로 배치해보기

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          title: Text('위젯을 비율로 배치해보기'),
        ),
        body: Body(),
      ),
    ),
  );
}

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Flexible(flex: 1, child: Container(color: Colors.red,)),
        Flexible(flex: 2, child: Container(color: Colors.green,)),
        Flexible(flex: 3, child: Container(color: Colors.yellow,)),
        Flexible(flex: 4, child: Container(color: Colors.pink,)),
      ],
    );
  }
}

반응형

 

 

 

 

위젯을 겹겹이 쌓아 배치해보기

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          title: Text('위젯을 겹겹히 쌓아 배치해보기'),
        ),
        body: Body()
      ),
    ),
  );
}

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(width: 500, height: 500, color: Colors.black,),
        Container(width: 400, height: 400, color: Colors.red,),
        Container(width: 300, height: 300, color: Colors.blue,),
        Positioned(bottom: 50, right: 50,
          child: Container(width: 200, height: 200, color: Colors.green,),),
        Align(alignment: Alignment.topRight,
          child: Container(width: 100, height: 100, color: Colors.yellow,),),
      ],
    );
  }
}

 

 

728x90

 

 

---

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          title: Text('위젯을 겹겹히 쌓아 배치해보기'),
        ),
        body: Bedge()
      ),
    ),
  );
}



class Bedge extends StatelessWidget {
  const Bedge({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.center,
          child: Container(width: 300, height: 300, decoration: BoxDecoration(color: Colors.pink, 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.pink, fontSize: 32),
          ),
        )
      ],
    );
  }
}