FLUTTER ECOSYSTEM

lalitjarwal/modal_side_sheet

Um pacote para usar o painel lateral do Material em seu projeto Flutter. Saiba mais sobre painéis laterais no Material.io

Capa do projeto modal_side_sheet
Stars
7
Forks
6
Último push (UTC)
17 de ago. de 2021
Status do projeto
Ativo
Lalit Jarwal GitHub avatar
GITHUB User

Lalit Jarwal ↗

Jaipur, IndiaSite oficial ↗
LinguagensC++DartCMakeHTMLCSwiftKotlinObjective-C

Tópicos técnicos

Pacotes publicados por este repositório

Dependências usadas

Lista de dependências 2 itens
  • flutter{"sdk":"flutter"}
  • flutter_testDesenvolvimento{"sdk":"flutter"}

README original

Texto original em inglês. Visite o GitHub para a versão atual.

Expandir / recolher README

Side Sheet

A package to use Material side sheet into your Flutter project. Learn more about side sheet at Material.io

Platform Support

Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️ ✔️ ✔️ ✔️

Getting Started

This package comes with two types of side sheets, Standard side sheet and Modal side sheet.

Modal Side Sheet

Modal side sheets present content while blocking interaction with the rest of the screen. This side sheet generally used in mobile devices as per recommended by Material Design by Google. See also : Modal Side Sheet

Modal Side Sheet

You can use it by calling showModalSideSheet() function into your Flutter project.

ElevatedButton(
    onPressed: () {
        showModalSideSheet(
            context: context,
            ignoreAppBar: false,
            body: ListView.builder(
                itemBuilder: (context, index) {
                    return ListTile(
                        leading: Icon(Icons.face),
                        title: Text("I am on $index index"),
                        trailing: Icon(Icons.safety_divider),
                    );
                },
            ));
        },
    child: Text("Show Modal Side Sheet")),

Standard Side Sheet

Standard side sheets co-exist with the screen’s primary UI region, which allows viewing and interaction with both surfaces. They are used only on tablet and desktop. See also: Standard Side Sheet

Standard Side Sheet

This side sheet can be used with BodyWithSideSheet widget. Just place this widget into your Scaffold's body property.

@override
Widget build(BuildContext context){
    return Scaffold(
        appBar:AppBar(title:Text("Standard Side Sheet Demo")),
        body:BodyWithSideSheet(
            body:Container(
                child:Text("My App Body"),
            ),
            sheetBody:Container(
                child:Text("My Sheet Body"),
            ),
            show:true
        ),
    );
}

Contributing

This is fully open source project so you are welcome to sontribute to any features or bug-fixing.

Don't forgot to star and fork the repository and make your first pull request.

License

Project released under MIT License.