Form Search

Filled Search

import 'package:flutter/material.dart';

final searchController = TextEditingController();

void search() {
  final query = searchController.text;
  if (query == '') return;

  print('execute search..');
}

TextFormField(
  controller: searchController,
  cursorColor: Colors.white,
  style: const TextStyle(
    fontSize: 16,
    color: Colors.white,
  ),
  decoration: InputDecoration(
    suffixIcon: IconButton(
      onPressed: search,
      icon: const Icon(
        Icons.search,
        color: Colors.white,
      ),
    ),
    hintText: 'Search here...',
    hintStyle: const TextStyle(
      fontSize: 14,
      color: Colors.white70,
      fontWeight: FontWeight.normal,
    ),
    contentPadding: const EdgeInsets.symmetric(horizontal: 20),
    filled: true,
    fillColor: Theme.of(context).colorScheme.secondary,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16),
      borderSide: BorderSide.none,
    ),
  ),
),

Outlined Search

import 'package:flutter/material.dart';

final searchController = TextEditingController();

void search() {
  final query = searchController.text;
  if (query == '') return;

  print('execute search..');
}

TextFormField(
  controller: searchController,
  style: TextStyle(
    fontSize: 16,
    color: Theme.of(context).colorScheme.primary,
  ),
  decoration: InputDecoration(
    suffixIcon: IconButton(
      onPressed: search,
      icon: Icon(
        Icons.search,
        color: Theme.of(context).colorScheme.primary,
      ),
    ),
    hintText: 'Search here...',
    hintStyle: TextStyle(
      fontSize: 14,
      color: Theme.of(context).colorScheme.secondary,
      fontWeight: FontWeight.normal,
    ),
    contentPadding: const EdgeInsets.symmetric(horizontal: 20),
    filled: true,
    fillColor: Theme.of(context).colorScheme.primary.withOpacity(0.3),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16),
      borderSide: BorderSide(
        color: Theme.of(context).colorScheme.primary,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16),
      borderSide: BorderSide(
        color: Theme.of(context).colorScheme.primary,
      ),
    ),
  ),
),

Elevated Search

import 'package:flutter/material.dart';

final searchController = TextEditingController();

void search() {
  final query = searchController.text;
  if (query == '') return;

  print('execute search..');
}

Material(
  elevation: 4,
  borderRadius: BorderRadius.circular(16),
  child: TextFormField(
    controller: searchController,
    style: const TextStyle(
      fontSize: 16,
    ),
    decoration: InputDecoration(
      suffixIcon: IconButton(
        onPressed: search,
        icon: Icon(
          Icons.search,
          color: Theme.of(context).colorScheme.primary,
        ),
      ),
      hintText: 'Search here...',
      hintStyle: const TextStyle(
        fontSize: 14,
        color: Colors.grey,
        fontWeight: FontWeight.normal,
      ),
      contentPadding: const EdgeInsets.symmetric(horizontal: 20),
      filled: true,
      fillColor: Colors.white,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(16),
        borderSide: BorderSide.none,
      ),
    ),
  ),
),

1

import 'package:flutter/material.dart';

final searchController = TextEditingController();

void search() {
  final query = searchController.text;
  if (query == '') return;

  print('execute search..');
}

Row(
  children: [
    Expanded(
      child: Container(
        height: 50,
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(12),
            bottomLeft: Radius.circular(12),
          ),
          color: Color(0xff374151),
          border: Border(
            top: BorderSide(color: Color(0xff4F5864), width: 1.5),
            left: BorderSide(color: Color(0xff4F5864), width: 1.5),
            bottom: BorderSide(color: Color(0xff4F5864), width: 1.5),
          ),
        ),
        child: TextFormField(
          controller: searchController,
          style: const TextStyle(
            fontSize: 16,
            color: Colors.white,
          ),
          cursorColor: Colors.blue,
          decoration: const InputDecoration(
            hintText: 'Search here...',
            hintStyle: TextStyle(
              fontSize: 14,
              color: Colors.white70,
              fontWeight: FontWeight.normal,
            ),
            contentPadding: EdgeInsets.symmetric(
              horizontal: 20,
            ),
            border: InputBorder.none,
          ),
        ),
      ),
    ),
    MaterialButton(
      onPressed: () {},
      minWidth: 50,
      height: 50,
      elevation: 0,
      color: Colors.blue,
      padding: const EdgeInsets.all(0),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(12),
          bottomRight: Radius.circular(12),
        ),
      ),
      child: const Icon(
        Icons.search,
        color: Colors.white,
      ),
    ),
  ],
),

2

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

final searchController = TextEditingController();

void search() {
  final query = searchController.text;
  if (query == '') return;

  print('execute search..');
}

Row(
  children: [
    Expanded(
      child: Container(
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          color: const Color(0xff374151),
          border: Border.all(
            color: const Color(0xff4F5864),
            width: 1.5,
          ),
        ),
        child: Row(
          children: [
            const Gap(10),
            const Icon(Icons.book, color: Colors.white70),
            const Gap(14),
            Expanded(
              child: TextFormField(
                controller: searchController,
                style: const TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                ),
                cursorColor: Colors.blue,
                decoration: const InputDecoration(
                  hintText: 'Search here...',
                  hintStyle: TextStyle(
                    fontSize: 14,
                    color: Colors.white70,
                    fontWeight: FontWeight.normal,
                  ),
                  contentPadding: EdgeInsets.only(right: 20),
                  border: InputBorder.none,
                ),
              ),
            ),
          ],
        ),
      ),
    ),
    const Gap(12),
    MaterialButton(
      onPressed: () {},
      minWidth: 50,
      height: 50,
      elevation: 0,
      color: Colors.blue,
      padding: const EdgeInsets.all(0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: const Icon(
        Icons.search,
        color: Colors.white,
      ),
    ),
  ],
),