Flutter Example - Container Widget

import 'package:flutter/material.dart';

ContainerWidgetState pageState;

class ContainerWidget extends StatefulWidget {
  @override
  ContainerWidgetState createState() {
    pageState = ContainerWidgetState();
    return pageState;
  }
}

class ContainerWidgetState extends State<ContainerWidget> {
  double _height = 100;
  double _width = 100;
  double _padding = 1;
  double _margin = 1;
  double _border = 1;
  Color _bgColor = Colors.red;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Container Widget Demo")),
      body: ListView(
        children: <Widget>[
          Container(
            height: 300,
            child: Center(
              // This is the Container
              child: Container(
                height: _height,
                width: _width,
                padding: EdgeInsets.all(_padding),
                margin: EdgeInsets.all(_margin),
                decoration: BoxDecoration(
                    color: _bgColor, border: Border.all(width: _border)),
                child: Text(
                  "This is a Container",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ),
          Divider(height: 2),
          // Container's height control
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text("Hight"),
              Slider(
                value: _height,
                min: 50,
                max: 300,
                onChanged: (newValue) {
                  setState(() {
                    _height = newValue;
                  });
                },
              ),
              Text(_height.toInt().toString()),
            ],
          ), // Container's width control
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text("Width"),
              Slider(
                value: _width,
                min: 50,
                max: 300,
                onChanged: (newValue) {
                  setState(() {
                    _width = newValue;
                  });
                },
              ),
              Text(_width.toInt().toString()),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text("Padding"),
              Slider(
                value: _padding,
                min: 0,
                max: 100,
                onChanged: (newValue) {
                  setState(() {
                    _padding = newValue;
                  });
                },
              ),
              Text(_padding.toInt().toString()),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text("Margin"),
              Slider(
                value: _margin,
                min: 0,
                max: 50,
                onChanged: (newValue) {
                  setState(() {
                    _margin = newValue;
                  });
                },
              ),
              Text(_margin.toInt().toString()),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text("Border"),
              Slider(
                value: _border,
                min: 0,
                max: 50,
                onChanged: (newValue) {
                  setState(() {
                    _border = newValue;
                  });
                },
              ),
              Text(_border.toInt().toString()),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text("Color:"),
              RaisedButton(
                child: Text("Red"),
                onPressed: () {
                  setState(() {
                    _bgColor = Colors.red;
                  });
                },
              ),
              RaisedButton(
                child: Text("Blue"),
                onPressed: () {
                  setState(() {
                    _bgColor = Colors.blue;
                  });
                },
              ),
              RaisedButton(
                child: Text("Orange"),
                onPressed: () {
                  setState(() {
                    _bgColor = Colors.orange;
                  });
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

 

 

▶ Go to Table of Contents | 강의 목차로 이동

---

※ This example is also available in the Flutter Code Examples app. | 본 예제는 Flutter Code Examples 앱에서도 제공됩니다.

Flutter Code Examples - Google Play 앱