Telegram-iOS
Telegram-iOS copied to clipboard
Scrolling issue with Telegram Web Apps for Bots
Telegram Flutter scrolling bug Platforms - Android & iOS
Steps to reproduce
1.Create Flutter app with a simple ListView (like ListView.builder for example) 2.Deploy it on any host (or for test use https://todo.hubitproject.com/flutter_bug_ck) 3.Create Telegram bot or check test bot @hubit_test_flutter_bot 3.1. Open Telegram bot father @Botfather 3.2. Type /newbot 3.3. Enter a unique name 3.3. Enter a unique bot login 3.4. Type /setmenubutton 3.5. Enter a path to flutter app from step 2 (or for test use https://todo.hubitproject.com/flutter_bug_ck) 3.6. Enter button name, for example "Test Flutter" 4.Open bot from Mobile device 5.Tap button from step 3.6 6.Expand Web App to fullscreen by dragging topbar part of webapp 7. Try scroll up (finger move up) and down (finger move down) Expected result Scroll works correctly
Actual result Scrolling down is close telegram web app
Complete code of app deployed at https://todo.hubitproject.com/flutter_bug_ck
import 'dart:math';
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: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const HomeScreen(), ); } }
class HomeScreen extends StatefulWidget { const HomeScreen({super.key});
@override State<HomeScreen> createState() => _HomeScreenState(); }
class _HomeScreenState extends State<HomeScreen> { @override Widget build(BuildContext context) { return Scaffold( body: ListView.separated( itemBuilder: (context, index) { return Container( padding: const EdgeInsets.all(32), color: Color.fromARGB( 255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255), ), child: Text('Item $index'), ); }, separatorBuilder: (context, index) { return const SizedBox( height: 32, ); }, itemCount: 100), ); } }
flutter doctor -v result
[✓] Flutter (Channel stable, 3.3.10, on macOS 13.1 22C65 darwin-arm, locale en-RU) • Flutter version 3.3.10 on channel stable at /Users/rain/Dev/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 135454af32 (2 months ago), 2022-12-15 07:36:55 -0800 • Engine revision 3316dd8728 • Dart version 2.18.6 • DevTools version 2.15.0
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at /Users/rain/Library/Android/sdk • Platform android-33, build-tools 33.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866) • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14C18 • CocoaPods version 1.11.3
[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] IntelliJ IDEA Community Edition (version 2022.3.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 72.0.4 • Dart plugin version 223.8617.8
[✓] VS Code (version 1.75.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension can be installed from: 🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.1 22C65 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.119
[✓] HTTP Host Availability • All required HTTP hosts are available
• No issues found!