Flutter实现常用功能
1.Flutter实现小球跟随手指运动
功能比较简单，我也是刚刚开始学Flutter，主要用来记录一下学习过程，废话不多说，先看效果。
使用的组件：
Stack:层叠布局，相当于Web中的绝对定位、Android中的Frame布局是相似的。
Positioned：开始位置是（0,0），移动之后记录到定点（0,0）的left,top距离，所有坐标为（left,top）。
GestureDetector：手势控制。屏幕上的触摸点位置每次改变时，都会触发这个回调。
container：容器
总共代码如下：
import 'package:flutter/material.dart';
class PositionedGroup extends StatefulWidget {
@override
_PositionedGroupState createState() => _PositionedGroupState();
}
class _PositionedGroupState extends State<PositionedGroup> {
double moveX=0,moveY=0;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Position移动小球学习'),
),
body: Stack(
children: <Widget>[
Positioned(
left: moveX,
top: moveY,
child: GestureDetector(
onPanUpdate: (e) => _domove(e),
child: Container(
width: 72,
height: 72,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(36),
),
),
),
),
],
)),
);
}
_domove(DragUpdateDetails e){
setState(() {
moveX+=e.delta.dx;
moveY+=e.delta.dy;
});
print(e);
}
}
2.如何打开第三方应用
1.导入依赖：
url_launcher: ^5.0.2
在如图pubspec.xml文件里面导入依赖
2.data代码
跳转代码如下,url为跳转地址：
_langchUrl() async{
const url='https://blog.csdn.net';
if(await canLaunch((url))){
await launch(url);
}else{
throw 'Could not launch $url';
}
}
总体代码测试代码如下：
粘贴代码比较乱可以用Ctrl+Alt+L快速格式化，但是有时候会与qq头像锁定的快捷键一样，必须关掉QQ。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class OpenWeb extends StatefulWidget {
@override
_OpenWebState createState() => _OpenWebState();
}
class _OpenWebState extends State<OpenWeb> {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('如何打开第三方应用'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(onPressed: ()=>_langchUrl(),
child: Text('打开浏览器'),
)
],
),
),
),
);
}
_langchUrl() async{
const url='https://blog.csdn.net';
if(await canLaunch((url))){
await launch(url);
}else{
throw 'Could not launch $url';
}
}
}
效果：
3.快速实现夜间模式
Brightness.dark修改界面为夜间模式
Brightness.light修改界面为日间模式
ThemeData(
brightness:Brightness.dark,
primarySwatch: Colors.blue,
)
总体代码：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class OpenWeb extends StatefulWidget {
@override
_OpenWebState createState() => _OpenWebState();
}
class _OpenWebState extends State<OpenWeb> {
Brightness brightness=Brightness.light;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
brightness:brightness,
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('如何实现夜间模式'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(onPressed:(){
setState(() {
if(brightness==Brightness.dark){
brightness=Brightness.light;
}else{
brightness=Brightness.dark;
}
});
},
child: Text('切换模式'),
)
],
),
),
),
);
}
}
效果：
4.字体改变
1.免费字体ttf下载网站
2.新建font文件夹，放入字体。
3.在pubspec.xml里面放入如下代码
其中font/test.ttf为你的字体的地址，可以参考第二步骤的ttf放置位置
fonts:
- family: test
fonts:
- asset: font/test.ttf
4.fontFamily: 'test’设置字体
其他fontFamily: 'test'中的test为第三步family中的test名字相同
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class OpenWeb extends StatefulWidget {
@override
_OpenWebState createState() => _OpenWebState();
}
class _OpenWebState extends State<OpenWeb> {
Brightness brightness=Brightness.light;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
fontFamily: 'test', //此处设置修改改页面所有字体
brightness:brightness,
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('如何打开第三方应用'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(onPressed:(){
setState(() {
if(brightness==Brightness.dark){
brightness=Brightness.light;
}else{
brightness=Brightness.dark;
}
});
},
child: Text('切换模式',style: TextStyle(fontFamily: 'test'),),
//此处设置只修改单个Text的字体
)
],
),
),
),
);
}
}
效果：
6.加载圆形网络图片
ClipOval(
child: SizedBox(
width: 100,
height: 100,
child: Image.network('https://i.ibb.co/CQf368G/fbf18c6a86-Bd6-LF.jpg'),
),
),
