how to change the position of the button in the flutter - flutter

I have a problem, it's not difficult, but I can't solve it. I have a task book program. At the top is the word "task", this word is in the middle as needed. But there is also a button (add). The problem is that I can't put it closer to the center, to the word "task"! I'll be grateful if someone can help me move this button to the center to the level of the word "task"
My code :
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 40.0),
child: Text(("Tasks"),
style: TextStyle(fontSize: 70.0,
color: Colors.black,
fontWeight: FontWeight.bold)),
)
),
Expanded(
child: FlatButton(
textColor: Colors.black,
color: Colors.white12,
child: Text('+',style: TextStyle(fontSize: 70.0,
color: Colors.black,
)),
onPressed: () {
if (textController.text.isNotEmpty) {
WidgetList.add(
new ListItem(textController.text, false));
setState(() {
valText = true;
textController.clear();
});
}
else
{
setState(() {
valText = false;
});
}
},
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
),)
],
),
),

Try to not use FlatButton cause' it is deprecated, and as you use an icon to create a button, use IconButton instead :
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, // this is to center both
children: <Widget>[
const Text(
"Tasks",
style: TextStyle(
fontSize: 24.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
IconButton(
color: Colors.black,
iconSize: 28,
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
icon: const Icon(Icons.add_outlined),
onPressed: () {},
)
],
),
),
Ok, the contraints in the IconButton, in less words it helps you to be close between the Text and the Icon and delete the padding (but not all), aaaand if you add padding: EdgeInsets.zero, literally it deletes all the padding to zero. Try to add some padding, to fix the "closer"

Related

Place buttons tabs inside panel in SlidingUpPanel package flutter

How can I place some buttons to separate between tabs in a sliding up panel? Currently what I am trying to do is place them only when the slider is opened up, ohterwise the button tabs should dissapear. I am trying to controll this behavior with ternary operator and the variable:
PanelState == PanelState.OPEN ?
but it does not work for me. The row dissapear when I close the panel.
SlidingUpPanel(
body: Body()
backdropEnabled: true,
panelSnapping: true,
collapsed: ListTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
_pcBreedsGrouping.open();
},
child: const Text(
'Breeds',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
InkWell(
onTap: () {
_pcBreedsGrouping.open();
},
child: const Icon(
Icons.arrow_drop_down,
color: Colors.black,
size: 30,
),
),
],
),
),
minHeight: MediaQuery.of(context).size.height * 0.08,
controller: _pcBreedsGrouping,
defaultPanelState: PanelState.CLOSED,
panel: Positioned(
child: Stack(
children: [
PanelState == PanelState.OPEN
? Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Breeds',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
InkWell(
onTap: () => _pcBreedsGrouping.close(),
child: const Icon(
Icons.arrow_drop_up,
color: Colors.black,
size: 30,
),
),
],
)
: Container(),
Visually, the panel is like this right now and I drawed what I am trying in red:
When I close the panel I would like it to be how it is right now, without the buttons, but I do not know how to make them dissapear when is closed:
What I am trying to accomplish:

Dynamically adjust text size in buttons inside Row

I am using localization to support multiple languages in my app. This results in having text in buttons with different length. So I need to have it being responsive.
I have two buttons in a Row(). I want to adjust the textsize inside these buttons so they never produce any overflow. Currently it looks like this in some languages:
I tried using auto_size_text with no success.
This is my code for the dialog:
return Dialog(
backgroundColor: Colors.transparent,
elevation: 0,
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: kIsWeb ? 40.w : 100.w,
color: Theme.of(context).dialogBackgroundColor,
padding: EdgeInsets.all(15.sp),
child: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
side: BorderSide(width: 2, color: Theme.of(context).primaryColor),
primary: Colors.black54),
onPressed: () {
Navigator.of(context).pop();
},
child: Text(AppLocalizations.of(context)!.joinGameDialogCancelButton,
style: TextStyle(fontSize: kIsWeb ? 4.sp : 12.sp)),
),
ElevatedButton(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
backgroundColor: Theme.of(context).primaryColor,
primary: Colors.white),
onPressed: () async {
if (formKey.currentState!.validate()) {
Navigator.of(context).pop();
widget.onFinished(nameController.text.trim());
}
},
child: AutoSizeText(
AppLocalizations.of(context)!.joinGameDialogJoinButton,
style: TextStyle(fontSize: kIsWeb ? 4.sp : 14.sp),
overflow: TextOverflow.clip,
stepGranularity: 1,
maxLines: 1,
)
),
],
),
Padding(padding: EdgeInsets.only(top: 15.sp)),
Text("some eula text"),
]))
],
),
)));
You can use FittedBox Widget
FittedBox(
fit: BoxFit.scaleDown,
child: Text(
"Your Text Here",
maxLines: 1,
),
),
You can use TextPainter combined without layoutBuilder to determine if the text has overflowed or not, then dynamically resize the text to fit.
Wrapping in a layoutBuilder will determine how much space is available. The textPainter will simulate the rendering of the text and tell you if it has overflowed.
You can save your text size in a variable within the widget state, then decrement the textSize and call setState until the text fits.
See this similar question: How to check if Flutter Text widget was overflowed
Ok, here's what I used: I do not have a mobile device to test it, so I used Windows (but I guess this should not be a problem). In this way, the text gets cut off instead of getting an overflow when it can't get smaller:
return Dialog(
backgroundColor: Colors.transparent,
elevation: 0,
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
//width: 100,
color: Theme.of(context).dialogBackgroundColor,
padding: const EdgeInsets.all(15),
child: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
side: BorderSide(width: 2, color: Theme.of(context).primaryColor),
primary: Colors.black54),
onPressed: () {
Navigator.of(context).pop();
},
child: const Text("weerwerewrweee", style: TextStyle(fontSize: 12)),
),
Expanded(
child: ElevatedButton(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
backgroundColor: Theme.of(context).primaryColor,
primary: Colors.white),
onPressed: () async {
// if (formKey.currentState!.validate()) {
// Navigator.of(context).pop();
// widget.onFinished(nameController.text.trim());
// }
},
child: const AutoSizeText(
"AppLocalizations.of(context)!.joinGameDialogJoinButton,",
style: TextStyle(fontSize: 14),
overflow: TextOverflow.clip,
stepGranularity: 1,
minFontSize: 1,
maxLines: 1,
)),
),
],
),
const Padding(padding: EdgeInsets.only(top: 15)),
const Text("some eula text"),
]))
],
),
)));
The difference with the original code should be only these:
I removed the container width because on Windows it was really too small to test
I wrapped the ElevatedButton in an Expanded following some auto_size_text suggestion
I changed the minFontSize to 1 (obviously too low, but useful for testing)
I put some random texts in the buttons, leaving the second one very long
I removed the onPressed argument just for testing
This is what I got:
big window
small window
The minimum font size must be adjusted, but I think that there's no way to have a readable text AND having maxLines: 1. You probably must choose one of them, or settle for a very small text.
EDIT:
here's how it looks with maxLines: 2:
EDIT 2:
The trick using an empty Expanded to keep the button separated and avoiding a full-width second button:
[...]
const Expanded(child: Text('')),
Expanded(
child: ElevatedButton(
[...]
Result, with short text in the second button:
Please look into the answer i have added spacer() for in between space
Dialog(
backgroundColor: Colors.transparent,
elevation: 0,
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
//width: 100,
color: Theme.of(context).dialogBackgroundColor,
padding: const EdgeInsets.all(15),
child: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
side: BorderSide(width: 2, color: Theme.of(context).primaryColor),
primary: Colors.black54),
onPressed: () {
Navigator.of(context).pop();
},
child: const Text("weerwerewrweee", style: TextStyle(fontSize: 12)),
),
Spacer(),
Expanded(
flex: 3,
child: ElevatedButton(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
backgroundColor: Theme.of(context).primaryColor,
primary: Colors.white),
onPressed: () async {
// if (formKey.currentState!.validate()) {
// Navigator.of(context).pop();
// widget.onFinished(nameController.text.trim());
// }
},
child: const Text(
"TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest",
style: TextStyle(fontSize: 14),
overflow: TextOverflow.clip,
)),
),
],
),
const Padding(padding: EdgeInsets.only(top: 15)),
const Text("some eula text"),
]))
],
),
)))
SizedBox is used for this condition only.
You can use sizedbox to size any of the Widget.
In your case,
Try with this code -
class CustomButton extends StatelessWidget {
CustomButton();
#override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.transparent,
elevation: 0,
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
color: Theme.of(context).dialogBackgroundColor,
padding: EdgeInsets.all(5),
child: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 80,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(20.0)),
side: BorderSide(
width: 2,
color: Theme.of(context).primaryColor),
primary: Colors.black54),
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Raushan is flutter developer",
style: TextStyle(fontSize: 12)),
),
),
SizedBox(
width: 80,
child: ElevatedButton(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(20.0)),
backgroundColor:
Theme.of(context).primaryColor,
primary: Colors.white),
onPressed: () async {},
child: Text("Raushan is flutter developer",
style: TextStyle(fontSize: 12)),
),
)
],
),
Padding(padding: EdgeInsets.only(top: 15)),
Text("some eula text"),
]))
],
),
)));
}
}
I think this will fix your issue.
No need of using any dependency
Use custom class AdaptableText in your project.
adaptable_text.dart
import 'package:flutter/cupertino.dart';
class AdaptableText extends StatelessWidget {
final String text;
final TextStyle? style;
final TextAlign textAlign;
final TextDirection textDirection;
final double minimumFontScale;
final TextOverflow textOverflow;
const AdaptableText(this.text,
{this.style,
this.textAlign = TextAlign.left,
this.textDirection = TextDirection.ltr,
this.minimumFontScale = 0.5,
this.textOverflow = TextOverflow.ellipsis,
Key? key})
: super(key: key);
#override
Widget build(BuildContext context) {
TextPainter _painter = TextPainter(
text: TextSpan(text: this.text, style: this.style),
textAlign: this.textAlign,
textScaleFactor: 1,
maxLines: 100,
textDirection: this.textDirection);
return LayoutBuilder(
builder: (context, constraints) {
_painter.layout(maxWidth: constraints.maxWidth);
double textScaleFactor = 1;
if (_painter.height > constraints.maxHeight) { //
print('${_painter.size}');
_painter.textScaleFactor = minimumFontScale;
_painter.layout(maxWidth: constraints.maxWidth);
print('${_painter.size}');
if (_painter.height > constraints.maxHeight) { //
//even minimum does not fit render it with minimum size
print("Using minimum set font");
textScaleFactor = minimumFontScale;
} else if (minimumFontScale < 1) {
//binary search for valid Scale factor
int h = 100;
int l = (minimumFontScale * 100).toInt();
while (h > l) {
int mid = (l + (h - l) / 2).toInt();
double newScale = mid.toDouble()/100.0;
_painter.textScaleFactor = newScale;
_painter.layout(maxWidth: constraints.maxWidth);
if (_painter.height > constraints.maxHeight) { //
h = mid - 1;
} else {
l = mid + 1;
}
if (h <= l) {
print('${_painter.size}');
textScaleFactor = newScale - 0.01;
_painter.textScaleFactor = newScale;
_painter.layout(maxWidth: constraints.maxWidth);
break;
}
}
}
}
return Text(
this.text,
style: this.style,
textAlign: this.textAlign,
textDirection: this.textDirection,
textScaleFactor: textScaleFactor,
maxLines: 100,
overflow: textOverflow,
);
},
);
}
}
Now use this class
Container(
width: 250,
height: 20,
color: Colors.green,
child: AdaptableText(mediumSizeText, style: const TextStyle()),
),
Here i am also showing the difference between normal text, text inside size box and adaptive text
return Scaffold(
appBar: AppBar(
title: const Text('ExpandableText'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text('Normal Text'),
Text(mediumSizeText),
const SizedBox(
height: 20,
),
const Text('Container(250*20) Normal Text:'),
Container(
width: 250,
height: 20,
color: Colors.green,
child: Text(
mediumSizeText,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(
height: 20,
),
const Text('Container(250*20) => sizebox => Text:'),
Container(
width: 250,
height: 20,
color: Colors.green,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
mediumSizeText,
maxLines: 100,
),
),
),
const Text('Container(250*20) => AdaptableText => Text:'),
Container(
width: 250,
height: 20,
color: Colors.green,
child: AdaptableText(mediumSizeText, style: const TextStyle()),
),
],
),
);
Here is the result:

Error: The method 'raisedButton' isn't defined for the class '_PomodoroState'

I'm currently doing a flutter tutorial in android studio and I have this issue,
I tried to create a class, tried to become it a variable, but no luck, also I named a file “raised_button.dart” and use the stful widget to see if it works but it doesn't work
This is my code:
import 'package:flutter/material.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'dart:async';
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Pomodoro(),
));
class Pomodoro extends StatefulWidget {
const Pomodoro({Key? key}) : super(key: key);
#override
State<Pomodoro> createState() => _PomodoroState();
}
class _PomodoroState extends State<Pomodoro> {
double percent = 0;
static int TimeInMinut = 240;
int TimeInSec = TimeInMinut * 60;
late Timer timer;
_StartTimer(){
TimeInMinut = 240;
int Time = TimeInMinut *60;
double SecPercent = (Time/100);
timer = Timer.periodic(Duration(seconds:1), (timer) {
setState((){
if(Time > 0){
Time--;
if(Time % 60 ==0){
TimeInMinut --;
}if(Time % SecPercent == 0){
if(percent <1){
percent += 0.01;
}else{
percent = 1;
}
}
}else{
percent = 0;
TimeInMinut = 240;
timer.cancel();
}
});
});
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.orangeAccent, Colors.redAccent],
begin: FractionalOffset(0.5,1)
)
),
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 25.0),
child: Text(
"Pomodoro Clock",
style: TextStyle(
color: Colors.white,
fontSize: 40.0
),
),
),
Expanded(
child: CircularPercentIndicator(
percent: percent,
animation: true,
animateFromLastPercent: true,
radius: 150.0,
lineWidth: 20.0,
progressColor: Colors.white,
center: Text(
"$TimeInMinut",
style: TextStyle(
color: Colors.white,
fontSize: 80.0
),
),
),
),
SizedBox(height: 10.0,),
Expanded(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topRight: Radius.circular(30.0),topLeft: Radius.circular(30.0))
),
child: Padding(
padding: EdgeInsets.only(top: 30.0, left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Text(
"Focus Time",
style: TextStyle(
fontSize: 20.0,
),
),
SizedBox(height: 10.0,),
Text(
"240",
style: TextStyle(
fontSize: 50.0
),
),
]
),
),
Expanded(
child: Column(
children: <Widget>[
Text(
"Pause Time",
style: TextStyle(
fontSize: 20.0,
),
),
SizedBox(height: 10.0,),
Text(
"20",
style: TextStyle(
fontSize: 50.0
),
),
]
),
)
],
)
),
Padding(
padding: EdgeInsets.symmetric(vertical: 28.0),
child: raisedButton(
onPressed: _StartTimer,
color: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0),
),
child: Padding(
padding: EdgeInsets.all(20.0),
child: Text("Start focusing",
style: TextStyle(
color: Colors.white,
fontSize: 22.0
),
),
)
),
)
],
)
),
),
),
],
),
),
),
);
}
}
and this what is shows on terminal
lib/main.dart:151:38: Error: The method 'raisedButton' isn't defined for the class '_PomodoroState'.
- '_PomodoroState' is from 'package:pomodoris/main.dart' ('lib/main.dart').
Try correcting the name to the name of an existing method, or defining a method named 'raisedButton'.
child: raisedButton(
What should I do in that particular case?
Thank you in advance.
Capitalize the R. It's RaisedButton, not raisedButton.
However, RaisedButton is depricated. Instead of
raisedButton(
onPressed: _StartTimer,
color: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0),
),
child: Padding(
you want to use ElevatedButton. You also need to move your styling to the new style property, where you pass the color etc. into ElevatedButton.styleFrom() constructor.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0),
),
),
onPressed: _StartTimer,
child: Padding(
However...
This look is also depricated according to the Material Guidelines that Flutter follows. See how to make buttons look nice and modern here: https://material.io/components/buttons
All of the names are also the names of the widgets in Flutter. If you get stuck there, feel free to ask again!
**RaisedButton is deprecated on the Latest flutter version. You can replace RaisedButton with ElevatedButton **
ElevatedButton(
child: Text('ElevatedButton'))
RaisedButton is no longer use by Flutter new versions
instead you can use an Elevated button
ElevatedButton(
onPressed: () {
print('login clicked');
},
child: Text(
'Login',
style: TextStyle(fontSize: 18.0, fontFamily: "Brand Bold"),
))

How to remove specific Row widget on action

How can I remove specific Row in my screen in Flutter Web Page?
I have 2 Rows in StatefulWidget "EditForm2". Both rows have Text, TextFormField and also Button to remove whole row.
What is a good way to achieve this? I assume that I have to use setstate() method and removeAt() on
Row table, but I don't know how to use this.
I want to make dynamic form where user can delete and add input controls.
import 'package:flutter/material.dart';
class EditForm2 extends StatefulWidget {
#override
_EditForm2State createState() => _EditForm2State();
}
class _EditForm2State extends State<EditForm2> {
var Rows = <Row>[];
Row RowFsLink;
Row RowGeoInfo;
#override
Widget build(BuildContext context) {
///first Row
RowFsLink = new Row(children: [
Expanded(
flex: 3,
child: Container(
margin: const EdgeInsets.only(left: 30.0, right: 30.0),
child: Text('Link',
style: TextStyle(
color: Colors.black54,
fontSize: 20.0,
letterSpacing: 0,
fontWeight: FontWeight.normal,
)),
),
),
Expanded(
flex: 6,
child: Container(
margin: const EdgeInsets.only(right: 30.0),
child: TextFormField(initialValue: 'test link'))),
Container(
margin: const EdgeInsets.only(right: 30.0),
child: Ink(
decoration: ShapeDecoration(
color: Colors.red,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(
Icons.remove,
color: Colors.white,
),
onPressed: () {},
),
),
),
]);
Rows.add(RowFsLink);
///second Row
RowGeoInfo = new Row(children: [
Expanded(
flex: 3,
child: Container(
margin: const EdgeInsets.only(left: 30.0, right: 30.0, bottom: 50),
child: Text('Geo',
style: TextStyle(
color: Colors.black54,
fontSize: 20.0,
letterSpacing: 0,
fontWeight: FontWeight.normal,
)),
),
),
Expanded(
flex: 6,
child: Container(
margin: const EdgeInsets.only(right: 30.0, bottom: 50),
child: TextFormField(initialValue: '0.50;0.44'))),
Container(
margin: const EdgeInsets.only(right: 30.0),
child: Ink(
decoration: ShapeDecoration(
color: Colors.red,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(
Icons.remove,
color: Colors.white,
),
onPressed: () {},
),
),
),
]);
Rows.add(RowGeoInfo);
return Column(children: this.Rows);
}
}
Check the state variable isVisible before calling the Rows.add method:
var _isVisible = true;
...
onPressed: () {
setState(() {
_isVisible = false;
});
},
...
Inside the build method:
if (_isVisible) {
Rows.add(RowGeoInfo);
}
This will dynamically add / remove the row at each refresh. Everytime you call setState the page is refreshed.
First declare a bool variable. Inside the onPressed you want to change the variable on click, we wrap it in a setState so that the widgets rebuild themselves.
bool isVisible = false;
onPressed: () {
setState(() {
isVisible = true;
});
},
To hide or show the Row we simply do this.
(isVisible)? Row(children: [],) : Container()
This means that if isVisible = true we show the Row() if its false we show an empty container.

Rounded AppBar in Flutter with Back button

I created a custom rounded AppBar using a code found here, but with just a title in the center.
I wanted to add a backbutton in the top left corner inside AppBar and I tried nesting a button and the text in a Row, but the result is that neither the button or the text are shown. Any help?
Here the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class RoundedAppBar extends StatelessWidget implements PreferredSizeWidget {
String title;
RoundedAppBar(this.title);
#override
Widget build(BuildContext context) {
return PreferredSize(
child: LayoutBuilder(builder: (context, constraints) {
final width =
constraints.maxWidth * 16; //per modificare "rotondità" app Bar
return OverflowBox(
maxHeight: double.infinity,
maxWidth: double.infinity,
child: SizedBox(
height: width,
width: width,
child: Padding(
padding: EdgeInsets.only(
bottom: width / 2 - preferredSize.height / 2),
child: Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: const Color(0xff000350),
shape: BoxShape.circle,
),
child: Row(
children: [
Align(
alignment: Alignment.centerLeft,
child: IconButton(
color: Colors.black,
icon: Icon(Icons.chevron_left),
onPressed: () => Navigator.pop(context),
),
),
Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Conformity',
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.normal),
),
],
)),
),
),
);
}),
preferredSize: preferredSize);
}
#override
Size get preferredSize => Size.fromHeight(80);
EDIT:
Tried using ListTile as suggested, something happened but didn't work properly.
Here the result.
child: ListTile(
title: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Conformity',
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.normal),
),
leading: IconButton(
color: Colors.white,
icon: Icon(Icons.chevron_left),
onPressed: () => Navigator.pop(context),
),
),
EDIT:
I inserted your code as shown. With trial and error, using 35 as height I was able to see the title, but still no button.
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_buildBack(true, context),
Container(
height: 35,
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Conformity',
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.normal),
),
),
_buildBack(false, context),
],
and
Widget _buildBack(bool isPlaceHolder, BuildContext context) {
return Visibility(
child: InkWell(
child: Icon(
Icons.close,
size: 35,
),
onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: !isPlaceHolder,
);
}
and here the result
You can use a ListTile and use a IconButton as leading.
ListTile(
leading: IconButton(
icon: Icon(Icons.back),
title: '',
onPressed => Navigator.pop(context),
),
),
Another possibility I see:
As the child from the AppBar
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_buildBack(true, context),
Container(
height: height,
child: Text(
'$_title',
style: Theme.of(context).textTheme.headline2,
),
),
_buildBack(false, context),
],
),
In another place outside the builder.
Widget _buildBack(bool isPlaceHolder, Buildcontext context) {
return Visibility(
child: InkWell(
child: Icon(
Icons.close,
size: widget.height,
),
onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: !isPlaceHolder,
);
}}
Here there is again a row as you have tried it yourself, but this one is set up a little differently and an iconButton is built before and after the text, but so that the text remains in the center, the second one is made invisible,