flutter サンプル

# Sample

|List|TextField|Layout|
|---|----|---|
|<img width="559" alt="スクリーンショット 2020-05-23 21.13.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45822/339e392a-b07d-173f-8acf-9625b4bc776f.png">|<img width="559" alt="スクリーンショット 2020-05-24 14.55.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45822/54d1ca00-33ac-6eb6-82d8-8f3697da6a4b.png">|<img width="559" alt="スクリーンショット 2020-06-01 22.06.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45822/eb9da225-6f03-6edc-b902-9a9dfc5c4647.png">|


# List

<img width="559" alt="スクリーンショット 2020-05-23 21.13.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45822/339e392a-b07d-173f-8acf-9625b4bc776f.png">

```dart:main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      home: Scaffold(
        appBar: AppBar(title: Text('ListViews')),
        body: BodyLayout(),
      ),
    );
  }
}

class BodyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _myListView(context);
  }
}

// replace this function with the code in the examples
Widget _myListView(BuildContext context) {
    // backing data
  final europeanCountries = ['Albania', 'Andorra', 'Armenia', 'Austria',
    'Azerbaijan', 'Belarus', 'Belgium', 'Bosnia and Herzegovina', 'Bulgaria',
    'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland',
    'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland',
    'Italy', 'Kazakhstan', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania',
    'Luxembourg', 'Macedonia', 'Malta', 'Moldova', 'Monaco', 'Montenegro',
    'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia',
    'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden',
    'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City'];
  return ListView.separated(
    itemCount: europeanCountries.length,
    itemBuilder: (context, index) {
      return ListTile(
        leading: Icon(Icons.wb_sunny),
        title: Text(europeanCountries[index]),
        trailing: Icon(Icons.keyboard_arrow_right),
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },

  );
}

```

# Text field

<img width="559" alt="スクリーンショット 2020-05-24 14.55.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45822/54d1ca00-33ac-6eb6-82d8-8f3697da6a4b.png">

```dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  final myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            controller: myController,
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text(myController.text)));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}
```

# Layout

<img width="559" alt="スクリーンショット 2020-06-01 22.06.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45822/eb9da225-6f03-6edc-b902-9a9dfc5c4647.png">


```dart:layout
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',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePage createState() => _MyHomePage();
}

class _MyHomePage extends State {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
        backgroundColor: Color(0xff9b5de5),
      ),
      body: Row(children: [
        Expanded(
          child: Column(children: [
            Expanded(
              child: Container(decoration: const BoxDecoration(color: Color(0xfff15bb5)),),
              flex: 1,
            ),
            Expanded(
              child: Container(decoration: const BoxDecoration(color: Color(0xff00f5d4)),),
              flex: 2,
            )
          ],),
          flex: 3,
        ),
        Expanded(
          child: Container(
            decoration: const BoxDecoration(color: Color(0xfffee440)),
          ),
          flex: 2,
        ),
      ],)
    );
  }
}

```