~205. Challenge Solution 2 - Building the List UI

1. 리스트 화면을 만들어보자.

 

- main.dart

import 'package:flutter/material.dart';

import 'package:shopping_list/widgets/grocery_list.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Groceries',

      theme: ThemeData.dark().copyWith(

        useMaterial3: true,

        colorScheme: ColorScheme.fromSeed(

          seedColor: const Color.fromARGB(255, 147, 229, 250),

          brightness: Brightness.dark,

          surface: const Color.fromARGB(255, 42, 51, 59),

        ),

        scaffoldBackgroundColor: const Color.fromARGB(255, 50, 58, 60),

      ),

      home: const GroceryList(),

    );

  }

}

 

- grocery_list.dart

import 'package:flutter/material.dart';

import 'package:shopping_list/data/dummy_items.dart';

class GroceryList extends StatelessWidget {

  const GroceryList({super.key});

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Your Groceries'),

      ),

      body: ListView.builder(

        itemCount: groceryItems.length,

        itemBuilder: (ctx, index) => ListTile(

          title: Text(groceryItems[index].name),

          leading: Container(

            width: 24,

            height: 24,

            color: groceryItems[index].category.color,

          ),

          trailing: Text(

            groceryItems[index].quantity.toString(),

          ),

        ),

      ),

    );

  }

}

 

- models/grocery_item.dart

import 'package:shopping_list/models/category.dart';

class GroceryItem {

  const GroceryItem({

    required this.id,

    required this.name,

    required this.quantity,

    required this.category,

  });

  final String id;

  final String name;

  final int quantity;

  final Category category;

}

 

- models/category.dart

import 'package:flutter/material.dart';

enum Categories {

  vegetables,

  fruit,

  meat,

  dairy,

  carbs,

  sweets,

  spices,

  convenience,

  hygiene,

  other

}

class Category {

  const Category(this.title, this.color);

  final String title;

  final Color color;

}

 

- data/dummy_items.dart

import 'package:shopping_list/models/grocery_item.dart';

import 'package:shopping_list/models/category.dart';

import 'package:shopping_list/data/categories.dart';

final groceryItems = [

  GroceryItem(

      id: 'a',

      name: 'Milk',

      quantity: 1,

      category: categories[Categories.dairy]!),

  GroceryItem(

      id: 'b',

      name: 'Bananas',

      quantity: 5,

      category: categories[Categories.fruit]!),

  GroceryItem(

      id: 'c',

      name: 'Beef Steak',

      quantity: 1,

      category: categories[Categories.meat]!),

];

 

- data/categories.dart

import 'package:flutter/material.dart';

import 'package:shopping_list/models/category.dart';

const categories = {

  Categories.vegetables: Category(

    'Vegetables',

    Color.fromARGB(255, 0, 255, 128),

  ),

  Categories.fruit: Category(

    'Fruit',

    Color.fromARGB(255, 145, 255, 0),

  ),

  Categories.meat: Category(

    'Meat',

    Color.fromARGB(255, 255, 102, 0),

  ),

  Categories.dairy: Category(

    'Dairy',

    Color.fromARGB(255, 0, 208, 255),

  ),

  Categories.carbs: Category(

    'Carbs',

    Color.fromARGB(255, 0, 60, 255),

  ),

  Categories.sweets: Category(

    'Sweets',

    Color.fromARGB(255, 255, 149, 0),

  ),

  Categories.spices: Category(

    'Spices',

    Color.fromARGB(255, 255, 187, 0),

  ),

  Categories.convenience: Category(

    'Convenience',

    Color.fromARGB(255, 191, 0, 255),

  ),

  Categories.hygiene: Category(

    'Hygiene',

    Color.fromARGB(255, 149, 0, 255),

  ),

  Categories.other: Category(

    'Other',

    Color.fromARGB(255, 0, 225, 255),

  ),

};

 

--> 기본 화면 구성이다.

 

-결과 화면