Building a YouTube Search Page For Your App

App Development in Flutter

You want to offer your users the functionality to search for YouTube videos? In this blog, we will go through the process of building a YouTube search widget with Flutter.

The code will be available on GitHub. Link at the end.

Search Icon by Freepik. Image edited by author.

Before we start, here is a screenshot of what you can expect:

YouTube search page. Image by author.

First of all, we want to import some basic packages, which are needed whenever any UI is involved.

import 'package:flutter/material.dart';

Now we want to declare the class YouTubeSearch. Since Flutter works with widgets, we want a stateful one since our search page changes throughout the runtime of the app. For example, when the user wants to search for a new video.

class YouTubeSearch extends StatefulWidget {

  @override
  _YouTubeSearchState createState() => _YouTubeSearchState();
}

Next, we have to define the state of our stateful widget.

class _YouTubeSearchState extends State<YouTubeSearch> {
  bool typing = false;
  static String key =…