flutter-ID Card -statefulwidget

Statefulwidget 用setState((){ })方法變更元件。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false ,
    home: snoopyCard(),
  ));
}

class snoopyCard extends StatefulWidget {
  @override
  _snoopyCardState createState() => _snoopyCardState();
}

class _snoopyCardState extends State<snoopyCard> {

  int level = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      appBar: AppBar(
        title: Text('Snoopy ID Card',
          style: TextStyle(
            color: Colors.grey[400],
            fontSize: 20,
          ),),
        centerTitle: true,
        backgroundColor: Colors.grey[850],
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30, 40, 30, 0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/snoopy.jpg'),
                radius: 40,
              ),
            ),
            Divider(
              height: 90,
              color: Colors.grey[700],
            ),
            Text(
              'NAME',
              style: TextStyle(
                color: Colors.grey[400],
              ),
            ),
            SizedBox(height: 10,),
            Text(
              'Snoopy US',
              style: TextStyle(
                color: Colors.amberAccent[200],
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 10,),
            Text(
              'CURRENT　SNOOPY FLUTTER LEVEL',
              style: TextStyle(
                color: Colors.grey[400],
              ),
            ),
            SizedBox(height: 10,),
            Text(
              '$level',
              style: TextStyle(
                color: Colors.amberAccent[200],
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 30,),
            Row(
              children: [
                Icon(Icons.email,
                  color: Colors.grey[200],),
                SizedBox(width: 10,),
                Text('snoopy@gmail.com',
                  style: TextStyle(
                    color: Colors.grey[200],
                    letterSpacing: 1,
                  ),
                ),
              ],
              ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() { //trigger and rebuild inside of the widget.
            level +=1;
          });
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.grey[700],
      ),
    );
  }
}