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

Question

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

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

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 小部件不好吗？我没有找到任何方法可以让用户将手机中的图片直接添加到我创建的图片轮播中。

Answer 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),
      ),
    );
  }
}