Home Mobile Show List With List.generate

Show List With List.generate

0

Listview, tidak memiliki batasan dalam menaruh widget di dalamnya. Jika ada banyak widget di dalam list view yang sampai membuatnya melebihi layar handphone, secara otomatis listview akan memanjangakan layar (menggunakan scroll) sesuai banyak widget.Contoh program penggunaan List.generate :

main.dart:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = "Show List with List.generate";

    return MaterialApp(
        title: appTitle,
        home: Scaffold(appBar: AppBar(
          title: Text(appTitle),
        ),
            body: GridView.count(
                crossAxisCount: 3,
                children: List.generate(choices.length, (index) {
                  return Center(
                    child: SelectCard(choice: choices[index]),
                  );
                }
                )
            )
        )
    );
  }
}

class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'Aplikasi', icon: Icons.apps),
  const Choice(title: 'Person', icon: Icons.person),
  const Choice(title: 'Map', icon: Icons.camera),
  const Choice(title: 'Phone', icon: Icons.android),
  const Choice(title: 'Camera', icon: Icons.mail_outline),
  const Choice(title: 'Setting', icon: Icons.settings),
  const Choice(title: 'Album', icon: Icons.photo_album),
  const Choice(title: 'WiFi', icon: Icons.wifi),
  const Choice(title: 'GPS', icon: Icons.map),
  const Choice(title: 'Home', icon: Icons.home),
  const Choice(title: 'Account', icon: Icons.account_circle),
  const Choice(title: 'Alarm', icon: Icons.alarm),
];

class SelectCard extends StatelessWidget {
  const SelectCard({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.amberAccent,
        child: Center(child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)),
              Text(choice.title, style: textStyle),
            ]
        ),
        )
    );
  }
}

Hasil :