Flutter:新增懸浮按鈕、文字風格、圖片、常見按鈕、ICON、Containers、Padding Rows、Columns、Expanded Widgets

按鈕

//floatingActionButton即為懸浮按鈕

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('my first app'),
centerTitle: true,
),
body: Center(
child: Text('hello, ninjas!'),
),
floatingActionButton: FloatingActionButton(
child: Text('click'),
),
),
));

風格

//TextStyle為文字風格
//幫floatingActionButton更改按鈕顏色

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('my first app'),
centerTitle: true,
backgroundColor: Colors.red[600]
),
body: Center(
child: Text(
'hello, ninjas!',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
letterSpacing: 2.0,
color: Colors.grey[600],
fontFamily: 'IndieFlower',
),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[600],
child: Text('click'),
),
),
));

StatelessWidget

//用StatelessWidget來模組化

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: Center(
child: Text(
'hello again, ninjas!',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
letterSpacing: 2.0,
color: Colors.grey[600],
fontFamily: 'IndieFlower',
),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[600],
child: Text('click'),
),
);
}
}

加入本地及網路圖片

//用Image.asset('pathToPic')新增本地圖片
//本地圖片需要到pubspec.yaml將圖片路徑加入
flutter:
assets:
- assets/my_icon.png
- assets/background.png
or
flutter:
assets:
- assets/
//用Image.network('url')新增網路圖片(支持GIF動態圖片)

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: Center(
child: AssetImage('assets/space-3.jpg'), //NetworkImage()
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[600],
child: Text('click'),
),
);
}
}

常見按鈕、ICON

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: Center(
child: IconButton(
onPressed: () {
print('you clicked me');
},
icon: Icon(Icons.alternate_email),
color: Colors.amber,
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[600],
child: Text('click'),
),
);
}
}

// 可以替換到body:Center(child: XXXXXX()中)

// Icon(
// Icons.airport_shuttle,
// color: Colors.lightBlue,
// size: 50.0
// ),

// RaisedButton(
// onPressed: () {
// print('you clicked me');
// },
// child: Text('click me'),
// color: Colors.lightBlue,
// ),

// FlatButton(
// onPressed: () {},
// child: Text('click me again'),
// color: Colors.amber
// ),

// RaisedButton.icon(
// onPressed: () {},
// icon: Icon(Icons.mail),
// label: Text('mail me'),
// color: Colors.amber,
// ),

Containers & Padding

//Padding:移動容器位置距離
//onPressed: () {},(產生點擊效果

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: Padding(
padding: EdgeInsets.all(20.0),
child: Text('hello, again')
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[600],
child: Text('click'),
),
);
}
}

// snippets for padding & margin

// Container(
// margin: EdgeInsets.all(40.0),
// padding: EdgeInsets.all(30.0),
// color: Colors.grey[400],
// child: Text('hey, ninjas!'),
// ),

Rows(水平左至右排版)

//左到右排版布局
//排版方式mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,


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(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text('hello, world'),
FlatButton(
onPressed: () {},
color: Colors.amber,
child: Text('click me'),
),
Container(
color: Colors.cyan,
padding: EdgeInsets.all(30.0),
child: Text('inside container')
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[600],
child: Text('click'),
),
);
}
}

Columns(垂直上到下排版)

//CrossAxisAlignment.stretch (伸展至最右方)
//EdgeInsets.all(X.0)(Container大小)

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: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
color: Colors.cyan,
child: Text('one'),
),
Container(
padding: EdgeInsets.all(30.0),
color: Colors.pinkAccent,
child: Text('two'),
),
Container(
padding: EdgeInsets.all(40.0),
color: Colors.amber,
child: Text('three'),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[600],
child: Text('click'),
),
);
}
}

Expanded Widgets(自適應版面)

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(
children: <Widget>[
Expanded(child: Image.asset('assets/space-2.jpg')),
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(30.0),
color: Colors.cyan,
child: Text('1'),
),
),
Expanded(
flex: 2,
child: Container(
padding: EdgeInsets.all(30.0),
color: Colors.pinkAccent,
child: Text('2'),
),
),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.all(30.0),
color: Colors.amber,
child: Text('3'),
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[600],
child: Text('click'),
),
);
}
}

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store