[又重學flutter]切版2

 

Color.fromARGB

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Container(
        color: Color.fromARGB(255, 255, 0, 0),
      ),
    ),
  ));
}

Alignment.bottomCenter

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Container(
        alignment: Alignment.bottomCenter,
        color: Color.fromARGB(255, 255, 255, 0),
        child: Text(
          'test',
          style: TextStyle(fontSize: 100.0, color: Color(0xFFFF0000)),
        ),
      ),
    ),
  ));
}

BoxConstraints

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Container(
        alignment: Alignment.bottomCenter,
        color: Color.fromARGB(255, 255, 255, 0),
        constraints: BoxConstraints(maxWidth: 200, maxHeight: 200),
        child: Text(
          'test',
          style: TextStyle(fontSize: 100.0, color: Color(0xFFFF0000)),
        ),
      ),
    ),
  ));
}

Center

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    home: Scaffold(
        body: Center(
      child: Container(
        alignment: Alignment.bottomCenter,
        color: Color.fromARGB(255, 255, 255, 0),
        constraints: BoxConstraints(maxWidth: 200, maxHeight: 200),
        child: Text(
          'test',
          style: TextStyle(fontSize: 100.0, color: Color(0xFFFF0000)),
        ),
      ),
    )),
  ));
}

CrossAxisAlignment.end

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    home: Scaffold(
        body: Center(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
          Container(
            color: Colors.red,
            width: 10,
            height: 50,
          ),
          Container(
            color: Colors.yellow,
            width: 10,
            height: 200,
          ),
          Container(
            color: Colors.blue,
            width: 10,
            height: 100,
      ),
    ]))),
  ));
}

換行文字

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: Center(child: Text('這是\n在\n測試\n換行\n文字')),
  )));
}

maxLines

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: Center(
        child: Text(
      '這是\n在\n測試\n換行\n文字',
      maxLines: 2,
    )),
  )));
}

TextDecoration.underline

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: Center(
        child: Text(
      '底線文字',
      style: TextStyle(decoration: TextDecoration.underline),
    )),
  )));
}

ElevatedButton / ButtonStyle / MaterialStateProperty.all <Color>

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: Center(
        child: ElevatedButton(
            child: Text('按我'),
            onPressed: () {},
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
              foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
            ))),
  )));
}

elevation

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: Center(
        child: ElevatedButton(
            child: Text('按我'),
            onPressed: () {},
            style: ButtonStyle(
              elevation: MaterialStateProperty.all<double>(30),
              backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
              foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
            ))),
  )));
}

Image.asset

//pubspec.yaml
flutter:
  assets: 
    - assets/images/

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

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          body: Center(child: Image.asset('assets/images/fake250_100.png')))));
}

Image.network (載入圖片需要等一下)

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          body: Center(child: Image.network('https://fakeimg.pl/250x100/')))));
}

TextField / obscureText / textAlign / inputFormatters / FilteringTextInputFormatter.deny

此例中，無法輸入a-z的英文字母，並且會用密碼的形式顯示

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

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          body: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              child: TextField(
                enabled: true,
                textAlign: TextAlign.center,
                obscureText: true,
                inputFormatters: [
                  FilteringTextInputFormatter.deny(RegExp(r'[a-z]'))
                ],
                decoration: InputDecoration(hintText: '請不要輸入a-z'),
              )))));
}

FloatingActionButton / FloatingActionButtonLocation.centerFloat

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text('test'),
      ),
      floatingActionButton: FloatingActionButton(
        foregroundColor: Colors.pink,
        backgroundColor: Colors.green,
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    ),
  ));
}

SnackBar / SnackBarAction / ScaffoldMessenger.of(context).showSnackBar

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: HomePage()));
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: Text('clickMe'),
          onPressed: () {
            final snackbar = SnackBar(
              content: Text('跑出來啦'),
              action: SnackBarAction(
                label: '走啦',
                onPressed: () {},
              ),
            );
            ScaffoldMessenger.of(context).showSnackBar(snackbar);
          },
        ),
      ),
    );
  }
}

Stack / Positioned

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.orange,
          ),
          Positioned(
            top: 10,
            left: 10,
            child: Container(
              width: 50,
              height: 50,
              color: Colors.pink,
            ),
          )
        ],
      ),
    ),
  )));
}

GridView.count

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          body: GridView.count(
    crossAxisCount: 3,
    children: List.generate(
        500,
        (index) => Center(
              child: Text('資料$index'),
            )),
  ))));
}

Table / FixedColumnWidth / TableBorder / TableRow

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          body: Center(
    child: Table(
      columnWidths: {
        0: FixedColumnWidth(100),
        1: FixedColumnWidth(50),
        2: FixedColumnWidth(100),
      },
      border: TableBorder.all(
          color: Colors.black87, width: 2, style: BorderStyle.solid),
      children: [
        TableRow(children: [Text('1-1'), Text('1-2'), Text('1-3')]),
        TableRow(children: [Text('2-1'), Text('2-2'), Text('2-3')]),
      ],
    ),
  ))));
}