Изображения загружаются сами по себе, но не в виде рандомизированного списка. - флаттер - PullRequest
0 голосов
/ 06 января 2020

и заранее благодарю за любую помощь.

Итак, у меня правильно загружаются изображения, когда я использую их в контейнере в других областях кода, но я также хочу, чтобы некоторые из этих изображений отображались случайным образом в панели приложений.

Учитывая, что они загружаются в других местах кода, я не подозреваю об ошибке Pubyaml.

Я все еще плохо знаком с флаттером и списками в целом. Поэтому я не удивлюсь, если я что-то напутал с самим списком или с тем, как он называется.

Это дает мне эту ошибку:

Syncing files to device iPhone...
Reloaded 8 of 502 libraries in 411ms.

════════ Exception caught by image resource service ════════════════════════════════════════════════
The following assertion was thrown resolving an image codec:
Unable to load asset: Image(image: AssetImage(bundle: null, name: "images/Mem2.JPG"), frameBuilder: null, loadingBuilder: null, alignment: center, this.excludeFromSemantics: false, filterQuality: low)

When the exception was thrown, this was the stack: 
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:484:44)
#2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:469:14)
#3      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:327:17)
...
Image provider: AssetImage(bundle: null, name: "Image(image: AssetImage(bundle: null, name: "images/Mem2.JPG"), frameBuilder: null, loadingBuilder: null, alignment: center, this.excludeFromSemantics: false, filterQuality: low)")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#c99db(), name: "Image(image: AssetImage(bundle: null, name: "images/Mem2.JPG"), frameBuilder: null, loadingBuilder: null, alignment: center, this.excludeFromSemantics: false, filterQuality: low)", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════

Вот код:

class ContactProfilePage extends StatefulWidget {
  @override
  _ContactProfilePageState createState() => _ContactProfilePageState();
}

class _ContactProfilePageState extends State<ContactProfilePage> {
  List<Attr> attr = [
    Attr(name: ''),
  ];

  dynamic randAppBarImg = [
    "images/Mem2.JPG",
    "images/Mem3.JPG",
    "images/Mem4.JPG",
    "images/Mem6.jpg",
    "images/memory - 1.jpeg",
    "images/memory - 2.jpeg",
    "images/memory - 3.jpeg",
    "images/memory - 4.jpeg",
    "images/memory - 5.jpeg",
    "images/memory - 6.jpeg",
  ];

  Random rnd;

  Image img() {
    int min = 0;
    int max = randAppBarImg.length - 1;
    rnd = Random();
    int r = min + rnd.nextInt(max - min);
    String image_name = randAppBarImg[r].toString();
    return Image.asset(image_name);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.lightBlueAccent,
        child: Icon(Icons.add),
        onPressed: () {
          //Modal sheet brings up the whole bottom pane when the plus button is pressed.
          showModalBottomSheet(
            context: context,
            builder: (context) => AddAttrScreen(
              (newAttrTitle) {
                setState(() {
                  //adds the Attr to the list anytime the user presses "Add"
                  attr.add(Attr(name: newAttrTitle));
                });
                Navigator.pop(context);
                //Hides the floating add Attr screen after pressing "Add"
              },
            ),
          );
          //TODO Change it so the categories don't have to be selected every time. Instead, have the add button WITHIN each category.
          // This floating button should instead create a new category.
        },
      ),
      drawer: DrawerMain(),
      body: NestedScrollView(
        //This allows for the top bar to collapse, while retaining the image.
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: true,
              snap: true,
              pinned: true,
              flexibleSpace: Stack(
                children: <Widget>[
                  Positioned.fill(
                      child: Image.asset(
                    img().toString(),
                    fit: BoxFit.cover,
                  ))
                ],
              ),
            ),
          ];
        },


        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Row(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: CircleAvatar(
                        maxRadius: 50.0,
                        backgroundImage: AssetImage("images/fox.jpeg")),
                  ),
                  Container(
                    //TODO ADD ON PRESSED FUNCTION TO SOCIAL ICONS
                    margin: EdgeInsets.all(15.0),
                    child: Icon(
                      FontAwesomeIcons.facebook,
                      size: 40.0,
                      color: Color(0xFF306060),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.all(15.0),
                    child: Icon(
                      FontAwesomeIcons.instagram,
                      size: 40.0,
                      color: Color(0xFF306060),
                    ),
                  ),
                ],
              ),
              Padding(
                padding: const EdgeInsets.only(left: 15.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Armando Pacheco Ortiz',
                      style: TextStyle(
                          fontSize: 25.0,
                          fontWeight: FontWeight.bold,
                          color: Color(0xFF306060)),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 15.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Freelance App Developer from Puerto Rico',
                      style: TextStyle(
                          fontSize: 20.0,
                          fontStyle: FontStyle.italic,
                          color: Color(0xFF306060)),
                    ),
                    SizedBox(
                      child: Divider(),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: Row(
                  children: <Widget>[
                    Text('Memories',
                        style: TextStyle(
                            fontSize: 20.0,
                            fontStyle: FontStyle.italic,
                            color: Color(0xFF306060),
                            fontWeight: FontWeight.bold))
                  ],
                ),
              ),

              //Horizontal scrolling images.
              //TODO These need to update based on uploads, perhaps use something like google's face detection to auto add?
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Container(
                        height: 310,
                        width: 200,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(20.0),
                          child: (Image.asset(
                            'images/Mem6.jpg',
                            fit: BoxFit.cover,
                          )),
                        ),
                      ),
                      SizedBox(
                        width: 20,
                      ),
                      Container(
                        height: 310,
                        width: 200,
                        //ClipRRect allows for it to have the border radius. Container is painted behind the image.
                        //For that reason, adding a border radius to the container doesn't work.
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(20.0),
                          child: (Image.asset(
                            'images/Mem2.JPG',
                            fit: BoxFit.cover,
                          )),
                        ),
                      ),
                      SizedBox(
                        width: 20,
                      ),
                      Container(
                        height: 310,
                        width: 200,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(20.0),
                          child: (Image.asset(
                            'images/memory - 4.jpeg',
                            fit: BoxFit.cover,
                          )),
                        ),
                      ),


Я вставил код так далеко, как первое изображение, чтобы показать, как я установить его в других местах.

Я не уверен, связана ли проблема со случайными изображениями внутри панели приложения, или, может быть, какой-то код, который мне не хватает. Надеюсь, кто-то может пролить свет на это!

Большое спасибо.

ОБНОВЛЕНИЕ:

Так что это помогло тонне и определенно запустило процесс! Но я заметил две новые проблемы.

  1. Мне пришлось переименовать все изображения из: «memory - 6» в «Mem6», и это, наконец, позволило им появиться. В противном случае иногда он вернется к цвету бирюзового цвета по умолчанию и не отобразит ничего, кроме ошибки, связанной с невозможностью снова загрузить ресурс. Я полагаю, что это просто ошибка именования, которую я неосознанно вызывал?

  2. Прокрутка вниз заставит панель приложения снова «refre sh» и будет случайным образом перемещать изображения с малейшей прокруткой, пока вы не остановитесь. , Если я вернусь назад, он сделает это снова. Это не создает ошибку, но, в конце концов, оно sh приводит приложение к такому освежающему состоянию. Как бы мне обойти это? Есть ли переопределение, или я должен просто создать виджет с некоторыми финалами, или виджеты без состояния / с состоянием? Я все еще изучаю lin go и все такое, поэтому я извиняюсь за невежество.

1 Ответ

0 голосов
/ 06 января 2020

Вы можете скопировать вставленный полный код ниже
В вашем img() есть ошибка, вы возвращаете Image.asset и переносите в Image.asset снова, вызывая дубликат

Image.asset(
             img().toString(),
             fit: BoxFit.cover,
           ))

фрагмент кода просто возвращаемая строка с именем image_name будет работать
и не включать пробел в имени изображения

String img() {
    int min = 0;
    int max = randAppBarImg.length - 1;
    rnd = Random();
    int r = min + rnd.nextInt(max - min);
    String image_name = randAppBarImg[r].toString();
    //return Image.asset(image_name);
    return image_name;
  }

рабочая демонстрация

enter image description here

полный код

import 'package:flutter/material.dart';
import 'dart:math';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ContactProfilePage(),
    );
  }
}

class Attr {
  String name;
  Attr({this.name});
}

class ContactProfilePage extends StatefulWidget {
  @override
  _ContactProfilePageState createState() => _ContactProfilePageState();
}

class _ContactProfilePageState extends State<ContactProfilePage> {
  List<Attr> attr = [
    Attr(name: ''),
  ];

  dynamic randAppBarImg = [
    "images/Mem2.JPG",
    "images/Mem3.JPG",
    /*"images/Mem4.JPG",
    "images/Mem6.jpg",
    "images/memory-1.jpeg",
    "images/memory-2.jpeg",
    "images/memory-3.jpeg",
    "images/memory-4.jpeg",
    "images/memory-5.jpeg",
    "images/memory-6.jpeg",*/
  ];

  Random rnd;

  String img() {
    int min = 0;
    int max = randAppBarImg.length - 1;
    rnd = Random();
    int r = min + rnd.nextInt(max - min);
    String image_name = randAppBarImg[r].toString();
    //return Image.asset(image_name);
    return image_name;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.lightBlueAccent,
          child: Icon(Icons.add),
          onPressed: () {
            //Modal sheet brings up the whole bottom pane when the plus button is pressed.
            /*       showModalBottomSheet(
              context: context,
              builder: (context) => AddAttrScreen(
                (newAttrTitle) {
                  setState(() {
                    //adds the Attr to the list anytime the user presses "Add"
                    attr.add(Attr(name: newAttrTitle));
                  });
                  Navigator.pop(context);
                  //Hides the floating add Attr screen after pressing "Add"
                },
              ),
            );*/
            //TODO Change it so the categories don't have to be selected every time. Instead, have the add button WITHIN each category.
            // This floating button should instead create a new category.
          },
        ),
        //drawer: DrawerMain(),
        body: NestedScrollView(
            //This allows for the top bar to collapse, while retaining the image.
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: 200.0,
                  floating: true,
                  snap: true,
                  pinned: true,
                  /*flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                      title: Text("",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          )),
                      background: Image.asset(
                        "images/Mem2.JPG",
                        fit: BoxFit.cover,
                      )),*/
                  flexibleSpace: Stack(
                    children: <Widget>[
                      Positioned.fill(
                          child: Image.asset(
                        img().toString(),
                        fit: BoxFit.cover,
                      ))
                    ],
                  ),
                ),
              ];
            },
            body: SingleChildScrollView(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                  Row(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(15.0),
                        child: CircleAvatar(
                            maxRadius: 50.0,
                            backgroundImage: AssetImage("images/fox.jpeg")),
                      ),
                      Container(
                        //TODO ADD ON PRESSED FUNCTION TO SOCIAL ICONS
                        margin: EdgeInsets.all(15.0),
                        child: Icon(
                          FontAwesomeIcons.facebook,
                          size: 40.0,
                          color: Color(0xFF306060),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.all(15.0),
                        child: Icon(
                          FontAwesomeIcons.instagram,
                          size: 40.0,
                          color: Color(0xFF306060),
                        ),
                      ),
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 15.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'Armando Pacheco Ortiz',
                          style: TextStyle(
                              fontSize: 25.0,
                              fontWeight: FontWeight.bold,
                              color: Color(0xFF306060)),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 15.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'Freelance App Developer from Puerto Rico',
                          style: TextStyle(
                              fontSize: 20.0,
                              fontStyle: FontStyle.italic,
                              color: Color(0xFF306060)),
                        ),
                        SizedBox(
                          child: Divider(),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Row(
                      children: <Widget>[
                        Text('Memories',
                            style: TextStyle(
                                fontSize: 20.0,
                                fontStyle: FontStyle.italic,
                                color: Color(0xFF306060),
                                fontWeight: FontWeight.bold))
                      ],
                    ),
                  ),

                  //Horizontal scrolling images.
                  //TODO These need to update based on uploads, perhaps use something like google's face detection to auto add?
                  Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                Container(
                                  height: 310,
                                  width: 200,
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(20.0),
                                    child: (Image.asset(
                                      'images/Mem6.jpg',
                                      fit: BoxFit.cover,
                                    )),
                                  ),
                                ),
                                SizedBox(
                                  width: 20,
                                ),
                                Container(
                                  height: 310,
                                  width: 200,
                                  //ClipRRect allows for it to have the border radius. Container is painted behind the image.
                                  //For that reason, adding a border radius to the container doesn't work.
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(20.0),
                                    child: Image.asset(
                                      'images/Mem2.JPG',
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                ),
                                SizedBox(
                                  width: 20,
                                ),
                                Container(
                                  height: 310,
                                  width: 200,
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(20.0),
                                    child: (Image.asset(
                                      'images/memory-4.jpeg',
                                      fit: BoxFit.cover,
                                    )),
                                  ),
                                ),
                              ])))
                ]))));
  }
}
...