#flutter #dart #responsive-design #flutter-layout #responsive
Вопрос:
Я хочу создать под верхней отзывчивой навигационной панелью
но проблема в том, что когда я изменяю его размер ElevatedButton , выход выдает мне ошибку переполнения, и когда я пытаюсь обернуть его гибким/расширенным виджетом, он заворачивает текст кнопки «выйти» в вертикальном направлении, как показано ниже,
и когда я уменьшу размер своего навбара больше,
это выдает ошибку переполнения, как я могу исправить эту проблему, я попытался разместить Spacer виджет, а также SizedBox между виджетами, но это ничего не дает
мое тело-эшафот:
body:
// this row is main body
Row(children: [
if (Responsive.isDesktop(context)) SideMenu(),
// this expanded is right side of sidemenu entire
Expanded(
// flex: 1,
child:
// this column is right side of sidemenu wrapper
Column(
children: [
// this row is for top navbar
if (Responsive.isDesktop(context))
Flexible(
child: Container(
alignment: Alignment.centerLeft,
width: width,
height: 60,
color: Colors.purple,
// padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
constraints: BoxConstraints(maxWidth: width),
child: Row(
// around ya even try karna baki h between will not work here
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Spacer(),
SizedBox(
width: 500,
height: 30,
child: CupertinoTextField(
// decoration: BoxDecoration(
// border: Border.all(
// color: Colors.red, // red as border color
// ),
// ),
cursorHeight: 22,
padding: EdgeInsets.only(bottom: 3, left: 5),
prefix: Row(children: [
SizedBox(
width: 10,
),
Icon(Icons.search),
Divider(
thickness: 2,
color: Colors.black,
)
]),
// prefixMode: OverlayVisibilityMode.always,
maxLines: 1,
maxLength: 150,
focusNode: _focusSearch,
cursorWidth: 1,
showCursor: true,
enableInteractiveSelection: true,
clearButtonMode: OverlayVisibilityMode.editing,
cursorColor: Colors.black,
enableSuggestions: true,
placeholder: "Fire Your Queries here Noobs... ",
onTap: () {},
// suffix: Row(children: [
// Icon(Icons.search),
// SizedBox(
// width: 10,
// )
// ]),
),
),
Spacer(),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.white,
textStyle:
TextStyle(fontWeight: FontWeight.bold)),
child: Text(
'Create',
style: TextStyle(color: Colors.black),
),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) =>
CreateQ(
user: _currentUser,
)))),
SizedBox(width: 20),
CircleAvatar(
radius: 24,
backgroundColor: Colors.black,
child: CircleAvatar(
foregroundImage: NetworkImage(
'myimage.jpg')),
),
SizedBox(width: 10),
Text(
'${_currentUser.email}',
style: TextStyle(
fontSize: 18,
),
),
SizedBox(width: 3),
Container(
child: IconButton(
icon: Icon(Icons.notifications_none_sharp),
iconSize: 35,
color: Colors.black,
// splashColor: Colors.red,
onPressed: () {},
),
),
SizedBox(width: 6),
_isSigningOut
? CircularProgressIndicator()
: Expanded(
child: OutlinedButton(
onPressed: () async {
setState(() {
_isSigningOut = true;
});
await FirebaseAuth.instance.signOut();
setState(() {
_isSigningOut = false;
});
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LoginPage(),
),
);
},
child: Flexible(
child: Text(
'Sign out',
style: TextStyle(color: Colors.black),
),
),
style: ElevatedButton.styleFrom(
primary: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
),
Container(width: 30),
],
),
),
),
Divider(
height: 2,
color: Colors.black,
thickness: 1.5,
),
// navbar code ends here below is for my feed section...
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(flex: 3, child: Text('mithson')),
Expanded(flex: 1, child: Text('abhi'))
],
)
// OutlinedButton(
// onPressed: () {
// js.context.callMethod('alertMessage',
// ['Flutter is calling upon JavaScript!']);
// },
// child: Text('callingJS')),
],
),
),
]));
здесь sidemenu-это мой пользовательский виджет, который я показываю, когда он находится на экране большого размера, и он будет отображаться в ящике при просмотре на мобильном устройстве также под моей разделительной частью, раздел для ленты, поэтому игнорируйте, что единственная важная часть для навигационной панели находится над разделителем
любая помощь приветствуется… спасибо,
Комментарии:
1. Добавьте свой фрагмент кода
2. Привет @RavindraS.Patil Я только что обновил свой пост