Utilizando o WIDGET SingleChildScrollView do FLUTTER para resolver estouro de pixels na tela

Lucas Bercê de Jesus — Thu, 11 Feb 2021 00:23:59 +0000

Faaala devs tudo certo? Hoje venho trazer uma técnica/dica valiosa na hora de montar seus widgets em tela no FLUTTER.
Quando estamos desenvolvendo nossos app, e colocamos muitos widgets em tela onde acabamos estourando a capacidade de pixels em tela o FLUTTER apresenta uma faixa amarela informando quantos pixels você ultrapassou na tela. E a maneira para resolvermos isso é adicionando um scroll na tela, de uma forma bem simples utilizando o widget SingleChildScrollView:

SingleChildScrollView(
    child: Container(
      child: ListView.builder(
       //O physics: BouncingScrollPhysics() Adiciona uma animação 
       //elástica no scroll
       physics: BouncingScrollPhysics(), 
       itemCount: 100, 
       itemBuilder: (context, index) {
        return ListTile(
         title: Text('Título $index'),
         subtitle: Text('Subttítulo $index'),
       );
      }
     ),
    ),
  ],
 ),
),

E assim você consegue resolver os problemas de quebra de layout no seu app.

Espero que tenha ajudado vocês de alguma forma, até a próxima!!!!

React router dom

Lucas Bercê de Jesus — Sat, 18 Jul 2020 23:00:15 +0000

Boa noite a todos, hoje venho compartilhar uma dica muito massa para quem está aprendendo sobre rotas e roteamento no REACT JS...

Existe uma lib para lidar com isso dentro do React, o famoso REACT ROUTER DOM, porém o intuito desse post é dar uma dica sobre uma coisa que acontece muito com quem está começando, que é quando implementamos as rotas da nossa aplicação da seguinte forma:

import React from 'react'

import { BrowseRouter, Switch, Route } from 'react-router-dom';

import Main from './pages/Main';

import Repository from './pages/Repository';

export default function Routes() {
    return (
        <BrowseRouter>
            <Switch>
                <Route path="/" component={Main} />
                <Route path="/repository" component={Repository} />
            </Switch>
        </BrowseRouter>
    );
}

O grande problema do código acima que muita gente que está começando inclusive eu mesmo quando comecei me deparei com o problema é que mesmo chamando a rota /repository o componente renderizado em tela é o componente Main. Isso acontece pois o react-router-dom não procura por uma igualdade entre o path que colocamos dentro do componente Route e a URL que foi digitada no navegador, ele procura saber se a URL digitada começa com o path em que foi atribuido ao componente Route, ou seja se o path dentro do componente começa com / ele sempre irá renderizar o Main, para resolvermos isso é simples, basta passarmos uma flag dentro do componente chamada exact, assim ele vai comparar se a URL é exatamente identica ao path, segue o código de exemplo:

import React from 'react'

import { BrowseRouter, Switch, Route } from 'react-router-dom';

import Main from './pages/Main';

import Repository from './pages/Repository';

export default function Routes() {
    return (
        <BrowseRouter>
            <Switch>
                <Route path="/" exact component={Main} />
                <Route path="/repository" component={Repository} />
            </Switch>
        </BrowseRouter>
    );
}

Assim o roteamento da sua aplicação funcionará da meneira correta!!!

Espero ter ajudado de alguma forma, grande abreço DEV!!!

DEV Community: Lucas Bercê de Jesus

Utilizando o WIDGET SingleChildScrollView do FLUTTER para resolver estouro de pixels na tela

React router dom