Flutter開發:如何引入第三方庫並安裝使用

三掌櫃發表於2021-05-11

在Flutter開發過程中,會使用到各種各樣的好用的外掛和第三方庫,對於剛入行的新手來說,掌握正確的Flutter專案引入第三方庫是必備技能。

那麼本篇博文就來分享一下關於Flutter專案中如何正確引用並且更新安裝第三庫或者外掛的方法。

引用並安裝第三方庫的方法

開啟專案工程,找到專案檔案目錄結構裡的pubspec.yaml檔案,然後找到dependencies節點,在dependencies節點下新增想要引入的第三方庫名稱以及版本號資訊,順便把引入的第三方庫做一個註釋說明,方便後期查閱。

示例

引入Flutter常用三方庫:dio庫和圖片選擇庫。具體如下所示:

dependencies:
  flutter:
    sdk: flutter
  dio: ^2.1.7   #網路請求庫
  image_picker: ^0.6.7+21   #圖片選擇
複製程式碼

000.jpeg

拉取宣告第三方庫到專案本地

引入三方庫之後,工作還沒有結束,需要從網上拉取第三方庫到專案本地中,具體根據終端命令即可完成,終端命令如下所示: flutter packages get

通過上述終端命令操作,即可完成引入第三方庫並安裝的操作。

例項

引入第三方庫之後,在專案中具體使用如下所示(以圖片選擇這個三方庫使用來講):

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: ‘Hello Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(‘Hello Flutter'),
        ),
        body: new Center(
            GestureDetector(
              onTap: _pickImage,
              child: Container(
                width: 150,
                height: 85,
                //圖片通過裝飾器去設定圓角是不起作用的,應該設定在裝飾器內的背景圖
                decoration: BoxDecoration(
                  borderRadius:
                   BorderRadius.circular(10), //設定圓角,image沒有這個屬性
                   //fit 填充
                     image: DecorationImage(
                      image: _avataFile == null
                        ? AssetImage('images/shenfen_a.png')
                         : FileImage(_avataFile),
                         fit: BoxFit.cover),
                 ),
              ), //頭像
           ),
        ),
      ),
    );
  }
}
  void _pickImage() async {
    // ImageSource.gallery 使用相簿
    PickedFile file = await ImagePicker().getImage(source: ImageSource.gallery);
    setState(() {
      _avataFile = File(file.path);
    });
  }

複製程式碼

001.jpeg

002.jpeg

003.jpeg

以上就是本章全部內容,歡迎關注三掌櫃的微信公眾號“程式猿by三掌櫃”,三掌櫃的新浪微博“三掌櫃 666”,歡迎關注!

相關文章