Flutter - 코로나 어플 만들기 [2]

1. Material App 디자인 하기

 

Theme에 기본 색들을 지정한다.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '코로나 현황',
      theme: ThemeData(
          primaryColor: const Color(0xFF264653),
          primaryColorDark: const Color(0xFF2A9D8F),
          primaryColorLight: const Color(0xFFE9C46A),
          accentColor: const Color(0xFFF4A261),
          backgroundColor: const Color(0xFFE76F51)),
      home: MainPage(),
    );
  }
}

 

Mainpage를 StatefulWidget으로 만든다. (오늘 코로나 정보 Panel에 바로 업데이트하려면 StatefulWidget을 사용해야한다.)

class MainPage extends StatefulWidget {
  MainPageState createState() => MainPageState();
}

class MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    	...
    )
    ...
}

 

Panel만들기 (Panel에 제목, 값, 텍스트 스타일을 적용할 수 있는 Panel을 만든다.)

class _CovidItemPanel extends StatefulWidget {
  _CovidItemPanel({Key key, this.title, this.value, this.textStyle}): super(key: key);

  String title;
  String value;
  TextStyle textStyle;

  @override
  _CovidItemPanelState createState() => _CovidItemPanelState();
}

class _CovidItemPanelState extends State<_CovidItemPanel> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(4),
      padding: EdgeInsets.all(16),
      height: 110,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.7, 0.9],
              colors: [
                Theme.of(context).primaryColor,
                Theme.of(context).primaryColor.withAlpha(180),
              ],
              tileMode: TileMode.repeated),
          boxShadow: [
            BoxShadow(
                color: Theme.of(context).backgroundColor,
                offset: const Offset(1, 1),
                blurRadius: 1,
                spreadRadius: 0.5),
          ]),
      child: Column(
        children: [
          Container(
            alignment: Alignment.topLeft,
            padding: EdgeInsets.only(bottom: 8),
            child: Text(
              widget.title,
              style: TextStyle(
                color: Theme.of(context).accentColor,
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          ),
          Text(
            widget.value,
            style: widget.textStyle,
          )
        ],
      ),
    );
  }
}

 

메인 페이지에 AppBar를 추가한다.

class MainPageState extends State<MainPage> {
  XmlDocument CovidStatusXML;
  CovidItem covidItem = new CovidItem();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("코로나 현황"),
        centerTitle: true,
        actions: [
          IconButton(
            icon: Icon(Icons.sync),
          	...
          ),
        ],
      )
    );
  }
}

 

메인페이지에 Body를 추가한다.

body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomRight,
              stops: [
                0.8,
                0.99,
              ],
              colors: [
                Theme.of(context).primaryColorLight,
                Theme.of(context).backgroundColor,
              ]),
        )
      )

 

width: double.infinity: 화면의 가로를 최대로 사용한다. (android에서는 match_parent)

height: double.infinity: 화면의 세로를 최대로 사용한다. (android에서는 match_parent)

Theme.of(context): 위 MaterialApp에서 지정한 Theme을 사용할 수있다.

decoration: BoxDecoration을 사용해 배경색을 gradient로 넣을 수 있다.

 

child: Container(
          margin: EdgeInsets.all(8),
            child: ListView(
              children: [
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Expanded(
                          child: _CovidItemPanel(
                            title: "확진자",
                            value: "" ?? "0",
                            textStyle: TextStyle(
                              fontSize: 36,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                        Expanded(
                          child: _CovidItemPanel(
                            title: "격리해제",
                            value: "" ?? "0",
                            textStyle: TextStyle(
                              fontSize: 36,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                      ],
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Expanded(
                          child: _CovidItemPanel(
                            title: "검사진행",
                            value: "" ?? "0",
                            textStyle: TextStyle(
                              fontSize: 36,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                        Expanded(
                          child: _CovidItemPanel(
                            title: "사망자",
                            value: "" ?? "0",
                            textStyle: TextStyle(
                              fontSize: 36,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                      ],
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Expanded(
                          child: _CovidItemPanel(
                            title: "치료중인 환자",
                            value: "" ?? "0",
                            textStyle: TextStyle(
                              fontSize: 36,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                        Expanded(
                          child: _CovidItemPanel(
                            title: "결과 음성",
                            value: "" ?? "0",
                            textStyle: TextStyle(
                              fontSize: 32,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                      ],
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Expanded(
                          child: _CovidItemPanel(
                            title: "누적검사",
                            value: "" ?? "0",
                            textStyle: TextStyle(
                              fontSize: 32,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                        Expanded(
                          child: _CovidItemPanel(
                            title: "누적 검사 완료",
                            value: "" ?? "0",
                            textStyle: TextStyle(
                              fontSize: 32,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                      ],
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Expanded(
                          child: _CovidItemPanel(
                            title: "누적 환진률",
                            value: ((double.parse("" ?? "0")*100).round()/100).toString(),
                            textStyle: TextStyle(
                              fontSize: 36,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                        Expanded(
                          child: _CovidItemPanel(
                            title: "등록일",
                            value: "" ?? "yyyy.mm.dd",
                            textStyle: TextStyle(
                              fontSize: 18,
                              color: Theme.of(context).accentColor,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                )
              ],
            ),
        ),

위에서 만들었던 _CovidItemPanel을 Row와 Column을 사용해 배치해준다.

 

Expaneded: Panel의 크기를 일정하게 만들 수 있다.

??: 만약 값이 null이면 뒤에 값으로 대체한다.