Flutter 让用户在轮播中添加图片

Posted 2023-02-23

【中文标题】Flutter 让用户在轮播中添加图片

【英文标题】：Flutter Let the user add images in carousel

【发布时间】：2020-12-13 19:04:45

【问题描述】：

有没有办法让用户在图片轮播中手动添加图片？

这是我已经向用户展示的图片列表：

final List<String> imgList = [
  'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg',
  'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg',
  'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg'
];

final List<Widget> imageSliders = imgList
    .map(
      (item) => Container(
        child: Container(
          margin: EdgeInsets.all(5.0),
          child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              child: Stack(
                children: <Widget>[
                  Image.network(item, fit: BoxFit.cover, width: 1000.0),
                  Positioned(
                    bottom: 0.0,
                    left: 0.0,
                    right: 0.0,
                    child: Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color.fromARGB(200, 0, 0, 0),
                            Color.fromARGB(0, 0, 0, 0)
                          ],
                          begin: Alignment.bottomCenter,
                          end: Alignment.topCenter,
                        ),
                      ),
                      padding: EdgeInsets.symmetric(
                          vertical: 10.0, horizontal: 20.0),
                    ),
                  ),
                ],
              )),
        ),
      ),
    )
    .toList();

       CarouselSlider(
             options: CarouselOptions(
                 autoPlay: false,
                 aspectRatio: 2.0,
                 enlargeCenterPage: true,
                 enlargeStrategy: CenterPageEnlargeStrategy.height,
                 pauseAutoPlayOnManualNavigate: true,
                 pauseAutoPlayOnTouch: true,
                 scrollDirection: Axis.horizontal),
             items: imageSliders,
           ),

我使用 CarouselSlider 小部件不好吗？我没有找到任何方法可以让用户将手机中的图片直接添加到我创建的图片轮播中。

【问题讨论】：

使用流构建器更新轮播滑块并使用 ImagePicker 抓取图像。不要忘记在 ImagePicker 中检查抓取的图像是否为空。

我知道如何使用ImagePicker，但我对streambuilder一无所知。您是否有一个示例或类似的东西可以改变简单轮播中的图像？

medium.com/flutter-community/…

【参考方案1】：

您可以在下面复制粘贴运行完整代码 第一步：可以使用ImageConfig类对图片源进行分类 第二步：查看图片来源类型

item.source == "http"
          ? Image.network(item.path,
              fit: BoxFit.cover, width: 1000.0)
          : Image.file(File(item.path),
              fit: BoxFit.cover, width: 1000.0),

代码sn-p

class ImageConfig 
  String source;
  String path;

  ImageConfig(this.source, this.path);


class _MyHomePageState extends State<MyHomePage> 
  List<ImageConfig> imgList = [
    ImageConfig(
        source: "http",
        path:
            'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),
   ...          
   Future getImage() async 
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() 
      imgList.add(ImageConfig(source: "file", path: pickedFile.path));
    );
  
 

工作演示

完整代码

import 'dart:io';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class ImageConfig 
  String source;
  String path;

  ImageConfig(this.source, this.path);


class _MyHomePageState extends State<MyHomePage> 
  List<ImageConfig> imgList = [
    ImageConfig(
        source: "http",
        path:
            'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),
    ImageConfig(
        source: "http",
        path:
            'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),
    ImageConfig(
        source: "http",
        path:
            'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg')
  ];
  List<Widget> imageSliders;

  final picker = ImagePicker();

  Future getImage() async 
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() 
      imgList.add(ImageConfig(source: "file", path: pickedFile.path));
    );
  

  @override
  Widget build(BuildContext context) 
    imageSliders = imgList
        .map(
          (item) => Container(
            child: Container(
              margin: EdgeInsets.all(5.0),
              child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  child: Stack(
                    children: <Widget>[
                      item.source == "http"
                          ? Image.network(item.path,
                              fit: BoxFit.cover, width: 1000.0)
                          : Image.file(File(item.path),
                              fit: BoxFit.cover, width: 1000.0),
                      Positioned(
                        bottom: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: Container(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [
                                Color.fromARGB(200, 0, 0, 0),
                                Color.fromARGB(0, 0, 0, 0)
                              ],
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                            ),
                          ),
                          padding: EdgeInsets.symmetric(
                              vertical: 10.0, horizontal: 20.0),
                        ),
                      ),
                    ],
                  )),
            ),
          ),
        )
        .toList();

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CarouselSlider(
              options: CarouselOptions(
                  autoPlay: false,
                  aspectRatio: 2.0,
                  enlargeCenterPage: true,
                  enlargeStrategy: CenterPageEnlargeStrategy.height,
                  pauseAutoPlayOnManualNavigate: true,
                  pauseAutoPlayOnTouch: true,
                  scrollDirection: Axis.horizontal),
              items: imageSliders,
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  

【讨论】：

它工作正常。我将更多地研究 dart 中的 async 以更好地理解代码。非常感谢您的回答。要删除图像，我是否必须写类似的东西？

可以对imgList进行增删操作。