Flutter cara menampilkan data array di widget teks dengan for loop

Question

Saya memiliki daftar sederhana di mana beberapa string tersedia. Saya hanya perlu menampilkan semua string di widget Teks oleh for loop

Saya mencoba seperti ini

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 menunjukkan kesalahan pada tanggalData The expression doesn't evaluate to a function, so it can't be invoked.

Juga di tidak ingin menentukan panjang untuk lopp seperti for(int i = 0; i < 8; i++)saya perlu memeriksanya secara otomatis bahwa ia memiliki 8 string.

Answer 1

Anda perlu mendapatkan data yang diindeks dari array tanggal. Ada penggunaan tanda kurung yang salah. Anda perlu menggunakan tanda kurung siku untuk mendapatkan indeks larik. Ini akan terlihat seperti ini:

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

EDIT:

Oke, Anda bisa menggunakan daftar widget ini di dalam kolom. Sekarang, akan terlihat seperti ini:

  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

Anda dapat menggunakan toListyang membuat lebih mudah dan juga digunakan indexOfjika Anda membutuhkan indeks

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

Anda dapat menggunakan int indexjika Anda membutuhkan.

Answer 3

make it more dynamic

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

Perbarui Anda dapat menampilkan dengan listview.builder

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

coba kode ini di 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(),
    );
  }
}