My problem here is that all the tabs working unreliable, sometimes a view is changing sometimes nothing happens.
This is my code:
DefaultTabController(
length: 3,
child: Scaffold(
body: Column(
children: <Widget>[
TabBar(
indicatorColor: Colors.lightGreen,
labelColor: Colors.lightGreen,
tabs:[
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: ()async{
},
child:SizedBox(
width: double.infinity,
child: Stack(
children: <Widget>[
const Positioned(
child: Tab(text: 'Page1',),
),
],
),
),
),
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: ()async{
},
child: SizedBox(
width: double.infinity,
child: Stack(
children: <Widget>[
const Positioned(
child: Tab(text: 'Page2'),
),
],
),
),
),
GestureDetector(
behavior: HitTestBehavior.translucent,
child:SizedBox(
width: double.infinity,
child: Stack(
children: <Widget>[
const Positioned(
child: Tab(text:'Page3'),
),
],
),
),
)
]
),
Expanded(
child: TabBarView(
children: [
MainView1(),
MainView2(),
MainView3()
],
),
)
],
)
),
),
Iam using almost the some codestructure in a different view where the tabbar is on the bottom, it works perfectly.
Let me know, if you need more information!
Thanks
Related
I'm trying to implement back button with webview in my screen but not really sure why it's looking like this so I'll be really appreciated if I can get any help or suggestion.
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 50, bottom: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
InkWell(
onTap: () => Navigator.pop(context),
child: SvgPicture.asset(
iconsPath + "arrow-left.svg",
color: Color(0xFF282828),
width: 20,
),
),
SizedBox(width: 20),
],
),
),
Container(
color: Colors.blue,
child: WebView(initialUrl: "https://google.com", javascriptMode: JavascriptMode.unrestricted
)
)],
),
),
);
}
get Container height & width value.
change your code to this.
Container(
color: Colors.blue,
height: 200,
width: double.infinity,
child: WebView(
initialUrl: "https://google.com",
javascriptMode: JavascriptMode.unrestricted,
),
),
It looks fine when the keyboard is hidden but when displayed the container is on top of it and it should be behind (not related to the content of the container):
SafeArea(
child: Stack(
children: [
Column(
children: <Widget>[
Expanded(child: child!),
Container(
color: Theme.of(context).primaryColorDark,
height: 90.0,
child: NativeAdWidget(),
),
],
),
],
),
)
If you use Scaffold above your code, change it with Material widget, and the problem will gone. Just like this:
return Material(
child: SafeArea(
child: Stack(
children: [
Column(
children: <Widget>[
Expanded(child: child!),
Container(
color: Theme.of(context).primaryColorDark,
height: 90.0,
child: NativeAdWidget(),
),
],
),
],
),
),
);
I am wondering why is it that my GridView is not rendering the widgets. I am trying to render the buttons in two columns and 2-3 rows.
The code is the following:
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
GridView.count(
shrinkWrap: true,
primary: true,
crossAxisCount: 2,
children: <Widget>[
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Wifi')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
],
)
],
)));
}
}
I get an error, in the android emulator it renders yellow and black strips instead of the buttons with the corresponding images.
Wrap it with Container ( height: .. , width : double.infinity )
Or with SizedBox
Try removing the Column widget above the GridView
Theme(
data: Theme.of(context).copyWith(
canvasColor: ColorPallete().lightBlack,
),
child: Drawer(
child: ListView(
children: <Widget>[Column(
children: <Widget>[
Container(
height: 204.0,
child: DrawerHeader(
child: Stack(
children:<Widget>[
Center(
child: Column(
children: <Widget>[
DottedBorder(
padding: EdgeInsets.all(5.0),
borderType: BorderType.Circle,
color: ColorPallete().white,
child: Container(
height: 74.38,
width: 74.38,
child: CircleAvatar(
backgroundColor: Color(0xFFDADADA),
),
),
),
SizedBox(height: 11.0,),
Text('Иван Иванович Иванов',style: TextStyle(
fontSize: 14.0,color: ColorPallete().white
),)
],
),
),
Positioned(
bottom: 0,
right: 0,
child: Row(
children: <Widget>[
Text('Выйти',style: TextStyle(fontSize: 14.0,color: ColorPallete().yellow),),
SizedBox(width: 7.0,),
Icon(Icons.arrow_forward,color: ColorPallete().yellow,size: 18.0,),
],
),
)
]
),
),
),
Use a Container widget as your drawer, then a stack of your background image and the drawer's items should be the container's child.
Scaffold(
...,
drawer: Container(
child: Stack(
children: <Widget>[
Image.asset("myBackgroundImage.png"),
ListView(
children: <Widget>[
CircleAvater(),
ListTile(),
ListTile(),
...
],
),
],
),
),
);
I have implemented tab layout which consists of two tabs, each tab view has a listview, container with tabview & listview should occupy space upto bottom as of now i place static value of 400, so only up to 400 the listview appears, i need the list view to be appeared up to bottom. can you please me to fix this
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
child: new TabBar(
controller: _controller,
labelColor: Colors.deepOrange,
tabs: [
new Tab(
icon: const Icon(Icons.description),
text: 'ABC',
),
new Tab(
icon: const Icon(Icons.assignment),
text: 'XYZ',
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
height: 400.0,
child: new TabBarView(
controller: _controller,
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
),
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
),
],
),
),
),
],
),
);
}
I have Used Expanded & Flex Widgets which solved the problem
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
child: new TabBar(
controller: _controller,
labelColor: Colors.deepOrange,
tabs: [
new Tab(
icon: const Icon(Icons.description),
text: 'Current Openings',
),
new Tab(
icon: const Icon(Icons.assignment),
text: 'Applied Jobs',
),
],
),
),
),
flex: 1,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0,bottom: 10.0),
child: Container(
color: Colors.white,
child: new TabBarView(
controller: _controller,
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
],
),
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
],
),
],
),
),
),
flex: 9,
),
],
),
);
}