本文共 5686 字，大约阅读时间需要 18 分钟。

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
   
     {
     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: 
    
     [              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
   
     {
     @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: 
    
     [              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
   
     {
     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: 
    
     [              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
   
     {
     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: 
    
     [              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'),    ),  ),