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 widget不好吗？我没有找到任何方法可以让用户将他的 phone 中的图像直接添加到我创建的图像轮播中。

Answer 1

您可以复制粘贴运行下面的完整代码
第 1 步：您可以使用 class ImageConfig 来 class 验证图片来源
第 2 步：显示

时检查图像源类型

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

代码片段

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

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

Flutter Let the user add images in carousel

image

widget

carousel

dart

flutter