for 루프로 텍스트 위젯에 배열 데이터를 표시하는 방법을 Flutter

Question

일부 문자열을 사용할 수있는 간단한 목록이 있습니다. for 루프로 텍스트 위젯의 모든 문자열을 표시해야합니다.

이렇게 해봐

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

날짜 데이터에 오류가 있음 The expression doesn't evaluate to a function, so it can't be invoked.

또한 for(int i = 0; i < 8; i++)8 문자열이 있는지 자동으로 확인 해야하는 것처럼 lopp의 길이를 정의하고 싶지 않습니다 .

Answer 1

날짜 배열의 인덱싱 된 데이터를 가져와야합니다. 괄호 사용이 잘못되었습니다. 배열의 인덱스를 얻으려면 대괄호를 사용해야합니다. 다음과 같이 표시되어야합니다.

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

편집하다:

좋아,이 위젯 목록을 열 안에 사용할 수 있습니다. 이제 다음과 같이 보일 것입니다.

  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

toList더 쉽게 사용할 수 있으며 indexOf색인이 필요한 경우 에도 사용할 수 있습니다.

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

int index필요한 경우 사용할 수 있습니다 .

Answer 3

make it more dynamic

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

업데이트 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

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