속성 정의가 길어질 때 Widget 분리

1. 함수형

 

MyHomePage의 Widget 부분 중 body가 너무 길어 내부에 Widget으로 분리하였다. 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TEST", style: TextStyle(color: Colors.black)),
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return Scaffold(
        body: Center(
      child: Column(
        children: <Widget>[
          Text("yeah", style: TextStyle(fontSize: 30.0)),
          Text("yeah", style: TextStyle(fontSize: 30.0)),
          Text("yeah", style: TextStyle(fontSize: 30.0)),
        ],
      ),
    ));
  }
}

 

2. 클래스형 (Extract Widget)

 

import 'package:flutter/material.dart';

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('BMI CALCULATOR'),
        ),
        body: Theme(
          data: ThemeData(primaryColor: Colors.red, accentColor: Colors.red),
          child: Column(children: <Widget>[
            Expanded(
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: ResuableCard(),
                  ),
                  Expanded(
                    child: ResuableCard()
            ... 중략
  }
}

class ResuableCard extends StatelessWidget {
  const ResuableCard({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        color: Colors.red,
        // color: Color(0xff1d1e33),
      ),
    );
  }
}