~154. Displaying Category Items on a Screen

1. 앱을 하나 만들어보자.

 

현재까지 파일 트리는 아래와 같다.

 

- main.dart

import 'package:flutter/material.dart';

import 'package:google_fonts/google_fonts.dart';

import 'package:meals/screens/categories.dart';

final theme = ThemeData(

  useMaterial3: true,

  colorScheme: ColorScheme.fromSeed(

    brightness: Brightness.dark,

    seedColor: const Color.fromARGB(255, 131, 57, 0),

  ),

  textTheme: GoogleFonts.latoTextTheme(),

);

void main() {

  runApp(const App());

}

class App extends StatelessWidget {

  const App({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: theme,

      home: const CategoriesScreen(),

    );

  }

}

1) google fonts 설치

2) theme 설정

 

- categories.dart

import 'package:flutter/material.dart';

import 'package:meals/data/dummy_data.dart';

import 'package:meals/widgets/category_grid_item.dart';

class CategoriesScreen extends StatelessWidget {

  const CategoriesScreen({super.key});

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Pick your category'),

      ),

      body: GridView(

        padding: const EdgeInsets.all(24),

        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(

          crossAxisCount: 2,

          childAspectRatio: 3 / 2,

          crossAxisSpacing: 20,

          mainAxisSpacing: 20,

        ),

        children: [

          // availableCategories.map((category) => CategoryGridItem(category: category)).toList()

          for (final category in availableCategories)

            CategoryGridItem(category: category)

        ],

      ),

    );

  }

}

1) GridView 사용

2) dummy_data의 값들을 CategoryGridItem으로 넘겨줌

 

-dummy_data.dart

import 'package:flutter/material.dart';

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

const availableCategories = [

  Category(

    id: 'c1',

    title: 'Italian',

    color: Colors.purple,

  ),

  Category(

    id: 'c2',

    title: 'Quick & Easy',

    color: Colors.red,

  ),

  Category(

    id: 'c3',

    title: 'Hamburgers',

    color: Colors.orange,

  ),

  Category(

    id: 'c4',

    title: 'German',

    color: Colors.amber,

  ),

  Category(

    id: 'c5',

    title: 'Light & Lovely',

    color: Colors.blue,

  ),

  Category(

    id: 'c6',

    title: 'Exotic',

    color: Colors.green,

  ),

  Category(

    id: 'c7',

    title: 'Breakfast',

    color: Colors.lightBlue,

  ),

  Category(

    id: 'c8',

    title: 'Asian',

    color: Colors.lightGreen,

  ),

  Category(

    id: 'c9',

    title: 'French',

    color: Colors.pink,

  ),

  Category(

    id: 'c10',

    title: 'Summer',

    color: Colors.teal,

  ),

];

- category.dart

import 'package:flutter/material.dart';

class Category {

  const Category({

    required this.id,

    required this.title,

    this.color = Colors.orange,

  });

  final String id;

  final String title;

  final Color color;

}

1) category 모델 세팅

 

- category_gird_item.dart

import 'package:flutter/material.dart';

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

class CategoryGridItem extends StatelessWidget {

  const CategoryGridItem({

    super.key,

    required this.category,

  });

  final Category category;

  @override

  Widget build(BuildContext context) {

    return Container(

      padding: const EdgeInsets.all(16),

      decoration: BoxDecoration(

          gradient: LinearGradient(

        colors: [

          category.color.withOpacity(0.55),

          category.color.withOpacity(0.9),

        ],

        begin: Alignment.topLeft,

        end: Alignment.bottomRight,

      )),

      child: Text(

        category.title,

        style: Theme.of(context).textTheme.titleLarge!.copyWith(

              color: Theme.of(context).colorScheme.onBackground,

            ),

      ),

    );

  }

}

1) 데코레이션 사용

2) theme 사용

 

 

- 결과 화면