! 第二章は核心技能を学ぶことである.前章では、Fluiterについて簡単に理解し、部品のライフサイクルについても理解しました.今回は、スカボルドを活用したビジネスデザインを整理します.

1.ソリッド設計の適用

これはグーグルが2014年から使用している平面設計ガイドです.インクカートリッジ設計を採用し、平面、単色を主とする簡潔な設計をベースに、アプリケーションの容量を減らし、速度を向上させることができます.

スカフォード類

ロールでは、さまざまな部品をソリッド設計レイアウトに設計できます.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override

  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Material Flutter App',
      theme: ThemeData(
        primarySwatch:  Colors.blue,
      ),
      home: MaterialFlutterApp(),
    );
  }
}

class MaterialFlutterApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MaterialFlutterApp();
  }
}

class _MaterialFlutterApp extends State<MaterialFlutterApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
     
    );
  }
}

StatefulWidgetクラスを継承するMaterialFlutterAppクラスが作成されました.
このとき、Stateクラスを使用してState fullコンポーネントを画面に出力します.
そこでStateクラスを継承するMaterialFlutterAppクラスを作成した.
次にbuild()関数にscaffold()関数を作成して、コンポーネントのスケルトンを呼び出します.

上の図のように、空の画面を作りました.
次にScaffold()ボーン内

appBar: AppBar(title: Text('Material Design App'),),
      floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
      onPressed: (){

入れました
Floatingボタンを置いて本当に嬉しいのは以下の通りです!

複数の

パーツを入れます!

次に、複数の部品を含むコードを書きます.
複数のコンポーネントを作成する場合は、RowとColumnコンポーネントを使用します.ここで、Rowは部品を横方向に配置し、Columnは部品を縦方向に配置する.
このとき,RowとColumnオプションではchildではないchildrenを用いて配列する.

Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Material Design App'),),
      floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
      onPressed: (){
      }),
      body: Container(
        child: Center(
        child: Column(
          children: <Widget>[ Icon(Icons.android), Text('android') ],
          mainAxisAlignment: MainAxisAlignment.center,
        ),
      ),
      ),
    );

Scaffold()でbodyを宣言し、ContainerのchildとしてColumnを指定します.
次に、Columnでchildrenを使用して基本スケルトンを作成し、部品リストを並べてリストします.
次に中心をchildとして指定し、MainAxisAlgnment:MainAxisAlgnmentを行います.センターという縦置きコードで真ん中に移動しました.

ここまでは、ビジネスデザインの基本骨格を作るScaffold()!