[Flutter 플러터] 4. Dart 컨테이너와 위젯 공부하기

컨테이너 공부하기

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Study to Container'),
          ),
          body: CustomContainer(),
      ),
    ),
  );
}


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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        padding: EdgeInsets.fromLTRB(10, 10, 10, 10,),
        decoration: BoxDecoration(
          color: Colors.red.shade100,
          border: Border.all(color: Colors.red, width: 5, style: BorderStyle.solid),
          borderRadius: BorderRadius.circular(24),
          boxShadow: [
            BoxShadow(color: Colors.grey.withOpacity(0.5), offset: Offset( 4, 4), blurRadius: 10, spreadRadius: 10),
            BoxShadow(color: Colors.pink.withOpacity(0.5), offset: Offset( -4, -4), blurRadius: 10, spreadRadius: 10)
          ],
        ),
        margin: EdgeInsets.symmetric(vertical: 50, horizontal: 50),
        child: Center(child: Text('Hello Container')),
      ),
    );
  }
}

 

 

반응형

 

 

 

Widget을 상하좌우 배치하기

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 Container(
      height: double.infinity,
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                width: 100,
                height: 80,
                color: Colors.red,
                child: Text('Container 1'),
              ),
              Container(
                width: 100,
                height: 80,
                color: Colors.green,
                child: Text('Container 2'),
              ),
              Container(
                width: 100,
                height: 80,
                color: Colors.blue,
                child: Text('Container 3'),
              ),
            ],
          ),
          Container(
            width: 300,
            height: 200,
            color: Colors.orange,
            child: Text('Container 4'),
          ),
        ],
      ),
    );
  }
}

 

 

728x90

 

 

 

위젯을 스크롤 해보기

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 SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Column(children: [
            Container(
              width: double.infinity,
              height: 100,
              color: Colors.pink,
              margin: EdgeInsets.symmetric(vertical: 10),
              child: Text('Scroll1'),
            ),
            Container(
              width: double.infinity,
              height: 100,
              color: Colors.pink,
              margin: EdgeInsets.symmetric(vertical: 10),
              child: Text('Scroll2'),
            ),
            Container(
              width: double.infinity,
              height: 100,
              color: Colors.pink,
              margin: EdgeInsets.symmetric(vertical: 10),
              child: Text('Scroll3'),
            ),
            Container(
              width: double.infinity,
              height: 100,
              color: Colors.pink,
              margin: EdgeInsets.symmetric(vertical: 10),
              child: Text('Scroll4'),
            ),
            Container(
              width: double.infinity,
              height: 100,
              color: Colors.pink,
              margin: EdgeInsets.symmetric(vertical: 10),
              child: Text('Scroll5'),
            ),
            Column(children: [
              Container(
                width: double.infinity,
                height: 100,
                color: Colors.pink,
                margin: EdgeInsets.symmetric(vertical: 10),
                child: Text('Scroll1'),
              ),
              Container(
                width: double.infinity,
                height: 100,
                color: Colors.pink,
                margin: EdgeInsets.symmetric(vertical: 10),
                child: Text('Scroll2'),
              ),
              Container(
                width: double.infinity,
                height: 100,
                color: Colors.pink,
                margin: EdgeInsets.symmetric(vertical: 10),
                child: Text('Scroll3'),
              ),
              Container(
                width: double.infinity,
                height: 100,
                color: Colors.pink,
                margin: EdgeInsets.symmetric(vertical: 10),
                child: Text('Scroll4'),
              ),
              Container(
                width: double.infinity,
                height: 100,
                color: Colors.pink,
                margin: EdgeInsets.symmetric(vertical: 10),
                child: Text('Scroll5'),
              ),
            ]),
          ]),
        ],
      ),
    );
  }
}