When displaying a flutter app from a browser (chrome in this example) on a mobile device, the browser's app bar does not scroll off screen when the content of the page is scrolled. Is there a way to achieve that scroll?
This question regards to Flutter Web only
Demo
Here is a comparison between a flutter demo app and a simple search results page on Google. You can see how the app bar doesn't move in the first example but does move on the search results page.
Code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
final List<ListTile> _list = List.generate(50, (index) {
return ListTile(
title: Text('Hello World $index'),
);
});
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Material(
child: ListView(
children: _list,
),
),
);
}
}
Related
There is a strange behavior in Flutter I faced recently that I can not explain. Consider the following code being built for WEB platform:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Hello World',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({this.title = "Home Page"});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: const Center(
child: Text(
'Hello, World!',
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (_) => DraggableScrollableSheet(
expand: false,
builder: (_, ScrollController scrollController) {
return ListView(
controller: scrollController,
children: [for (var i = 0; i < 250; i++) Text("Item: $i")],
);
},
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
),
tooltip: "Open Sheet!",
child: const Icon(Icons.add),
),
);
}
}
It works perfectly fine and as expected when opened from mobile device: the DraggableScrollableSheet gets opened, takes 50% of the screen height, and then the ListView inside it may be scrolled along with Sheet itself, so it will take from 0% to 100% of the screen.
However, if opened in desktop browser, the DraggableScrollableSheet just refuses to be scrolled together with ListView on mouse wheel rotation. It just sticks to 50% and can only be closed and never expanded!
An I missing something? Is it a flutter bug? How do I make it work in desktop browsers as expected?
P.S. here is a slightly more complex example of the behavior in my app, hosted on GitHub pages; for ModalBottomSheet to get opened, you should touch Flutter icon in the center of St. Petersburg.
This is probably a bug, you can work around this problem using the following parameter (next to "Expand"): "initialChildSize: 1.0"
This will set the initial size to 100% DraggableScrollableSheet parameters
I try to use emojis on flutter web, for example 😀, on a Text() widget, but the emoji does not appear and I get a cross instead.
Screenshot:
Code:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
home: Scaffold(body: Text('This is an emoji 😀')),
);
}
}
Do you know how to solve it on flutter web ?
can try flutter_emoji package : https://pub.dev/packages/flutter_emoji
I think this issue is already solved on Flutter 2.8 😀
I just copy pasted the emoji on the Text string as follows.
Center(
child: AppCard(
child: Text(
'Hi there 👋',
style: Theme.of(context).textTheme.bodyText1,
),
),
),
By using Customscrollview and Slivers widgets everything shows well on the screen but when I try to scroll up and down there is no silver effect or any animation, the screen does not even scroll up and down
I am using Flutter beta version with Android emulator 19~
link https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html
these are the two .dart files I am using right now:
main.dart
import 'package:flutter/material.dart';
import 'package:p1/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter facebook UI',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomeScreen(),
);
}
}
home.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
brightness: Brightness.light,
backgroundColor: Colors.white,
title: Text(
'welcome',
style: const TextStyle(
color: Colors.grey,
fontSize: 28.0,
fontWeight: FontWeight.bold,
letterSpacing: -1.2,
),
),
),
],
),
);
}
}
Everything shows well on the screen but when I try to scroll up and down there is no silver effect or any animation, the screen does not even scroll up and down, any help?
I'm simply trying to archive a behaviour like this:
https://streamable.com/vnvxt0
When a scroll is performed, notice how it sort of fades in and out after exiting and returning to the application.
On the other hand, with a flutter application, it doesn't behave in such this way. Rather it forces itself to the correct scroll position:
https://streamable.com/omztmj
A minimal code example would be the Flutter Hello world app with a Listview.builder()
void main() {
runApp(MyApp());
}
// Root class called by the runApp() method.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.light,
),
home: Scaffold(
appBar: AppBar(),
body: ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.ac_unit),
title: Text(
'test',
),
);
},
itemCount: 50,
),
),
);
}
}
Any form of help would be appreciated.
My app is used for recognize face and it is put on public place in company, so I don't want anyone to close my app or open anything else in the android device.
Is there anyway to avoid using status bar and 3 bottom buttons in flutter when the app is opened or it only can be used when I allow it?
Thanks for advance.
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle());
This line help you, and how you can use, see example explained below:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Add this line
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle());
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}