Análise comparativa de responsividade : uma avaliação prática entre os frameworks Flutter e React

Abstract

RESUMO Com o avanço da tecnologia, dispositivos como notebooks, celulares, tablets e smart TVs foram modernizados, exigindo interfaces de usuário adaptáveis a múltiplas plataformas. Assim, surgiu o conceito de Design Responsivo (Responsive Web Design – RWD), que busca oferecer uma experiência consistente em qualquer dispositivo. Embora o design responsivo traga melhorias, muitos sistemas enfrentam problemas como duplicação de conteúdo, carregamento lento e interfaces desconfiguradas, resultando em má experiência do usuário e altos custos de manutenção. Com o crescimento do acesso móvel, torna-se essencial garantir interfaces que se adaptem automaticamente às diferentes telas, proporcionando maior flexibilidade na apresentação do conteúdo e melhor usabilidade. Neste trabalho, foi desenvolvido um protótipo de sistema de restaurante, utilizando os frameworks Flutter e React, com foco na implementação de interfaces responsivas e na redução da duplicidade de código. Essa abordagem oferece uma solução acessível para sistemas que precisam operar em diversas plataformas, como celulares e computadores. Dados do Instituto Brasileiro de Geografia e Estatística (IBGE) mostram que, entre 2017 e 2018, o número de pessoas com acesso à internet no Brasil aumentou de 97% para 98,1%, totalizando cerca de 181,9 milhões de usuários. Além disso, segundo o relatório Digital 2020 Global Overview Report, 53,3% do tráfego mundial de internet ocorre via dispositivos móveis. O estudo também incluiu um levantamento sobre os principais conceitos de responsividade com base nas diretrizes da W3C, aplicados como estudo de caso no sistema de restaurante. Além disso, foi elaborado um relatório comparativo entre Flutter e React, destacando prós e contras de cada tecnologia. Os resultados indicaram que o Flutter apresentou desempenho superior ao React em termos de responsividade e experiência do usuário. Com o crescente uso de dispositivos móveis, garantir a qualidade da experiência de navegação é uma necessidade cada vez mais relevante. Este trabalho reforça a importância de desenvolver interfaces responsivas como uma solução eficiente e acessível para atender à crescente demanda por conteúdos digitais em múltiplas plataformas. Palavras-chave: Responsividade. Design Responsivo. Interface. Flutter

ABSTRACT With the advancement of technology, devices such as notebooks, smartphones, tablets, and smart TVs have been modernized, requiring user interfaces to be adaptable to multiple platforms. Thus, the concept of Responsive Design (Responsive Web Design – RWD) emerged, aiming to provide a consistent experience across any device. Although responsive design brings improvements, many systems face issues such as content duplication, slow loading times, and misconfigured interfaces, resulting in poor user experience and high maintenance costs. With the growth of mobile access, it is essential to ensure interfaces that automatically adapt to different screen sizes, offering greater flexibility in content presentation and better usability. In this work, a restaurant system prototype was developed using the Flutter and React frameworks, focusing on the implementation of responsive interfaces and reducing code duplication. This approach provides an accessible solution for systems that need to operate on various platforms, such as smartphones and computers. Data from the Brazilian Institute of Geography and Statistics (IBGE) show that, between 2017 and 2018, the number of people with internet access in Brazil increased from 97% to 98.1%, totaling approximately 181.9 million users. Moreover, according to the Digital 2020 Global Overview Report, 53.3% of the world’s internet traffic is generated via mobile devices. The study also included an analysis of key responsiveness concepts based on W3C guidelines, applied as a case study in the restaurant system. Additionally, a comparative report between Flutter and React was prepared, highlighting the pros and cons of each technology. The results indicated that Flutter outperformed React in terms of responsiveness and user experience. With the increasing use of mobile devices, ensuring high-quality browsing experiences has become increasingly relevant. This work emphasizes the importance of developing responsive interfaces as an efficient and accessible solution to meet the growing demand for digital content on multiple platforms. Keywords: Responsiveness. Responsive Design. Interface. Flutter