How to Build a Search & Discover Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

import 'widgets/category_card.dart';
import 'widgets/search_bottom_nav.dart';
import 'widgets/search_chip.dart';
import 'widgets/search_field.dart';

/// "Search" — a discovery screen with a search field, top-search suggestion
/// chips, and a grid of category tiles.
///
/// Self-contained, pure Flutter. Bundles its exact design font
/// (Plus Jakarta Sans) and uses network images (the original Unsplash photos
/// from the design). Renders standalone when pushed as a route.
class SearchScreen extends StatefulWidget {
  const SearchScreen({super.key});

  @override
  State<SearchScreen> createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  static const Color _sectionLabel = Color(0xFF585D69);

  int _navIndex = 1; // Search tab active, per the design.

  static const List<String> _topSearches = <String>[
    'photography',
    'craft',
    'art',
    'procreate',
    'marketing',
    'UX design',
  ];

  // Exact Unsplash photos referenced by the Zeplin design.
  static const List<_Category> _categories = <_Category>[
    _Category('Interior design',
        'https://images.unsplash.com/photo-1586023492125-27b2c045efd7'),
    _Category('Traditional art',
        'https://images.unsplash.com/photo-1513364776144-60967b0f800f'),
    _Category('3D Animation',
        'https://images.unsplash.com/photo-1631582053308-40f482e7ace5'),
    _Category('Marketing',
        'https://images.unsplash.com/photo-1554415707-6e8cfc93fe23'),
    _Category('Photography',
        'https://images.unsplash.com/photo-1492691527719-9d1e07e534b4'),
    _Category('Calligraphy & lettering',
        'https://images.unsplash.com/photo-1591696919944-6d169b9e48d2'),
    _Category('UX design',
        'https://images.unsplash.com/photo-1576153192286-defd01e1e4b4'),
    _Category('Web develop',
        'https://images.unsplash.com/photo-1534665482403-a909d0d97c67'),
  ];

  static const String _imgParams = '?w=400&q=80&auto=format&fit=crop';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        bottom: false,
        child: SingleChildScrollView(
          padding: const EdgeInsets.fromLTRB(20, 20, 20, 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const SearchField(),
              const SizedBox(height: 30),
              const _SectionLabel('Top searches'),
              const SizedBox(height: 18),
              Wrap(
                spacing: 10,
                runSpacing: 10,
                children: <Widget>[
                  for (final String term in _topSearches)
                    SearchChip(label: term, onTap: () {}),
                ],
              ),
              const SizedBox(height: 34),
              const _SectionLabel('Categories'),
              const SizedBox(height: 18),
              _CategoryGrid(
                categories: _categories,
                imageParams: _imgParams,
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: SearchBottomNav(
        currentIndex: _navIndex,
        onChanged: (int index) => setState(() => _navIndex = index),
      ),
    );
  }
}

class _SectionLabel extends StatelessWidget {
  const _SectionLabel(this.text);

  final String text;

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: const TextStyle(
        fontFamily: 'PlusJakartaSans',
        color: _SearchScreenState._sectionLabel,
        fontSize: 15,
        fontWeight: FontWeight.w400,
        letterSpacing: 0.225,
        height: 1.4,
      ),
    );
  }
}

/// Two-column category grid (card aspect 160:140, 15px gaps), laid out as rows
/// so it composes inside the scroll view without a nested scrollable.
class _CategoryGrid extends StatelessWidget {
  const _CategoryGrid({required this.categories, required this.imageParams});

  static const double _gap = 15;
  static const double _aspect = 160 / 140;

  final List<_Category> categories;
  final String imageParams;

  @override
  Widget build(BuildContext context) {
    final List<Widget> rows = <Widget>[];
    for (int i = 0; i < categories.length; i += 2) {
      if (i > 0) {
        rows.add(const SizedBox(height: _gap));
      }
      rows.add(
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(child: _cell(categories[i])),
            const SizedBox(width: _gap),
            Expanded(
              child: i + 1 < categories.length
                  ? _cell(categories[i + 1])
                  : const SizedBox.shrink(),
            ),
          ],
        ),
      );
    }
    return Column(children: rows);
  }

  Widget _cell(_Category category) {
    return AspectRatio(
      aspectRatio: _aspect,
      child: CategoryCard(
        title: category.title,
        imageUrl: '${category.imageUrl}$imageParams',
        onTap: () {},
      ),
    );
  }
}

@immutable
class _Category {
  const _Category(this.title, this.imageUrl);
  final String title;
  final String imageUrl;
}