Dart/flutter勉強中【コードメモ001】

チュートリアルで作った簡単プログラムたち

このコードが教えてくれること

• row
• column
• expanded

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Home(),
  ));
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('my first app'),
        centerTitle: true,
        backgroundColor: Colors.red[600],
      ),
      body: Row(//Columnだと縦置きになる
        mainAxisAlignment:MainAxisAlignment.start,
        crossAxisAlignment:CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            flex: 3,
            child: Image.network("https://images.freeimages.com/images/large-previews/5b7/on-the-road-7-1384791.jpg")
            ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.cyan,
              padding: EdgeInsets.all(30),
              child: Text('1'),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.pinkAccent,
              padding: EdgeInsets.all(30),
              child: Text('2'),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.amber,
              padding: EdgeInsets.all(30),
              child: Text('3'),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('click?'),
        backgroundColor: Colors.red[600],
        onPressed: () {},
      ),
    );
  }
}

このコードが教えてくれること

• StatefulWidget
• Stateの使い方

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home:NinjaCard(),
));

class NinjaCard extends StatefulWidget {
  @override
  _NinjaCardState createState() => _NinjaCardState();
}

class _NinjaCardState extends State<NinjaCard> {

  int ninjaLevel = 0;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      appBar: AppBar(
        title: Text("Ninja ID Card"),
        centerTitle: true,
        backgroundColor: Colors.grey[800],
        elevation:0.0,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          // ninjaLevel += 1;コレだけだと描画が更新されない
          setState((){
            ninjaLevel += 1;
          });
        },
        child:Icon(Icons.add),
        backgroundColor: Colors.grey[800],
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(40, 40, 40, 0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage("images/chun-li.jpg"),
                radius: 80,
              ),
            ),
            Divider(
              height:60,
              color: Colors.grey[800],
            ),
            Text(
              "NAME",
              style:TextStyle(
                color: Colors.grey,
                letterSpacing: 2.0,
              )
            ),
            SizedBox(height:20),
            Text(
              "Chun-Li",
              style:TextStyle(
                color: Colors.amberAccent[200],
                letterSpacing: 2.0,
                fontSize: 30,
                fontWeight: FontWeight.bold,
              )
            ),
            SizedBox(height:40),
            Text(
              "CURENT NINJA LEVEL",
              style:TextStyle(
                color: Colors.grey,
                letterSpacing: 2.0,
              )
            ),
            SizedBox(height:20),
            Text(
              '$ninjaLevel',
              style:TextStyle(
                color: Colors.amberAccent[200],
                letterSpacing: 2.0,
                fontSize: 30,
                fontWeight: FontWeight.bold,
              )
            ),
            SizedBox(height:40),
            Row(
              children: <Widget>[
                Icon(
                  Icons.email,
                  color:Colors.grey[400],
                ),
                SizedBox(width:20),
                Text(
                  '[e-mail]',
                  style: TextStyle(
                    color:Colors.grey[400],
                    fontSize: 20,
                    letterSpacing: 1,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}