Build Flutter ListView Food List App

---

Flutter ListView App

Let’s make a Food list app that has a list of items, and each item has a name and price. When a user clicks on the right side arrow icon, it will call another screen finally shows the info about the user’s selection.

Let’s start with a Hello, World Flutter project

Let’s create a String Resource class

The food items will be Donut, Pizza, Cupcake, Gingerbread, JellyBean. The price list will be 13,12,10,10,15.

string_resource.dart

strings xml alternative in flavor string.xml

create a file string_resource.dart

class StringResource
{
   static const String app_name = "Food List";
   static const List<String> items = <String>[
      'Donut', 'Pizza','Cupcake','Gingerbread','JellyBean'

   ];


   static const List<int> price = <int> [13,12,10,10,15];

}

Now any class can access app_name by importing the file which has the StringResource class.

import 'string_resource.dart';

Text("${StringResource.app_name}")

Flutter ListView

ListView.builder(
    itemCount: StringResource.items.length,
    itemBuilder: (_, index) {
      return Card(
        child: ListTile(
          title: Text(
            '${StringResource.items[index]}',
            style: TextStyle(color: Colors.red),
          ),
          subtitle: Text(
            'Price : ${StringResource.price[index]}',
            style: TextStyle(color: Colors.blue[450]),
          ),
          leading: Icon(
            Icons.shopping_cart,
            color: Colors.green,
          ),
          trailing: IconButton(
            icon: Icon(Icons.arrow_forward_sharp),
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder:
                          (context) =>
                         Info(StringResource.items[index], StringResource.price[index])

                  ));},
          ),
        ),
      );
    });

Use Navigator to push content to the next Screen (info.dart)

 Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder:
                            (context) =>
                           Info(StringResource.items[index], StringResource.price[index])

                    ));

main.dart (Complete Code)

import 'package:flutter/material.dart';
import 'info.dart';
import 'string_resource.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: StringResource.app_name,
      theme: ThemeData(primarySwatch: Colors.red),
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("${StringResource.app_name}")),
      body: _listView(context),
    );
  }
}

ListView _listView(BuildContext context) {
  return ListView.builder(
      itemCount: StringResource.items.length,
      itemBuilder: (_, index) {
        return Card(
          child: ListTile(
            title: Text(
              '${StringResource.items[index]}',
              style: TextStyle(color: Colors.red),
            ),
            subtitle: Text(
              'Price : ${StringResource.price[index]}',
              style: TextStyle(color: Colors.blue[450]),
            ),
            leading: Icon(
              Icons.shopping_cart,
              color: Colors.green,
            ),
            trailing: IconButton(
              icon: Icon(Icons.arrow_forward_sharp),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder:
                            (context) =>
                           Info(StringResource.items[index], StringResource.price[index])

                    ));},
            ),
          ),
        );
      });
}

info.dart (Complete Code)

import 'package:flutter/material.dart';
class Info extends StatelessWidget
{

  final String item;
  final int price;
  Info(this.item, this.price);

  @override
  Widget build(BuildContext context) {
  return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('$item'),),
          body: Container(
            width: 500, height: 200,
            child: Card(
              margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
              elevation: 5,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Food Name : $item", style: TextStyle(fontSize: 25),),
                  Text("Price : $price",  style: TextStyle(fontSize: 18),)

                ],
              ),
            ),
          ),
        )
       );
  }
}

• 

•