Flutter AppBar Search TextField


main.dart

import 'package:flutter/material.dart';
import 'package:lesson011_google_map/pages/HomePage.dart';

void main() => runApp(MainApp());

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
      debugShowMaterialGrid: false,
      showSemanticsDebugger: false,
    );
  }
}


HomePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool appBarFlag = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: appBarFlag
            ? Text(
                'Jaal',
                style: TextStyle(
                  color: Colors.white,
                ),
              )
            : TextField(
                cursorColor: Colors.white,
                autofocus: true,
                style: TextStyle(
                  color: Colors.white,
                ),
                decoration: InputDecoration(
                  hintText: "Search...",
                  hintStyle: TextStyle(
                    color: Colors.white,
                  ),
                  border: InputBorder.none,
                ),
              ),
        centerTitle: true,
        actions: [
          IconButton(
            icon: appBarFlag
                ? Icon(
                    Icons.search,
                    color: Colors.white,
                  )
                : Icon(
                    Icons.close,
                    color: Colors.white,
                  ),
            onPressed: () {
              appBarFlag = !appBarFlag;
              setState(() {});
            },
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: 50,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('This Title'),
            subtitle: Text('This sub title'),
            leading: CircleAvatar(
              backgroundImage: NetworkImage(
                  'https://images.unsplash.com/photo-1594976095708-b7e4f5529f2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80'),
            ),
            trailing: Icon(Icons.call),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.red,
        elevation: 0.0,
        mini: true,
        onPressed: () {
          setState(() {});
        },
        child: Icon(
          Icons.add,
        ),
      ),
    );
  }
}


Output:

Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 comments:

Post a Comment