How can i make the FloatingActionButton to expand and be a textfield something like search button?

Example

My Code

import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialApp(home: MasterFul()));
    
    class MasterFul extends StatefulWidget{
      @override
      Master createState() => Master();
    }
    
    class Master extends State<MasterFul>{
      List arrays = [{"id": 1, "title": "Master"},{"id": 2, "title": "doom"}];
      
      @override
      Widget build(BuildContext build){
        return Scaffold(
          body: Center(
            child: ListView.builder(
              itemCount: arrays.length,
              itemBuilder: (BuildContext ctxt, int index){
                return new Text(arrays[index]["title"]);
              }
            )
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: (){},
            child: Icon(Icons.search),
            
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        );
      }
    }

I gave it a try, I was able to get it done but it isn’t exactly as it is shown in the giphy, overall idea is there and I am not that good with UI and animations.

Hope this helps.

  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'dart:core';

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

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      );
    }
  }

  class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() => _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {

    bool showTextField = false;
    Widget _buildFloatingSearchBtn() {
      return Expanded(
        child: FloatingActionButton(
          child: Icon(Icons.search),
          onPressed: () {
            setState(() {
              showTextField = !showTextField;
            });
          },
        ),
      );
    }

    Widget _buildTextField() {
      return Expanded(
        child: Center(
          child: TextField(
            onTap: () {
              showTextField = false;
            },
          ),
        ),
      );
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Search + Text'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(15.0, 0.0, 15.0, 0.0),
              child: Row(
                children: <Widget>[
                  showTextField ? _buildTextField() : Container(),
                  _buildFloatingSearchBtn(),
                ],
              ),
            )
          ],
        )
      );
    }
  }
4 Likes

Hello thanks a lot men

1 Like