Bottom sheet in Flutter | How to implement Bottom sheet in Flutter ?

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


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  @override
  State<ResearchThinkerExample> createState() => _ResearchThinkerExampleState();
}

class _ResearchThinkerExampleState extends State<ResearchThinkerExample> {
  TextEditingController controller = TextEditingController();
  var newValue = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ResearchThinker Flutter Examples'),
        ),
        body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Center(
                child: ElevatedButton(
                  onPressed:()=> BottomSheetScreen().bottomSheetScreen(context),
                  child:Text("open bottom sheet")
                ),
              ),
            )),
      ),
    );
  }
}




class BottomSheetScreen {
  bottomSheetScreen(
      BuildContext context) {
    return showModalBottomSheet(
        isScrollControlled: true,
        context: context,
        builder: (builder) {
          return SafeArea(
            child: Scaffold(
                backgroundColor: Colors.white,
                appBar:
                AppBar(
                  backgroundColor: Colors.blue,
                  toolbarHeight: 85, // increase decrease height
                  leadingWidth: 100, // increase decrease gap
                  leading: Padding(
                    padding: const EdgeInsets.only(left: 8, top:23),//Change position of title
                    child: GestureDetector(
                      onTap: (){
                        Navigator.pop(context);
                      },
                      child: SizedBox(
                        child: Row(
                          children: [
                            const DefaultTextStyle(
                              style:
                              TextStyle(
                                  fontSize: 14,
                                  fontWeight: FontWeight.w400,
                                  color: Colors.white),
                              child:Padding(
                                padding: EdgeInsets.only(left: 8),
                                child: Text(
                                  "Back",

                                ),
                              ),
                            ),

                          ],
                        ),
                      ),
                    ),
                  ),
                  centerTitle: true,
                  title:Padding(
                    padding: const EdgeInsets.only(top:25),
                    child: Title(color: Colors.white, child: const Text("ResearchThinker BottomSheet",style: TextStyle(color:Colors.white),)),
                  ),
                ),

                body: SingleChildScrollView(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children:

                       [
                         SizedBox(height: 100,),
                         Center(child: Text("HERE YOU CAN ADD ANY WIDGET",style: TextStyle(color:Colors.black87,fontWeight: FontWeight.w900),))
                       ]

                      ),
                    ))),
          );
        });
  }



}

• Twitter
• Pinterest
• Facebook