How can make none scrollable header and scrollable body in flutter? - flutter

I am trying to build a project, with none scrollable header and scrollable body. SliverAppbar is the choice first but if I move body than I lost the header. Also I can use Slidabele Tile. The SliverPersistentHeader is my second choice but I can use Slidabele Tile. My problem is shown below picture. The main.dart Header must not scroll and body must contains hard coded Slidable Tile. How can make none scrollable header and scrollable body in flutter?

You should use appBar: AppBar(... inside of you Scaffold.
so MaterialApp->Scaffold->(AppBar and listview).
Exaple code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("This is the title"),
),
body: ListView(
children: <Widget>[
Text("This is text 1"),
Text("This is text 2"),
Text("This is text 3"),
Text("This is text 4"),
Text("This is text 5"),
Text("This is text 6"),
Text("This is text 7"),
Text("This is text 8"),
Text("This is text 9"),
Text("This is text 10"),
Text("This is text 11"),
Text("This is text 12"),
Text("This is text 13"),
Text("This is text 14"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
Text("This is text 15"),
],
),
),
);
}
}

Related

How to disable Scroll Effect in WebViewX Flutter

I want to disable WebViewX Scroll Effect. Unable to scroll when the cursor is on Webview Area. I want the whole page to scroll on the web. Any other package which can disable the scroll effect is also appreciated. Wanted this HTML in Android, iOS, and WEB
Check Video
Build Method
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 50),
_buildWebView(),
const SizedBox(
height: 500,
)
],
),
),
);
}
WebView Used
return WebViewX(
initialContent: html,
initialSourceType: SourceType.html,
height: 500,
width: MediaQuery.of(context).size.width,
);
},

Flutter CupertinoPicker UI breaks and children are not displayed properly

I am quite new to Flutter and was trying to implement the CupertinoPicker Widget.
When I press a button I want to be able to replace the current CupertinoPicker with another one.
Unfortunately when I try this the text from the second UI is quite distorted.
Here are some images to help you understand my issue.
What exactly am I missing here?
Here is my code
Code on Github
Just wrap the Center widget with a Container widget. Here's a screenshot of the app and the code.
Widget _second() {
return Container(
child: Center(
child: CupertinoPicker(
selectionOverlay: null,
onSelectedItemChanged: (value) {},
itemExtent: 30,
children: [
Text("City 1"),
Text("City 2"),
Text("City 3"),
Text("City 4"),
Text("City 5"),
Text("City 6"),
Text("City 7"),
],
),
),
);
}

Adding item to widget dynamically doesn't update widget's height

When I add a widget to a sliding_up_panel widget dynamically after the initial load, the panel's height does not increase, meaning that the bottom of the panel gets cut off and I get the A RenderFlex overflowed by 27 pixels on the bottom. error.
What can I do to ensure the panel updates its height in this case please?
To Reproduce
Add a widget to the panel dynamically via the condition ? widget : widget logic. For example:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: Stack(
children: <Widget>[
Center(child: Text("This is the Widget behind the sliding panel"),),
SlidingUpPanel(
panel: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
myFirstVariable ? Text("This is a sliding Widget") : Container(),
mySecondVariable ? Text("This is another sliding Widget") : Container(),
],
),
)
)
],
)
);
}
Thanks so much!
the SlidingUpPanel widget doesn't adjust its height according to its children.
A solution to your problem would be add a SingleChildScrollView to your panel content and use the panelBuilder instead of the panel property.
The panelBuilder takes the burden of managing scrolling and sliding conflicts by providing you a controller that you can feed to your SingleChildScrollView, your code will change to be like the following :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: Stack(
children: <Widget>[
Center(child: Text("This is the Widget behind the sliding panel"),),
SlidingUpPanel(
panelBuilder:(sc) => SingleChildScrollView(
controller: sc,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
myFirstVariable ? Text("This is a sliding Widget") : Container(),
mySecondVariable ? Text("This is another sliding Widget") : Container(),
],
),
)
)
],
)
);
}
Like this, you won't have any overflow issues, and when the content of the panel overflows the SingleChildScrollView will become scrollable.
hope this helps:
use a controller,
You can control the height of the panel depending on the items on the list (0.0 to 1.0). Ensure to update the UI once you add a new item.
use a List
This will solve the renderOverflow you mentioned
/// just for the example
List<Widget> items = <Widget>[];
//adding items
addItem() {
items.add(Container(
constraints: BoxConstraints(maxHeight: 200, minHeight: 200),
color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
));
/// if you know in advance the height of the widgets been rendered: 200
/// if you know in advance the height of the panel: 500, or context.size.height / 2 (which would be 50% of screen) asume 600
///
/// increase panel height panel according to the number of items
///
_pc.panelPosition =
(items.length * 200) / 600 > 1.0 ? 1 : (items.length * 200) / 600;
/// Hey
/// SET State after adding the item
/// to refresh UI
}
Widget _scrollingList(ScrollController sc) {
return ListView.builder(
controller: sc,
itemCount: items.length,
itemBuilder: (context, index) {
return items[index];
},
);
}
PanelController _pc = new PanelController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
floatingActionButton: FloatingActionButton(
onPressed: addItem,
),
body: Stack(
children: <Widget>[
Center(
child: Text("This is the Widget behind the sliding panel"),
),
SlidingUpPanel(
controller: _pc,
panelBuilder: (ScrollController sc) => _scrollingList(sc),
),
],
));
Plugin has the methods: minHeight and maxHeight to do the work. I think is not posible change it dynamically without set that attributes.

How do I make bottomsheet swipe up from anywhere in scaffold flutter

I am trying to make a launcher in flutter, however I cannot figure out how to make a drawer that can be swiped up from the home screen, like in other launchers like nova or poco or many others. I understand that the app drawer closely matches a bottom sheet, but bottom sheets in flutter need to be first tapped on them and then dragged. How do I drag a widget up from anywhere on the scaffold?
To obtain the functionality you're looking for use this package: flutter slider
Example:
with code as simple as this you can obtain the slideup bottom sheet like functionality:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: SlidingUpPanel(
panel: Center(
child: Text("This is the sliding Widget"),
),
body: Center(
child: Text("This is the Widget behind the sliding panel"),
),
),
);
}

How do a Bottom Menu that expand - Flutter

How do I this bottom bar menu in Flutter?
bottom menu hidden
bottom menu opened
There is a bar at bottom and when tapped, the bar is opened with a list and a button
You can use BottomSheet here's example :
void _modalBottomSheetMenu(BuildContext context){
showModalBottomSheet(
context: context,
builder: (builder){
return ListView(
children: [
ListTile(
leading: CircleAvatar(),
title: Text("John Doe"),
subtitle: Text("Nearby"),
),
RaisedButton(child: Text("Button"), onPressed: () => print("Pressed"))
]
);
}
);
}
For more information Flutter Documentation , Medium Guide
Identify status e.g. isExpanded
then display your cells(Widgets) based on that. Either you can use Visibility widget,
Visibility(
visible: (isExpanded),
child: Row(
children: <Widget>[
Image.asset('yourImage')
Text("some text"),
],
),
)
Or you can just use a condition like,
if (a == b)
Row(
children: <Widget>[
Image.asset('yourImage')
Text("some text"),
],
),