Flutter圖片詳解

一、Flutter圖片按鈕

在Flutter中，圖片按鈕是一種非常常見的視覺組件。通過使用InkWell或GestureDetector包裹圖片，就可以實現點擊事件。同時，我們可以通過設置不同的屬性來自定義按鈕的樣式。

GestureDetector(
  onTap: () {
    // 點擊事件
  },
  child: Image.asset(
    'assets/images/button.png',
    width: 120,
    height: 60,
    fit: BoxFit.cover,
    alignment: Alignment.center,
  ),
)

二、Flutter圖片載入失敗顯示默認圖片

在網路請求或本地圖片載入時，如果圖片不存在或載入失敗，我們可以設置一張默認圖片來代替。

Image.network(
  'http://www.example.com/404.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  alignment: Alignment.center,
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
    return Image.asset('assets/images/default.png');
  },
)

三、Flutter圖片載入失敗

在網路請求的圖片載入時，如果網路不穩定或伺服器宕機等異常情況，圖片可能會載入失敗。我們可以通過設置errorBuilder屬性來自定義載入失敗時的樣式。

Image.network(
  'http://www.example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  alignment: Alignment.center,
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          Icons.broken_image,
          size: 60,
          color: Colors.grey[400],
        ),
        SizedBox(height: 10),
        Text(
          '圖片載入失敗',
          style: TextStyle(
            color: Colors.grey[400],
            fontSize: 16,
          ),
        ),
      ],
    );
  },
)

四、Flutter圖片無法鋪滿

在設置圖片長寬時，如果圖片的長寬比與容器不一致，那麼圖片可能無法完全鋪滿容器。我們可以通過調整fit屬性來解決這個問題。

Image.network(
  'http://www.example.com/image.jpg',
  width: double.infinity, // 設置寬度為容器寬度
  height: 200,
  fit: BoxFit.fill, // 填充整個容器
  alignment: Alignment.center,
)

五、Flutter圖片拉伸比例

拉伸比例指在填充容器時，圖片長寬比是否改變。fit屬性中的scaleDown和none值表示不改變比例，而cover和fill值則表示改變比例。

Image.network(
  'http://www.example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  alignment: Alignment.center,
)

六、Flutter圖片變圓角

我們可以通過使用ClipRRect組件將圖片切成圓角。

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: Image.network(
    'http://www.example.com/image.jpg',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
    alignment: Alignment.center,
  ),
)

七、Flutter圖片列表

在開發中，我們經常需要展示多張圖片，這時我們可以使用ListView或GridView等滾動組件來實現圖片列表。

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    childAspectRatio: 1,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Image.network(
      'http://www.example.com/image_$index.jpg',
      fit: BoxFit.cover,
      alignment: Alignment.center,
    );
  },
)

八、Flutter圖片上傳控制項

在Flutter中實現圖片上傳控制項比較簡單。我們可以使用Flutter自帶的ImagePicker組件來控制相冊或相機。

File? _imageFile;

Future _getImageFromGallery() async {
  final pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
  setState(() {
    _imageFile = File(pickedFile!.path);
  });
}

Future _getImageFromCamera() async {
  final pickedFile = await ImagePicker().getImage(source: ImageSource.camera);
  setState(() {
    _imageFile = File(pickedFile!.path);
  });
}

Column(
  children: [
    ElevatedButton(
      onPressed: _getImageFromGallery,
      child: Text('從相冊選擇'),
    ),
    ElevatedButton(
      onPressed: _getImageFromCamera,
      child: Text('拍照上傳'),
    ),
    if (_imageFile != null) Image.file(_imageFile!),
  ],
)

九、Flutter圖片列表內存溢出

在展示大量圖片時，由於內存限制，可能會發生內存溢出的情況。我們可以使用Flutter自帶的CachedNetworkImage組件來避免內存溢出問題。

CachedNetworkImage(
  imageUrl: 'http://www.example.com/image.jpg',
  fit: BoxFit.cover,
  alignment: Alignment.center,
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

十、Flutter圖片視頻編輯選取

在視頻編輯時，我們可以使用Flutter自帶的video_player和flutter_ffmpeg組件來選擇視頻並提取封面。

Future _pickVideoAndThumbnail() async {
  final pickedFile = await ImagePicker().getVideo(source: ImageSource.gallery);
  if (pickedFile != null) {
    final thumbnailPath = await _extractThumbnail(pickedFile.path);
    setState(() {
      _videoFile = File(pickedFile.path);
      _thumbnailFile = File(thumbnailPath);
    });
  }
}

Future _extractThumbnail(String videoPath) async {
  final thumbnailPath = '${(await getTemporaryDirectory()).path}/thumbnail.jpg';
  await FlutterFFmpeg().execute(
    '-i $videoPath -ss 00:00:01.000 -vframes 1 $thumbnailPath',
  );
  return thumbnailPath;
}

Column(
  children: [
    ElevatedButton(
      onPressed: _pickVideoAndThumbnail,
      child: Text('選擇視頻'),
    ),
    if (_thumbnailFile != null) Image.file(_thumbnailFile!),
    if (_videoFile != null) Text(_videoFile!.path),
  ],
)