206. Adding a "New Item" Screen

1. New Item 화면을 만들어보자.

 

일단 이번 강의에서는 screen폴더를 별도로 만들지 않고, widgets폴더에 전부 넣을 예정이다.

 

- grocery_list.dart

import 'package:flutter/material.dart';

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

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

class GroceryList extends StatefulWidget {

  const GroceryList({super.key});

  @override

  State<GroceryList> createState() => _GroceryListState();

}

class _GroceryListState extends State<GroceryList> {

  void _addItem() {

    Navigator.of(context).push(

      MaterialPageRoute(

        builder: (ctx) => const NewItem(),

      ),

    );

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Your Groceries'),

        actions: [

          IconButton(

            onPressed: _addItem,

            icon: const Icon(Icons.add),

          ),

        ],

      ),

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

          ),

        ),

      ),

    );

  }

}

 

1) 앱바에 newItem 위젯으로 이동할 버튼 생성

 

- new_item.dart

import 'package:flutter/material.dart';

class NewItem extends StatefulWidget {

  const NewItem({super.key});

  @override

  State<NewItem> createState() {

    return _NewItemState();

  }

}

class _NewItemState extends State<NewItem> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Add a new item'),

      ),

      body: const Padding(

        padding: EdgeInsets.all(12),

        child: Text('The form'),

      ),

    );

  }

}