I want to have a scrollbar view like the one in the picture.
So how can I have it using flutter?
I've tried
SingleChildScrollView(
....
),
But no scroll bars appeared and I don't know to make them
You can use this project
The pubspec.yaml
dev_dependencies:
flutter_test:
sdk: flutter
draggable_scrollbar: 0.0.4
The code:
import 'package:flutter/material.dart';
import 'package:draggable_scrollbar/draggable_scrollbar.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
ScrollController _rrectController = ScrollController();
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Test",
home: Scaffold(
body: Center(
child: DraggableScrollbar.rrect(
controller: _rrectController,
backgroundColor: Colors.blue,
child: ListView.builder(
controller: _rrectController,
itemCount: 100,
itemExtent: 100.0,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.green[index % 9 * 100],
child: Center(
child: Text(index.toString()),
),
),
);
},
),
),
),
),
);
}
}
The result:
Flutter now has Scrollbar widget.
Just wrap SingleChildScrollView or any ScrollView widget with Scrollbar.
Code sample:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Scrollbar(
// Child can also be SingleChildScrollView, GridView, etc.
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
title: Text('Index $index'),
);
},
),
),
);
}
}
Scrollbar (Widget of the week) : https://youtu.be/DbkIQSvwnZc
Wrap the scrollable widget with Scrollbar widget.
child: Scrollbar(
isAlwaysShown: true,
child: ListView(
....)
)
You can make it always shown.
watch this for further explanation.
https://www.youtube.com/watch?v=DbkIQSvwnZc
Scrollbar(
isAlwaysShown: true,
showTrackOnHover: true,
radius: Radius.circular(5),
interactive: true,
child: ListView.builder(shrinkWrap: true, itemCount: data.productionReportModel!.data!.length, itemBuilder: (context, index) {
return Container();
}),
),
I am calling API using BLoC. On successful response, I need to call Widget named
_moveToHomeScreen()
.
Following is my code for that
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
//body: UserDetail(),
body: new Container(
padding: EdgeInsets.all(16.0),
child:StreamBuilder(
stream: bloc.validateUser,
builder: (BuildContext context, snapshot) {
if(snapshot.hasData){
_moveToHomeScreen();
}
return Column(
children: <Widget>[
_createInputFields(),
_createRegisterButton(),
],
);
}
),
);
}
AND
Widget _moveToHomeScreen () {
print('inside move to home screen');
return Center(
child: Opacity(
opacity: 0.5,
child: Text(
"Save a person to see them here!",
key: Key("Placeholder"),
),
),
);
}
Control goes into the Widget but I am not able to see desired output from Widget.
Your Streambuilder never returns _moveToHomeScreen();
override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
//body: UserDetail(),
body: new Container(
padding: EdgeInsets.all(16.0),
child:StreamBuilder(
stream: bloc.validateUser,
builder: (BuildContext context, snapshot) {
if(snapshot.hasData){
return _moveToHomeScreen();
}
return Column(
children: <Widget>[
_createInputFields(),
_createRegisterButton(),
],
);
}
),
);
}
Just added return before _moveToHomeScreen();
I have a list of messages that I want to fill on init with a firebase collection.
import 'package:flutter/material.dart';
import 'package:my_first_flutter_app/chatmessage.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:logging/logging.dart';
final Logger log = new Logger('ChatScreen');
class ChatScreen extends StatefulWidget {
#override
State createState() => new ChatScreenState();
}
class ChatScreenState extends State<ChatScreen> {
final TextEditingController _chatController = new TextEditingController();
final List<ChatMessage> _messages = <ChatMessage>[];
#override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new Flexible(
child: ListView.builder(
padding: new EdgeInsets.all(8.0),
reverse: true,
itemBuilder: (_, int index) => _messages[index],
itemCount: _messages.length,
),
),
new Divider(
height: 1.0,
),
new Container(decoration: new BoxDecoration(
color: Theme.of(context).cardColor,
),
child: _chatEnvironment(),)
],
);
}
}
I tried to do this:
#override
Widget build(BuildContext context) {
Firestore.instance
.collection('chats')
.document('ROOM_1')
.collection("messages")
.getDocuments()
.then((snap) {
return new Column(
....
but I need to return a Widget, while this attempt returns a Future.
How I can fill the _messages array with data coming from my firestore collection on the initialization of my chat screen page?
If you just need to display all messages in a ListView from the firestore collection, then maybe you'll love the StreamBuilder widget. You can do something like this:
return new Column(
children: <Widget>[
new Flexible(
child: StreamBuilder(
stream: Firestore.instance.collection('chats').document('ROOM_1').collection('messages').snapshots(),
builder: (context, snapshot){
if (!snapshot.hasData){
return Container(
child: Center(
child: Text("No data")
)
);
}
return ListView.builder(
padding: EdgeInsets.all(8.0),
reverse: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (_, int index) {
return ChatMessage(text: snapshot.data.documents[index]["messageField"]); //I just assumed that your ChatMessage class takes a parameter message text
}
);
}
)
),
new Divider(
height: 1.0,
),
...
Note that in this example, I didn't use the _messages variable.
Nested scrolling?
I have three vertical pages in a PageView that I want to be able to flip between.
The pages consists of scrollable ListViews.
When a page is in focus the displayed list should be vertically scrollable, but when the list is scrolled to either end I want the pageView scrolling to take over the scroll behaviour and handle the page flipping to next page (like a web page with scrollable elements).
Example with scrolling lists below.
If the list scrolling is disabled the page flipping works.
How can I make both work?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: VerticalPageView(),
);
}
}
class VerticalPageView extends StatelessWidget {
VerticalPageView({Key key}) : super(key: key);
final PageController pageController = PageController();
final ScrollController scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: PageView(
controller: pageController,
pageSnapping: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
color: Colors.pinkAccent,
child: ListView.builder(
controller: scrollController,
itemCount: 100,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Text('page 0 item $index');
},
),
),
Container(
color: Colors.lightBlue,
child: ListView.builder(
controller: scrollController,
itemCount: 100,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Text('page 1 item $index');
},
),
),
Container(
color: Colors.lightGreen,
child: ListView.builder(
controller: scrollController,
itemCount: 100,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Text('page 2 item $index');
},
),
),
],
),
),
);
}
}
I think what you are trying to achieve is not impossible but needs a lot of study and care.
I have been trying to use several NotificationListener<ScrollNotification>'s to adapt the reaction depending on the position of the scroll but did not get anywhere.
Give a look to the Animation sample home.dart file in the Gallery App. It is full of insight in this regard.
The problem with this approach is basically what you say. When you disable programmatically the scrolling when reaching the end of the list to enable page scrolling, then you can switch to the other page but can't scroll the list in the other direction any more.
So, either you scroll the list or you scroll the pages, but not both.
Maybe you could add a GestureDetector() above everything and check on every drag update what is your situation below to configure accordingly the different scrollers.
Anyway, in case it is helpful to you I let you here an alternate solution using a CustomScrollView and SliverList's.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: VerticalPageView(),
);
}
}
class VerticalPageView extends StatelessWidget {
final ScrollController _scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: Colors.pinkAccent,
child: Text('page 0 item $index'),
);
},
childCount: 100,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: Colors.lightBlue,
child: Text('page 1 item $index'),
);
},
childCount: 100,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: Colors.lightGreen,
child: Text('page 2 item $index'),
);
},
childCount: 100,
),
),
],
),
);
}
}
I want to make a full screen dialog box. Dialog box background must be opaque.
Here is an example:
How to make like this in Flutter?
You can use the Navigator to push a semi-transparent ModalRoute:
import 'package:flutter/material.dart';
class TutorialOverlay extends ModalRoute<void> {
#override
Duration get transitionDuration => Duration(milliseconds: 500);
#override
bool get opaque => false;
#override
bool get barrierDismissible => false;
#override
Color get barrierColor => Colors.black.withOpacity(0.5);
#override
String get barrierLabel => null;
#override
bool get maintainState => true;
#override
Widget buildPage(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
// This makes sure that text and other content follows the material style
return Material(
type: MaterialType.transparency,
// make sure that the overlay content is not cut off
child: SafeArea(
child: _buildOverlayContent(context),
),
);
}
Widget _buildOverlayContent(BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'This is a nice overlay',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
RaisedButton(
onPressed: () => Navigator.pop(context),
child: Text('Dismiss'),
)
],
),
);
}
#override
Widget buildTransitions(
BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
// You can add your own animations for the overlay content
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: animation,
child: child,
),
);
}
}
// Example application:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Playground',
home: TestPage(),
);
}
}
class TestPage extends StatelessWidget {
void _showOverlay(BuildContext context) {
Navigator.of(context).push(TutorialOverlay());
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Test')),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Center(
child: RaisedButton(
onPressed: () => _showOverlay(context),
child: Text('Show Overlay'),
),
),
),
);
}
}
Well here is my implementation which is quite straightforward.
from first screen
Navigator.of(context).push(PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) =>
RedeemConfirmationScreen()));
at 2nd screen
class RedeemConfirmationScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white.withOpacity(0.85), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
.....
);
}
}
and here are the results.
Screenshot (Flutter's native dialog)
Call this method to show the dialog in fullscreen.
showGeneralDialog(
context: context,
barrierColor: Colors.black12.withOpacity(0.6), // Background color
barrierDismissible: false,
barrierLabel: 'Dialog',
transitionDuration: Duration(milliseconds: 400),
pageBuilder: (_, __, ___) {
return Column(
children: <Widget>[
Expanded(
flex: 5,
child: SizedBox.expand(child: FlutterLogo()),
),
Expanded(
flex: 1,
child: SizedBox.expand(
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('Dismiss'),
),
),
),
],
);
},
);
Note: This answer does not discuss making the modal transparent, but is an answer is for the stated question of "How to make a full screen dialog in flutter?". Hopefully this helps other that find this question through a search like I did, that don't need a transparent modal.
Create your modal dialog class:
class SomeDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: const Text('Dialog Magic'),
),
body: new Text("It's a Dialog!"),
);
}
}
In the class that needs to open the dialog, add something like this:
void openDialog() {
Navigator.of(context).push(new MaterialPageRoute<Null>(
builder: (BuildContext context) {
return new SomeDialog();
},
fullscreenDialog: true));
}
If fullscreenDialog above is true, then the app bar will have an "x" close button. If false, it will have a "<-" back arrow.
If you need to get the result of a dialog action, add a button to your dialog that returns a value when popping the navigation stack. Something like this:
onPressed: () {
Navigator
.of(context)
.pop(new MyReturnObject("some value");
}
then in your class opening the dialog, do capture the results with something like this:
void openDialog() async {
MyReturnObject results = await Navigator.of(context).push(new MaterialPageRoute<MyReturnObject>(
builder: (BuildContext context) {
return new SomeDialog();
},
fullscreenDialog: true));
}
You can use showGeneralDialog method with any widget extends from Material like Scaffold, Card, ..etc.
For example I am going to it with Scaffold like this:
showGeneralDialog(
context: context,
pageBuilder: (context, animation, secondaryAnimation) => Scaffold(
backgroundColor: Colors.black87,
body: //Put your screen design here!
),
);
And now you can set your design as a normal screen by using Scaffold.
Note: if you want to go back you can Navigator like this:
Navigator.of(context).pop(null)
Different ways to show fullscreen dialog
A. Material Dialog
showDialog<void>(
context: context,
useSafeArea: false,
builder: (BuildContext context) {
return const SomeScaffoldView();
},
);
B. Cupertino Dialog
showCupertinoDialog<void>(
context: context,
builder: (BuildContext context) {
return const SomeScaffoldView();
},
);
C. Custom Dialog
Flutter uses this under-the-hood when displaying dialogs.
Can customize transition animation with transitionBuilder, here's a random guide with example animations.
showGeneralDialog(
context: context,
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return const SomeScaffoldView();
},
);
Sample Scaffold View used in above snippets.
class SomeScaffoldView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Fullscreen Dialog'),
),
body: const Center(child: Text('Dialog Body')),
);
}
}
You can use AlertDialog with zero insetPadding like below:
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
insetPadding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
content: SizedBox.expand(
child: Column(
children: <Widget>[
SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Wrap(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Text(
"Sample type",
style: TextStyle(fontWeight: FontWeight.w700),
),
),
Expanded(flex: 1, child: Text(""))
],
),
],
)),
],
),
));
});
},
);
RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter. You may create reusable alert styles or add buttons as much as you want with ease.
Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();
RFlutter
It's easy to use! :)
you can do like this if you use popular flutter library getx
getx link
void showAlertDialogg(
String body,
String? confirmButtonText,
String? cancelButtonText,
Function(bool onConfirm, bool onCancel) clickEvent,
{barrierDismissible = false}) {
Get.dialog(
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextComponent(
body,
textAlign: TextAlign.center,
fontSize: textSmallFontSize,
fontWeight: titleFontWeight,
color: Colors.white,
),
Row(
//crossAxisAlignment : CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: OutlineButtonComponent(
text: cancelButtonText,
borderColor: kPrimaryColor,
onPressed: () {
Get.back();
clickEvent(false, true);
},
textColor: kPrimaryColor,
padding: EdgeInsets.fromLTRB(16, 16, 8, 16),
),
),
Expanded(
flex: 1,
child: ButtonComponent(
text: confirmButtonText,
buttonColor: kPrimaryColor,
onPressed: () {
Get.back();
clickEvent(true, false);
},
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(8, 16,16, 16),
),
),
],
)
],
),
barrierColor: Colors.black12.withOpacity(0.8),
useSafeArea: true
);
}
you can pas params as you want & call this method where you need it. it supports widget so you can setup the widget as you want.
Wrap your top-level widget with Navigator widget like so:
return Navigator(
pages: [
MaterialPage(
child: MainScreen(
child: widgets...
then call showDialog and because useRootNavigator is set to true in default it will use the root navigator that we added above the MainScreen