Is there a way to stop CustomScrollView from automatically scrolling down when Keyboard is activated? - android-layout

It seems that whenever I focus on a TextField (that sits inside a SliverPersistentHeader) SliverList+SliverPersistentHeader scrolls down. I have created some mockups of what I mean below:
So in this mockup, the user starts off at the first layout, scrolls up to continue viewing the lsit and then when they click on the TextField, the whole thing shifts down. Any way to stop that?
I have also attached my basic Scaffold code for your perusal:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Consts.coMainBackground,
resizeToAvoidBottomInset: false,
body: CustomScrollView(
slivers: <Widget>[
_sliverAppBar(),
_makeHeader(),
BlocBuilder<AllPersonsBloc, AllPersonsState>(
builder: (context, state) {
if (state is AllPersonsLoading) {
return _buildLoading();
} else if (state is AllPersonsLoaded) {
return _sliverList(context, state.persons);
} else if (state is AllPersonsError) {
return _buildErrorMessage(state.message);
} else {
return _buildErrorMessage('Unknown error!');
}
},
),
],
),
);
}
the _makeHeader creates the SliverPersistentHeader and the rest I think should make sense based on names.
Your help would greatly appreciated :)
Thanks!

Got it...
return SliverAppBar(
automaticallyImplyLeading: false,
backgroundColor: Consts.coForestGreenBackground,
expandedHeight: 207,
titleSpacing: 0,
elevation: 0,
floating: false,
pinned: false,
snap: false,
flexibleSpace: FlexibleSpaceBar(
Note that the item is not pinned/floated/snapped. Then its important that the input (TextField in this case) has a scrollPadding (top) of 0.
Your scaffold will ALSO need an appbar. So technically you have an appbar and a SliverAppBar but the SliverAppBar is just to wrap the flexibleSpace.
Or rather, zero after any padding on the element it self. In my case its 40 since the TextField has a top padding of 30 and another 10 from the element that contains it etc.

Related

How to write condition statements in flutter?

I wanted to learn how can I apply "if" condition in my flutter code? As I am new to dart language coding.
Suppose in a code like below, i want to add condition that if the counter's value is 1 then "You have pushed the button $_counter time" else "You have pushed the button $_counter times"
children: <Widget>[
new Text(
'You have pushed the button $_counter times:',
)/*,
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),*/
]
P.S. its just a simple example for me to understand how to use if condition in flutter.
For such simple cases you can use the ternary if ?: inside string interpolation:
new Text(
'You have pushed the button $_counter time${_counter != 1 ? 's' : ''}:',
)
for the case of the conditions you have just a single condition then you can use the basic ternary operators,
child: Text(
'{fee=="FREE"?"Free":fee}',
),
But if you have multiple conditions or value that need to compare from the index position(i.e. you have to fetch value and then need to put in condition) in listview then you can add method as your text value in your Widget as follows:
child: Text(
'${checkForPrice(index)}',
),
),
checkForPrice(int index) {
String strFee = data['payload']['webinar'][index]['fee'];
String finalFee = "";
if (strFee == "FREE") {
finalFee = 'FREE';
} else {
finalFee = '\$ ${data['payload']['webinar'][index]['fee']}';
}
return finalFee;}
This will definitely help you in showing data with multiple conditions.
at the first time i tried flutter i have no idea what dart language is but after some browsing i found this useful documentation. You can find anything you looking for right there including if statement that you are asking about. But i can tell you the if statement works the same as any other language such as JavaScript, Java, etc.
Edit: here i give you some example how to use it in flutter
Future<Null> toTheHomeScreen() async {
await _signInWithGoogle();
SharedPreferences sprefs = await SharedPreferences.getInstance();
if (sprefs.getString('idToken').isNotEmpty) {
new Future.delayed(new Duration(seconds: 3), () {
new CircularProgressIndicator();
Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext context) {
return new HomeScreen();
}
)
);
});
} else {
Navigator.of(context).pop();
}
}
the if statement check if there is any key named 'idToken' stored in sharedpref, if it not empty user will redirect to home page.
I hope this will help you.

how can i disable default menu in gojs

i'm new to gojs,
when i press my mobile's screen (#myDiagram div) in page , some default menu shows up but i don't want it.
i try to disable it by setting "toolManager.isEnable":false, but didn't work
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialAutoScale: go.Diagram.Uniform,
initialContentAlignment: go.Spot.Center,
allowDrop: false,
allowMove: false,
"toolManager.isEnable":false,
nodeSelectionAdornmentTemplate:
$(go.Adornment, "Auto",
{ layerName: "Grid" },
$(go.Placeholder)
),
layout: // use a custom layout, defined below
$(GenogramLayout, { direction: 90, layerSpacing: 30, columnSpacing: 10 })
});
how can i disable it?
here is what shows after press
As described in https://gojs.net/latest/intro/contextmenus.html#DefaultContextMenuForTouchEnabledDevices, you can just set a ContextMenuTool property to null. For example, during the initialization of a Diagram:
$(go.Diagram, . . .,
{
"contextMenuTool.defaultTouchContextMenu": null
})

How to limit visible rows in a JList in groovy

I'm building a small dialog.
I using Groovy from a gradle build script.
The dialog consists of a JList, a JTextField and a JButton.
The list is populated with names of files. There are many files so I only wanna show 5 files together with a scollbar to go thru the list.
I have tried to set visibleRowCount but it still shows all rows.
new SwingBuilder().edt {
dialog(modal: true, // Otherwise the build will continue running before you closed the dialog
title: 'Enter program name',// Dialog title
alwaysOnTop: true, // pretty much what the name says
resizable: true, // Don't allow the user to resize the dialog
locationRelativeTo: null, // Place dialog in center of the screen
pack: true, // We need to pack the dialog (so it will take the size of it's children
show: true // Let's show it
) {
vbox { // Put everything below each other
label(text: "Program Name:")
list(id:"programName", items: progNames, visibleRowCount: 8)
label(text: "Start Rule Name:")
input = textField(id: 'ruleName', text: startRuleName)
button(defaultButton: true, text: 'OK', actionPerformed: {
testProgram = programName.selectedValuesList
startRuleName = ruleName.text
dispose() // Close dialog
})
}
}
}
How can I limit the number of visible rows?
You just need to wrap the call to list in a scrollPane node, ie:
new groovy.swing.SwingBuilder().edt {
dialog(modal: true, // Otherwise the build will continue running before you closed the dialog
title: 'Enter program name',// Dialog title
alwaysOnTop: true, // pretty much what the name says
resizable: true, // Don't allow the user to resize the dialog
locationRelativeTo: null, // Place dialog in center of the screen
pack: true, // We need to pack the dialog (so it will take the size of it's children
show: true // Let's show it
) {
vbox { // Put everything below each other
label(text: "Program Name:")
scrollPane {
list(id:"programName", items: progNames, visibleRowCount: 8)
}
label(text: "Start Rule Name:")
input = textField(id: 'ruleName', text: startRuleName)
button(defaultButton: true, text: 'OK', actionPerformed: {
testProgram = programName.selectedValuesList
startRuleName = ruleName.text
dispose() // Close dialog
})
}
}
}

jvectormap how to keep the current color when region is selected?

Here is my problem, i have a scale of colors for different countries. When I select a country, its color change and I don't want to.
I just want to use the stroke attribute (without the fill attribute) to display selected regions.
Problem is that the default color for fill is "yellow". I tried to set the fill attribute for selected region to "none" but it erases my current color when selected.
Have you guys a way to solve this issue?
$('#worldMap').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
scale: ['#C1E712', '#5F7209'],
values: countryHitCounts,
}]
},
regionStyle: {
selected: {
fill: <= is there a keyword to not change the color when selected??
stroke: 'red',
"stroke-width": 1,
},
},
regionsSelectable: true,
selectedRegions: countrySelected,
onRegionSelected: function (event, code, isSelected, selectedRegions) {
//some code...
},
});
EDIT: in the minify js code source file, I changed the default style for selected region.
selected:{fill:"yellow"} by selected:{}
It works but if you have a better solution without changing the source file, I take it.
I ran into the same problem as well, what seemed to work for me was to override the selected fill with an invalid hex code. ex:
regionStyle: {
selected: {
fill: '#Z34FF9'
}
},
This seemed to register it as an override, but not actually apply it, leaving my original color.
You juste have to prevent the default action of the click :
,
onRegionClick: function(event, code){
event.preventDefault();
// your "some code" of region selected
}
Norrec's answer did not work for me, but I can override the class defaults just before creating the map. No source modification needed!
jvm.Map.defaultParams.regionStyle.selected = {};
map = new jvm.Map({
map: 'world_mill',
container: jQuery('#world-map'),
regionStyle: {
initial: {
fill: "#F6F6F6",
},
selected: {
stroke: '#FF00FF',
"stroke-width": 0.5,
}
},
}

Ext js 3.4 window add/remove Component error

We are using extjs 3.4. The purpose is to replace a component in a Ext.Window. Even if
there is no error when we remove the old and add the new component, when trying doLayout() the error
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
occurs.
The code that creates the window is:
function createWindowConf(id, winconf, items) {
var conf = {
id: id,
title: winconf.title,
iconCls: winconf.icon,
x : winconf.xpos,
y : winconf.ypos,
width : parseInt(winconf.xsize),
height : parseInt(winconf.ysize),
layout : winconf.layout, //'border',
border : false,
resizable : winconf.resizable,
manager: windows,
shadow: false,
closable: true,
items: items
};
var win = new Ext.Window(conf);
win.render(desktopEl);
return win;
};
The items are a Ext.grid.GridPanel and a Ext.form.FormPanel.
According to user's current selection in grip (component in position 0) the old form should be removed and a new should be added (component in position 1).
The code that creates the form is:
var theConfig = {
id: config.yid,
bodyStyle: 'padding:5px 5px 0',
width: 370,
maxWidth: 370,//not resizable
minWidth: 370,
layout: 'form',
margins: '0 0 0',
region: 'east',
split: true,
colapsible : true,
trackResetOnLoad: true,
autoScroll: true,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
items: [],
buttons: [scopeDetails.updateButton, scopeDetails.submitButton]
};
this.detailsForm = new Ext.form.FormPanel(theConfig);
and the items added afterwards.
The code that updates (adds/removes) components from the window is:
this.updateWin = function(moduleForRemoveId, form, idWin) {
var win = this.getWindow(idWin);
if (win != null) {
win.remove(moduleForRemoveId);
win.add(form);
win.doLayout();
}
}
and produces the error in win.doLayout().
By removing all components and add the add the new ones:
win.removeAll();
win.add(this.grid);
win.add(this.form);
win.doLayout();
we have the same error.
Any suggestion will be really helpful since more than 3 days spent for that error
I'm pretty sure the error comes from something else rather than the component remove/add.
I created a simple testcase which defines a window with a form and a grid, and a button which replaces everything with a panel. And it works.
Your code is incomplete. You should provide a full example.
Have you tried to debug it yourself? Enable "pause on uncaught exceptions" on your Chrome script debugger the reproduce the bug. You will get a stack trace of what happened, giving you hints on what is wrong. Of course include ext-all-debug.

Resources