scrollable_panel

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um pacote Flutter que permite que um painel inferior seja arrastado para abrir e rolar, imitando o comportamento do painel 'Locais próximos' visto no aplicativo Google Maps. Ele oferece interações suaves de arrastar para expandir e suporta rolagem de conteúdo dentro do painel expandido. Ideal para exibir informações detalhadas ou listas em um formato compacto e interativo. O pacote é compatível com plataformas Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

Exibindo detalhes de localização em aplicativos de mapas
Mostrando lista de pontos de interesse próximos
Criando painéis de informações expansíveis
Implementando seções de conteúdo colapsáveis
Melhorando a interação do usuário com painéis inferiores arrastáveis

Principais recursos

Suporte para gestos de arrastar para expandir
área de conteúdo rolável embutida
Compatibilidade multiplataforma
Transições de animação suaves
Altura e comportamento do painel personalizáveis
Design responsivo para todos os tamanhos de tela

Indicado para

Aplicativos de mapa e baseados em localização
Folhetos inferiores com conteúdo pesado
Interfaces de usuário que exigem painéis expansíveis
Desenvolvedores procurando experiências nativas semelhantes a painéis inferiores
Aplicativos que precisam de navegação baseada em gestos intuitivos

Considerações

Pode exigir estilos adicionais para visualizações personalizadas
Impacto no desempenho com conjuntos de dados muito grandes
Personalização limitada para animações complexas
Requer manipulação cuidadosa de visualizações de rolagem aninhadas
Não ideal para exibição de conteúdo estático simples

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

drag to expand and then can scroll contents. similar "Nearby spots" panel on google map app.

https://pub.dev/packages/scrollable_panel

Panel Properties

Properties	Data Type	Description
builder	ScrollableWidgetBuilder	builder for inner panel view. ScrollableWidgetBuilder type define in draggable_scrollable_sheet.dart. provide PanelScrollController that extends ScrollController.
controller	PanelController	control panel from some interaction like button.
defaultPanelState	PanelState	set default panel state. (default value PanelState.open)
defaultPanelSize	double	set default panel height factor (default value 0.25)
minPanelSize	double	set minimum panel height factor. (default value 0)
maxPanelSize	double	set maximum panel height factor. (default value 1.0)
onOpen	VoidCallback	if non-null, this callback is called when panel state become open
onClose	VoidCallback	if non-null, this callback is called when panel state become close
onExpand	VoidCallback	if non-null, this callback is called when panel state become expand

PanelController actions

Action	Data Type	Description
open	void	open panel. panel animate to defaultPanelSize.
expand	void	expand panel. panel animate to maxPanelSize.
close	void	close panel. panel animate to minPanelSize.
animateTo	double	animate panel to value height.

Usage

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PanelController _panelController = PanelController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('scrollable panel'),
      ),
      body: Stack(
        children: <Widget>[
          InkWell(
            onTap: () {
              _panelController.toDefault();
            },
            child: _FirstView(),
          ),
          ScrollablePanel(
            controller: _panelController,
            builder: (context, controller) {
              return SingleChildScrollView(
                controller: controller,
                child: _SecondView(),
              );
            },
          ),
        ],
      ),
    );
  }
}

TODO

~write README.md and dartdoc~
~null-safety support~
~write test code~
add List<double> anchor property to use multi snapping point.

Buscar pacotes, repositórios e categorias de apps