DEV Community: Ritik Raj

Custom Draggable Bottom Sheet in Flutter

Ritik Raj — Sat, 26 Mar 2022 12:30:38 +0000

Hey 👋!
Are you looking for Draggable bottom sheet in flutter? Then you have landed at the right place.
First of all let's see how does Draggable bottom sheet look like

Let's code the approach and the divide the whole section in small chunks of steps
Step 1: Code the boilerplate code
Declare a global boolean variable named as isSwipeUp, initialize with false




import 'package:flutter/material.dart';
bool isSwipeUp =false;
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

Step 2: Write code for home page
Creating Home() as StatefulWidget
As we are placing on widget on other widget so we our using Stack()

In stack element are placed one on other, last element will be on top.

In Stack(), We will use two different Widgets :

MainScreen()
CustomBottomSheet()



class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: Scaffold(
        body: Container(
          color: Colors.black26,
          height: size.height,
          width: size.width,
          child: Stack(
            children: [
              MainPage(), // [Will create in next step]
              Positioned(
                top: size.height * 0.8, //position to be changed  
                  child: const CustomBottomSheet() // [Will create in next step]
               )
            ],
          ),
        ),
      ),
    );
  }
}

Step 3: Create MainScreen()
MainScreen will be very simple as it has only one Container() with a single child with Text() => "HomePage" with some sort of styling and center Alignment



class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber,
      child: const Center(child: Text("HomePage",style: TextStyle(color: Colors.white,fontSize: 22),),),
    );
  }
}

Let's jump to next step

Step 4: Creating CustomBottomSheet()
CustomBottomSheet has a Container(), having full width and half height of screen with rounded corner at top edges and some sort of styling.



class CustomBottomSheet extends StatefulWidget {
  const CustomBottomSheet({Key? key}) : super(key: key);

  @override
  State<CustomBottomSheet> createState() => _CustomBottomSheetState();
}

class _CustomBottomSheetState extends State<CustomBottomSheet> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      height: size.height * 0.5,
      width: size.width,
      decoration: const BoxDecoration(
          gradient: LinearGradient(colors: [
            Color.fromRGBO(26, 41, 128, 100),
            Color.fromRGBO(42, 178, 252, 100),
          ]),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(50), topRight: Radius.circular(50))),
              child: Align(alignment: Alignment.topCenter,
              child: (isSwipeUp)
                    ? Icon(
                        Icons.expand_more_outlined,
                        size: 30,
                        color: Colors.white,
                      )
                    : Icon(
                        Icons.expand_less_outlined,
                        size: 30,
                        color: Colors.white,
                      ),
              ),
    );
  }
}

Now at this stage of our App looks like

Step 5: Adding GestureDetector on CustomBottomSheet() for making it Draggable.

Now we have to detect gesture of dragging/ Swiping
But Don't take worries as flutter have an awesome widget GestureDetector()
GestureDetector() helps to detect any kind of gesture on Widget and has various properties but we will use some only.

Adding GestureDetector() on CustomBottomSheet() in Stack



GestureDetector(
           onPanEnd: (details) {
                  print(details.velocity.pixelsPerSecond.dy.toString());
                  print(details.velocity.pixelsPerSecond.dx.toString());
           if (details.velocity.pixelsPerSecond.dy > -100) {
                    setState(() {
                      isSwipeUp = true;
                    });
                  } 

               else {
                    setState(() {
                      isSwipeUp = false;
                    });
                  }
             },
                   child: const CustomBottomSheet())

Now changing position of CustomBottomSheet() as isSwipeUp changes
As the transition should be smooth so we will replace Positioned() to AnimatedPositioned() with duration 400 milliseconds
Positioned➡➡ AnimatedPositioned



top: !isSwipeUp? size.height *0.5:size.height * 0.8,

whole components looks like:-



AnimatedPositioned(
       curve: Curves.decelerate,
        duration: const Duration(milliseconds: 400),
            top: !isSwipeUp? size.height *0.5:size.height * 0.8,
                 child: GestureDetector(
                    onPanEnd: (details) {           print(details.velocity.pixelsPerSecond.dy.toString());
           if (details.velocity.pixelsPerSecond.dy > -100) {
                    setState(() {
                      isSwipeUp = true;
                    });
                  } else {
                    setState(() {
                      isSwipeUp = false;
                    });
                  }
                },
                      child: const CustomBottomSheet())
           )

Our task is completed🙌🙌.

Full code:-

Catch me on LinkedIn

A Search Bar in Flutter without any External Package

Ritik Raj — Sat, 05 Mar 2022 08:56:41 +0000

The lack of a built-in search bar Widget, equivalent to a SearchView for Android, UISearchBar accessible when creating for iOS, or a SearchBar in React Native, was one challenge I recently faced while designing a mobile application using Flutter.
I was able to identify a couple of Dart Packages that attempted to fix this problem, but I chose to solve this myself rather than depending on the third-party packages’ upkeep and health.
Now I’ve made the decision to do it on my own. So let me break the task into small steps.

Step 1- Creating a model of a searchable list

when it comes to models, classes come 😉.

class model { 
 final String name; 
 model({this.name});
}

Then we will make a list of the model class, explicitly.

  // List of items to be searched
List<model> Items = [   
 model(name: "Name"), 
 model(name: "XYZ"), 
 model(name: "Demo"), 
 model(name: "GDSC"),  
 model(name: "Unknown"),  
 model(name: "Upper Moons"),  
 model(name: "Tanjiro"), 
 model(name: "Kivan"), 
 model(name: "India"), 
 model(name: "USA"),
];

We can also take data from the internet in form of HTTP response in this project. But that part could be more lengthy so we will cover that part in the upcoming articles.
So we have created a local list (searchable)🙌.
Then we also have to create a list of items to be filtered after searching

// List of item to be filtered after searching
List<model> filteredItem = [];

Step 2- Creating the UI of the App

Widget build(BuildContext context) {   
 Size size = MediaQuery.of(context).size;   
 return Scaffold(      
    body: SafeArea(    
    child: Column(       
       children: [          
          Padding(         
            padding: const EdgeInsets.all(8.0),   
             child: Container(     
                  width: size.width, 
                  height: size.height * 0.1,                                                 
                  alignment: Alignment.center,
                  child: TextField(          
           // controller: textController, We will declare this later 
                  decoration: InputDecoration(     
                      prefixIcon: Icon(
                         Icons.arrow_back_ios_new_sharp, 
                             color: Colors.black,), 
                   hintText: "Search",  
                   enabledBorder: OutlineInputBorder(    
                        borderRadius: BorderRadius.circular(25)),  
                  focusedBorder: OutlineInputBorder(      
                         borderRadius: BorderRadius.circular(25),   
                         borderSide: BorderSide(width: 2)),    
                ),
             ),   
           ),      
          ),
    Expanded(
    child: ListView.builder(
     itemCount: filteredItem.length,
     itemBuilder: (context, index) {
           return Container(
              margin: EdgeInsets.only(top: 10),
               width: size.width * 0.9,
               height: size.height * 0.0888,
               alignment: Alignment.centerLeft,
               decoration: BoxDecoration(
                   color: Color(0xff9379FF),
                   borderRadius: BorderRadius.circular(20)), 
               child: Padding(
        padding: const EdgeInsets.only(left: 28),
         child: Text(
           filteredItem[index].name,
           style: TextStyle(
           color: Colors.white,
           fontSize: 22,
           fontWeight: FontWeight.w400),),),
                   );
                })// ListBuilder
           ), //Column
          )//SafeArea
           ); //Scaffold

But we have to initialize our filteredItem with Item in the initState() function of the class of the screen.

void initState() {    
super.initState();    
filteredItem = Items;
}

Step 3- Declaring TextEditingController listener for TextField and adding its Listener, too.
For controlling the text entered in the TextField, we have to make an instance of TextEditingController, named as textController
final textController = new TextEditingController();
Before adding a listener, we will declare two global variables

String searchText = ""; // to store the search text in TextField
bool found = true; //to store whether searched text is found or not

Now adding the listener of textController in the initState() function of Stateful class

void initState() {    
super.initState();    
filteredItem = Items;
textController.addListener(() {
      if (textController.text.isEmpty) {
        setState(() {
          searchText = "";
          found = true;
          filteredItem = Items;
        });
      } else {
        setState(() {
          searchText = textController.text.trim();
        });
        // Function for checking the items in List searchFunc();
      }
    });
}
}

Step 4- Making the Function which will be invoked for Searching
The basic approach is that we will iterate through Item list and check whether searchText contains the list if it does then we will add Item at that index to a temporary list. Then later on we will equalize our filteredList with that temporary and set found equal to true in setState() Function
Let’s code it🤞.

void searchFunc() {
    List<model> tempList = [];
    if (!searchText.isEmpty) {
      for (int i = 0; i < Items.length; i++) {     if(Items[i].name.toLowerCase().contains(searchText.toLowerCase())) {
          tempList.add(Items[i]);
        }
      }
      setState(() {
        found = true;
        filteredItem = tempList;
      });
    }
   if (filteredItem.isEmpty) {
      setState(() {
        found = false;
      });
    }
  }

Looks great.
Wait but what if searchText is not available in the Item list😥.
No worries 😎, we already declared a global variable named found. So if found is true then we will display our List(filteredList) otherwise we will display Text as “Not Available”

Sounds good! Let’s code this approach, too.

Expanded( 
     child: found
                  ? ListView.builder(
                      itemCount: filteredItem.length,
                      itemBuilder: (context, index) {
                        return Container(
                          margin: EdgeInsets.only(top: 10),
                          width: size.width * 0.9,
                          height: size.height * 0.0888,
                          alignment: Alignment.centerLeft,
                          decoration: BoxDecoration(
                              color: Color(0xff9379FF),
                           borderRadius: BorderRadius.circular(20)),
                          child: Padding(
                           padding: const EdgeInsets.only(left: 28),
                            child: Text(
                              filteredItem[index].name,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 22,
                                  fontWeight: FontWeight.w400),
                            ),
                          ),
                        );
                      }
                      )
                  : Container(
                      height: size.height * 0.72,
                      width: size.width,
                      alignment: Alignment.center,
                      child: Text("Not Available",style:
                      TextStyle(color: Colors.black,fontSize: 23),),
                    ),//Container
            ) //Expanded

Our Task is done now 🙌🙌

FULL CODE

Catch me on LinkedIn

Medium Post