I want to build a UI where I have some fixed widgets (visible on all tabs) on top of my screen and then below them I want a TabBarView (with the tab bar at the bottom), is this possible without making your own tab widget or does the TabBarView have to take the whole screen?
Think I found the answer here:
https://camposha.info/course/flutter-widgets/lesson/flutter-nested-tabbar/
This is how I did it:
return Scaffold(
body: Stack(
children: [
Container(
alignment: Alignment.topCenter,
child: Image.asset('assets/images/logo.png',
fit: BoxFit.fitWidth, width: Get.width / 2.5)),
Align(
alignment: Alignment.bottomCenter,
child: DraggableScrollableSheet(
initialChildSize: 0.7,
minChildSize: 0.7,
builder:
(BuildContext context, ScrollController scrollController) =>
SingleChildScrollView(
controller: scrollController,
child: DefaultTabController(
initialIndex: 0,
length: 2,
child: Column(
children: [
TabBar(tabs: <Widget>[
Tab(child: Text('Text1')),
Tab(child: Text('Text2'))
]),
Container(
height: MediaQuery.of(context).size.height,
child: TabBarView(
children: <Widget>[Widget1(), Widget2()],
),
)
],
)),
),
),
),
],
));
Related
I have a form widget which holds the Column as its child. The reason of Column widget is to have username and password fields one after another-password field in new line. In addition, I need to have username and password logos next to the respective fields, so I decided to use Row widget which will hold the Icon and TextFormField. However, flutter provides me error. Can someone please help?
Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 30),
child: TextFormField(
enabled: formFieldEditable,
validator: emptyNullValidatorForFormField,
decoration: InputDecoration(
focusedBorder: _inputFormFieldOutlineInputBorder(
borderSideWidth: ProjectSpecifics.signinScreenInputBorderWidth,
borderSideColor: ProjectSpecifics.signInPageInputBorder,
),
enabledBorder:_inputFormFieldOutlineInputBorder(
borderSideWidth: ProjectSpecifics.signinScreenInputBorderWidth,
borderSideColor: ProjectSpecifics.signInPageInputBorder,
),
/*icon: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xFF5663FE),
width: 2,
),
borderRadius: BorderRadius.circular(5),
),
child: const Icon(
Icons.email,
color: ProjectSpecifics.signInPageInputBorder,
),
),*/
labelText: "EMAIL"),
onChanged: (val) {
emailVariableReference = val;
},
),
),],
),
Wrap TextFormField with Flexible or Expanded widget.
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.radar),
Expanded(child: TextFormField()),
],
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.abc),
Flexible(child: TextFormField()),
],
),
],
),
I am working on a drawing app. I can get a screenshot of a widget using RepaintBoundary but I need to update it with a button which is outside. In my case, I can clear the list of points with a FlatButton but my Container is not clearing because of RepaintBoundary I need to get a screenshot of my Container without RepaintBoundary or I should update my Container from outside they both works for me. Thanks.
return
SingleChildScrollView(//physics: NeverScrollableScrollPhysics(),
child: Column(
children: <Widget>[
RepaintBoundary(
key: _signKey,
child: new Container(
width: 100.0 * MediaQuery.of(context).devicePixelRatio ,
height: 150.0 * MediaQuery.of(context).devicePixelRatio,
color: Colors.black12,
child: GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
RenderBox object = context.findRenderObject();
Offset _localPosition =
object.globalToLocal(details.globalPosition);
points = new List.from(points)
..add(_localPosition);
});
},
onPanEnd: (DragEndDetails details) => points.add(null),
child: new CustomPaint(
painter: new DrawingPainter(points: points),
size: Size.infinite,
),
),
),
),
Row(
children: <Widget>[
FlatButton( //Button to clear container
padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
color: Colors.redAccent,
textColor: Colors.black,
onPressed: (){
setState(() {
points.clear();
});
},
child: Text('Sil'),
),
],
),
],
),
);
I'm trying to make the Row containing "Short label" wide as the Row below it.
Putting mainAxisSize: MainAxisSize.max isn't enought, since it should match parent width, based on this answer:
The equivalent of wrap_content and match_parent in flutter?
Tried using Expanded outside row, but it causes an error, same using SizedBox.expand.
Can't use constraints like width: double.infinity because the row on the left (// Left part in code) must take only the space it needs, the rest must be taken from the yellow container.
Screenshot and code below:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Row(
children: [
// Left part
Row(
children: [
Column(children: [
// Error using Expanded ...
//Expanded(
//child:
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
Text('Short label:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
//),
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
Text('Long text label:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
]),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
],
),
],
),
),
),
);
}
EDIT (old, check final edit below)
IntrinsicWidth was the correct way to give the rows the same width, as #mohandes suggests.
But it does not work if i add another row below (the one containing the checkbox in the image below), wrapping the rows inside two IntrinsicWidth widgets.
The checkbox row should be wide as the upper one in order to align the checkbox on the left.
In the first row i added an orange container on the right as a placeholder for a similar block.
Screenshot and code below:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Row(children: [
Column(
children: [
IntrinsicWidth(
child: Row(children: [
IntrinsicWidth(
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Short label 1:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Short label 123456:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
]),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 40,
height: 40,
color: Colors.orange,
),
)
]),
),
IntrinsicWidth(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Checkbox(value: true, onChanged: null),
Text('Checkbox'),
],
),
),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
]),
],
),
),
),
);
}
EDIT 2
IntrinsicWidth works fine, the problem with the code above in the first Edit is that i used IntrinsicWidth as wrapper for child widgets (the rows) instead of parent widget (the outer column).
Try adding the column that contains rows (long and short) in intrinsic width widget .
Intrinsic width make all children width as longest child width.
By changing the layout to Row [ Column Column Container ] we get
Code:
Widget alternateLayout() {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.blue[100],
child: Text('Short label:'),
),
Container(
color: Colors.green[100],
child: Text('Long text label:'),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 20,
width: 20,
color: Colors.red,
),
Container(
height: 20,
width: 20,
color: Colors.red,
),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
],
);
}
I am not able to separate two items with space so that first item appears at the start of row and second at the end of it.
Container(
margin: EdgeInsets.all(12.0),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
InkWell(
child: Text("Select your service",
style: profileValueTextStyle),
onTap: () {
print("-----" + result);
}),
Icon(Icons.close)
],
),),
I want to separate the text and close icon.
You should wrap your InkWell into a Expanded Widget:
Container(
margin: EdgeInsets.all(12.0),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Expanded( //Here's the widget you need
InkWell(
child: Text("Select your service",
style: profileValueTextStyle),
onTap: () {
print("-----" + result);
}),
),
Icon(Icons.close)
],
),),
It's gonna "push" the Icon to the end of the row.
Hope it's helps !!
How do I change the size of a FloatingActionButton?
I've tried increasing the size of the icon, but it doesn't affect the surrounding circular shape. I've also tried wrapping the button in a PreferredSize widget, but this had no effect.
Wrap the FloatingActionButton in a Container, specifying the width and height.
You can override the size of the icon to make it look more natural:
Container(
width: 80.0,
height: 80.0,
child: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add,
size: 30.0,
),
),
);
I was pleased to discover the notch size is adjusted accordingly if you are embedding this button in a BottomAppBar.
Container(
height: 46.0,
width: 46.0,
child: FittedBox(
child: FloatingActionButton(
onPressed: () {
"your code"
},
child: Icon(Icons.arrow_forward_ios),
backgroundColor: PrimaryColor,
),
),
),