Flattern, wie Array-Daten im Text-Widget von for-Schleife angezeigt werden

Question

Ich habe eine einfache Liste, in der einige Zeichenfolgen verfügbar sind. Ich muss nur alle Zeichenfolgen im Text-Widget von for-Schleife anzeigen

Ich versuche es so

List datesData = [{
  '09:00 am - 10:00 am',
  '10:00 am - 11:00 am',
  '11:00 am - 12:00 am',
  '12:00 am - 01:00 am',
  '01:00 am - 02:00 am',
  '02:00 am - 03:00 am',
  '03:00 am - 04:00 am',
  '04:00 am - 05:00 am'
}];

for(int i = 0; i < 8; i++){
     Container(
       child: Text(datesData(i)),
     );
}

ITs zeigen Fehler in Datumsangaben The expression doesn't evaluate to a function, so it can't be invoked.

Auch in möchte nicht die Länge von für lopp definieren, wie for(int i = 0; i < 8; i++)ich es automatisch überprüfen muss, dass es 8 Zeichenfolgen hat.

Answer 1

Sie müssen die indizierten Daten des Datumsarrays abrufen. Es gibt eine falsche Verwendung von Klammern. Sie müssen eckige Klammern verwenden, um einen Index des Arrays zu erhalten. Es sollte so aussehen:

 for(int i = 0; i < 8; i++){
    Container(
     child: Text(datesDate[i]),
      );
    }

BEARBEITEN:

Ok, Sie können diese Widget-Liste in einer Spalte verwenden. Jetzt wird es so aussehen:

  List datesData = [
    
      '09:00 am - 10:00 am',
      '10:00 am - 11:00 am',
      '11:00 am - 12:00 am',
      '12:00 am - 01:00 am',
      '01:00 am - 02:00 am',
      '02:00 am - 03:00 am',
      '03:00 am - 04:00 am',
      '04:00 am - 05:00 am'
    
  ];

  List<Widget> textWidgetList = List<Widget>(); // Here we defined a list of widget!

  @override
  Widget build(BuildContext context) {
    for (int i = 0; i < 8; i++) {
      textWidgetList.add(
        Container(
          child: Text(datesData[i]),
        ),
      );
    }

    return Scaffold(
      body: Container(
        child: Column(
          children: textWidgetList,
        ),
      ),
    );
  }

Answer 2

Sie können verwenden toList, was einfacher macht und auch verwenden, indexOfwenn Sie Index benötigen

import 'package:flutter/material.dart';

class DateDataWidget extends StatelessWidget {
  final List datesData = [
    '09:00 am - 10:00 am',
    '10:00 am - 11:00 am',
    '11:00 am - 12:00 am',
    '12:00 am - 01:00 am',
    '01:00 am - 02:00 am',
    '02:00 am - 03:00 am',
    '03:00 am - 04:00 am',
    '04:00 am - 05:00 am'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: Column(
        children: datesData.map((date) {
          int index = datesData.indexOf(date); // use index if you want.
          print(index);
          return Text(date);
        }).toList(),
      )),
    );
  }
}

Sie können verwenden, int indexwenn Sie benötigen.

Answer 3

make it more dynamic

 for(int i = 0; i < datesData.length; i++){
    Container(
     child: Text(datesDate[i]),
      );
    }

Update Sie können mit listview.builder anzeigen

class MyWidget extends StatelessWidget {
  final List data = [
    '09:00 am - 10:00 am',
    '10:00 am - 11:00 am',
    '11:00 am - 12:00 am',
    '12:00 am - 01:00 am',
    '01:00 am - 02:00 am',
    '02:00 am - 03:00 am',
    '03:00 am - 04:00 am',
    '04:00 am - 05:00 am'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: data.length,
          itemBuilder: (BuildContext ctxt, int index) {
            return new Text(data[index]);
          }),
    );
  }
}

Answer 4

Versuchen Sie diesen Code auf dartpad.dev

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final List data = [
    '09:00 am - 10:00 am',
    '10:00 am - 11:00 am',
    '11:00 am - 12:00 am',
    '12:00 am - 01:00 am',
    '01:00 am - 02:00 am',
    '02:00 am - 03:00 am',
    '03:00 am - 04:00 am',
    '04:00 am - 05:00 am'
  ];
  
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: data.map((element) => ListTile(title: Text(element))).toList(),
    );
  }
}