Flutter - SingleChildScrollView placed at the top of the screen when keyboard pops up - input

I want to make a simple screen that shows multiple TextFields in a Column, some content above and a button below. On my first attempt, without the SingleChildScrollView, I got an "renderflex overflowed" error which could be solved by placing the TextField within the SingeChildScrollView.
Now I have the problem that the SingleChildScrollView is placed way too high on my screen when I select any TextField and the keyboard pops up. I want it to stay basically just where it is since there is enough (yellow) room for the keyboard below the SingleChildScrollView.
This Gif shows how my app behaves.
This Gif shows the behavior that I would expect.
I tried applying code from the FlatApp-Flutter example to my app but was unable to find the part that actually fixes my issue.
Does anyone know how I can control how much the keyboard pushes the SingleChildScrollView up or how I can fix the issue? Thanks a lot.
Scaffold(
backgroundColor: Colors.yellow,
body: new SingleChildScrollView(
controller: _scrollController,
child: new Container(
margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
color: Colors.orange,
child: new Column(children: <Widget>[
new Container(
margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
height: 200.0,
width: 200.0,
color: Colors.grey,
child: new Center(
child: Text("Show some stuff"),
),
),
new Container(
color: Colors.blue,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
decoration: InputDecoration(labelText: "Label 1"),
),
new TextField(
decoration: InputDecoration(labelText: "Label 2"),
),
],
),
),
new RaisedButton(
child: const Text('Start'),
color: Theme.of(context).accentColor,
textColor: Colors.white,
elevation: 4.0,
splashColor: Colors.blueGrey,
onPressed: () {
// Perform some action
//button1(context);
},
),
]),
)));
}

I fixed it. When implementing my navigation, I unintentionally placed my Scaffold inside the body of another Scaffold, so my structure was like this:
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: ScaffoldShownInMyQuestion(),
)
Returning just the SingleChildScrollView without the second Scaffold wrapping around it and using that as body fixed my problem.

Related

How to remove red background on MultiValueRemove when focused

I want to style the MultiValueRemove container when it is focused (the one with the x inside to remove the chosen value). The backgroundColor changes to a red I don't want to have.
I can style the background when it is neither focused nor selected, but the "onHover" red background remains unaffected. Styling the background with the state isSelected, isFocused does not affect the red background when I hover on it.
multiValueRemove: (provided, state) => ({
...provided,
color: '#ffffff',
backgroundColor: '#6FC5C4',
borderRadius: 0,
}),
There's a trick for this one, isSelected and isFocused don't work in this case but you can use regular css hover state like this:
multiValueRemove: (base, state) => ({
...base,
color: "#fff",
backgroundColor: "#6FC5C4",
borderRadius: 0,
"&:hover": {
backgroundColor: "#6FC5C4",
color: "#fff"
}
})

how to have same size ratio of circle between different screen resolution in flutter

I tried to make a custom geofencing, to do this, I display an Url of googlemap and I add a stack with a circle, I had adjust the size with a coefficient to have the good representation. problem my coefficient isn't dynamic with any screen device
Container ( padding: const EdgeInsets.only(top :160.0),
child : new Card(
elevation: 2.0,
child: new Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
new Container(
child: new Image.network(statichomeMapUri.toString()),
),
FractionalTranslation(
translation: Offset(0.0, 0.0),
child: new Container(
alignment: new FractionalOffset(0.0, 0.0),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.orangeAccent.withOpacity(0.5),
width: perimetre/3.4, // need to be dynamic
),
shape: BoxShape.circle,
),
),
),
new Container(
//padding: const EdgeInsets.only(bottom:10.0),
margin: new EdgeInsets.all(140.0),
child : Icon(Icons.home, color: Colors.white, size: 25.0),
),
],
),
),
)
Get width of the mobile screen using
MediaQuery.of(context).size.width
And set whatever ratio you want to set

React-native equivalent of Flutter's SafeArea Container?

I am trying to wrap my app in a container to prevent content from getting underneath the status bar. I don't want to have to write platform specific code; the same container should work for both android and ios.
Flutter has a container called SafeArea which takes props: top, bottom, right, left, and child. Down below, you can see how SafeArea can be configured to avoid the status bar.
return new SafeArea(
top: true,
bottom: false,
right: false,
left: false,
child: new Stack(
children: <Widget>[
new Container(
color: Colors.green,
),
new Scaffold(
backgroundColor: const Color(0x00000000),
appBar: new CustomTabBar(
pageController: _pageController,
pageNames: pages.keys.toList(),
),
body: new PageView(
controller: _pageController,
children: pages.values.toList(),
),
),
],
),
);
The closest react-native equivalent, that I could find, was SafeAreaView but it didn't work on my Galaxy S7. Here is the code that I ran:
import React, { Component } from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
import Navigator from './Navigator'
export default class App extends Component {
render() {
return (
<SafeAreaView style={styles.safeArea}>
<Navigator />
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
safeArea: {
flex: 1,
backgroundColor: '#ddd'
},
});
I don't think it is designed to fix status bar issue on anything other than the iphone X; however, as of 8 days ago (at the time of writing), it seems that it isn't even working for ios anymore.
Is there any other way to do this?

Multiline window title in titanium

I am feverishly trying to make the title of a window multiline.
I have a fairly long title and need to be able to see the whole title.
Right now the title just gets cut of and has three dots if it is longer than the window allows
But I need it to break into two lines if it is too long
My current markup looks like:
/////// create first starting window ////////
var startWin = Titanium.UI.createWindow({
title: 'Some really long title that has to be wrapped',
navBarHidden: false,
exitOnClose: true,
barImage: '/images/header_background.png',
titleAttributes: {
color: '#FFF',
font: {
fontSize: 20,
minFontSize: 15,
fontWeight: 'bold',
wordWrap: true
}
}
});
Or can I maybe use a multiline label?
Anyone an idea ?
Thanx
My working code thanx to Sebastian
page_title = Ti.UI.createLabel({
text: 'Algorithmen',
height: 80,
left: 60,
right: 60,
textAlign: 'center',
color: '#fff',
font: {
fontSize: 18,
fontWeight: 'bold',
wordWrap: true
}
}),
startWin = Titanium.UI.createWindow({
titleControl: page_title,
navBarHidden: false,
exitOnClose: true,
barImage: '/images/header_background.png'
});
You can set the window.titleControl with a label
var startWin = Titanium.UI.createWindow({
titleControl: Ti.UI.createLabel({
text:'Some really long title that has to be wrapped'
font:{
fontSize: 20,
minFontSize: 15,
fontWeight: 'bold'
}
}),
navBarHidden: false,
exitOnClose: true,
barImage: '/images/header_background.png',
});
I have never managed to do this, so I have always hidden the title bar and created my own, with android you will need to create a custom theme to hide the title bar, also there is no title bar on iOS.
I use alloy mainly and created a nav control view that I added by reference to each page, then set the title and menu options in that.

Appcelerator: How to create a proper Back Button image?

I purchase a theme from AppVaultDesign and it comes with a back button image that looks like this http://cl.ly/2h3x0j0p2v262k0k2U0e
However, when I add it to the code, the alignment looks wrong. The text is too close to the button. http://cl.ly/393s2D0f0v3P0m3H150O
When I tried to use textAlign: 'right', it looks like this http://cl.ly/0Z2d1Y0f3q1O100c0b3f No idea why is like that. Frustrating. It doesn't goes up when I do textAlign: 'center' or textAlign: 'left'.
So here's the code, I'm using. Any help?
var backButton = Ti.UI.createButton({
backgroundImage: 'images/back.png',
font: { fontSize: 13, fontWeight: 'bold' },
height: 28,
title: "Back",
width: 51
});
backButton.addEventListener('click', function(){
navGroup.close(self);
});
self.leftNavButton = backButton;
I think it should be an easy one. It just frustrating that I can't get it working right. It will be much appreciated, if someone can post me the working code for the button and the image. That way, I can try to see where went wrong as well.
Many thanks, Mickey
The simplest way, probably, is to add a whitespace before " Back"
var backButton = Ti.UI.createButton({
backgroundImage: 'images/back.png',
font: { fontSize: 13, fontWeight: 'bold' },
height: 28,
title: " Back",
width: 51
});