#flutter #flutter-layout
Вопрос:
Я новичок в флаттере , я нахожу какое-то решение для кнопки фиксированного материала в нижней части страницы, я пробую нижнюю навигацию, но не работаю там, какое-либо решение для этого?
Спасибо
import 'dart:ui';
import 'package:crmapp/widgets/components/alert.dart';
import 'package:crmapp/widgets/theme/constants.dart';
import 'package:crmapp/widgets/theme/constants.dart';
import 'package:crmapp/widgets/theme/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SignUpScreen extends StatefulWidget {
@override
_SignUpScreenState createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State< SignUpScreen > {
//validation controller
TextEditingController fNameController = new TextEditingController();
TextEditingController lNameController = new TextEditingController();
TextEditingController nickNameController = new TextEditingController();
TextEditingController phoneController = new TextEditingController();
bool _isButtonEnabled = false;
//final _controller = TextEditingController();
bool isConfirm=false;
check (BuildContext context){
if(fNameController.text.isNotEmpty amp;amp;
lNameController.text.isNotEmpty amp;amp;
nickNameController.text.isNotEmpty amp;amp;
phoneController.text.isNotEmpty){
setState(() {
_isButtonEnabled = true;
});
} else {
setState(() {
_isButtonEnabled = false;
});
}
}
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
/* double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;*/
return Scaffold(
body: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
_signUp(),
],
),
),
);
}
Widget _signUp() {
return Container(
constraints: BoxConstraints.expand(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476),
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
),
),
child: Form(
key: formKey,
child: Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 36.0, horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Create Account",
style: TextStyle(
color: Colors.white,
fontSize: 34.0,fontFamily: "medium",
fontWeight: FontWeight.w800,
),
),
/* SizedBox(
height: 10.0,
),*/
/* Text(
"Enter to a beautiful world",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w300,
),
)*/
],
),
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello, sign up to",
style: TextStyle(
fontSize: 29,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
Text(
"continue",
style: TextStyle(
fontSize: 29,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
SizedBox(
height: 20.0,
),
Text(
'First Name',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextFormField(
/* keyboardType: TextInputType.emailAddress,*/
controller: fNameController,
onChanged: (val){
check(context);
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Last Name',
style:
TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 12.0,
),
TextField(
controller: lNameController,
onChanged: (val){
check(context);
},
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Nick Name',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextField(
/* keyboardType: TextInputType.emailAddress,*/
controller: nickNameController,
onChanged: (val){
check(context);
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/*prefixIcon: Icon(
Icons.people_outline_rounded,
color: Color(0xFFE1E8F7),
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Mobile Number',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextFormField(
controller: phoneController,
onChanged: (val){
check(context);
},
maxLength: 10,
/* validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},*/
keyboardType: TextInputType.phone,
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "077xxxxxxx",
),
),
SizedBox(
height: 20.0,
),
Container( alignment: Alignment.bottomCenter,
padding: EdgeInsets.symmetric(horizontal: 0),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
color: _isButtonEnabled ? Color(0xFF2A3476) : Color(0x201E1E99),
elevation: 0,
highlightElevation: 0,
child: Container(
child: Text(
"Next",
style: TextStyle(color: m_fillColor,fontSize: 18,fontWeight: FontWeight.w600 ,
fontFamily: "regular",),
),
),
),
),
],
),
),
/* Container(
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476)
])),
child: Text(
'Next',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),*/
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Already have an account?",
style: TextStyle(color: m_titleColor,fontWeight: FontWeight.normal, fontFamily: "regular")),
TextSpan(
text: " Sign in",
style: TextStyle(
color: Color(0xFF2A3476),
fontWeight: FontWeight.w600,
fontFamily: "medium")),
]),
)
],
), SizedBox(
height:100.0,
),
],
),
),
),
],
),
),
),
),
);
}
}
Комментарии:
1. Я не понимаю, чего вы хотите, вам нужна кнопка «Далее» в нижней части страницы или во всем контейнере регистрации?
2. @SajadAbdollahi На самом деле я хочу поместить кнопку «Материал» в нижней части страницы , ее положение должно быть фиксированным, и нужно прокручивать формы
Ответ №1:
Я думаю, что вы хотите поместить кнопку фиксированного материала в нижней части.Вы можете использовать плавающую кнопку действия, расположенную внутри виджета «Строительные леса».
floatingActionButton: FloatingActionButton(
elevation: 0.0,
child: new Icon(Icons.check),
backgroundColor: new Color(0xFFE57373),
onPressed: () {}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
Как вы можете видеть, я поместил их в ваш виджет «Эшафот» вот так.
class _SignUpScreenState extends State<SignUpScreen> {
//validation controller
TextEditingController fNameController = new TextEditingController();
TextEditingController lNameController = new TextEditingController();
TextEditingController nickNameController = new TextEditingController();
TextEditingController phoneController = new TextEditingController();
bool _isButtonEnabled = false;
//final _controller = TextEditingController();
bool isConfirm = false;
check(BuildContext context) {
if (fNameController.text.isNotEmpty amp;amp;
lNameController.text.isNotEmpty amp;amp;
nickNameController.text.isNotEmpty amp;amp;
phoneController.text.isNotEmpty) {
setState(() {
_isButtonEnabled = true;
});
} else {
setState(() {
_isButtonEnabled = false;
});
}
}
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
/* double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;*/
return Scaffold(
body: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
_signUp(),
],
),
),
floatingActionButton: FloatingActionButton(
elevation: 0.0,
child: new Icon(Icons.check),
backgroundColor: new Color(0xFFE57373),
onPressed: () {}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
Widget _signUp() {
return Container(
constraints: BoxConstraints.expand(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476),
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
),
),
child: Form(
key: formKey,
child: Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 36.0, horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Create Account",
style: TextStyle(
color: Colors.white,
fontSize: 34.0,
fontFamily: "medium",
fontWeight: FontWeight.w800,
),
),
/* SizedBox(
height: 10.0,
),*/
/* Text(
"Enter to a beautiful world",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w300,
),
)*/
],
),
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello, sign up to",
style: TextStyle(
fontSize: 29,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
Text(
"continue",
style: TextStyle(
fontSize: 29,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
SizedBox(
height: 20.0,
),
Text(
'First Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 12.0,
),
TextFormField(
/* keyboardType: TextInputType.emailAddress,*/
controller: fNameController,
onChanged: (val) {
check(context);
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/
),
),
SizedBox(
height: 20.0,
),
Text(
'Last Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 12.0,
),
TextField(
controller: lNameController,
onChanged: (val) {
check(context);
},
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/
),
),
SizedBox(
height: 20.0,
),
Text(
'Nick Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 12.0,
),
TextField(
/* keyboardType: TextInputType.emailAddress,*/
controller: nickNameController,
onChanged: (val) {
check(context);
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/*prefixIcon: Icon(
Icons.people_outline_rounded,
color: Color(0xFFE1E8F7),
)*/
),
),
SizedBox(
height: 20.0,
),
Text(
'Mobile Number',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 12.0,
),
TextFormField(
controller: phoneController,
onChanged: (val) {
check(context);
},
maxLength: 10,
/* validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},*/
keyboardType: TextInputType.phone,
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "077xxxxxxx",
),
),
SizedBox(
height: 20.0,
),
Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.symmetric(horizontal: 0),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context)
.requestFocus(FocusNode());
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0))),
color: _isButtonEnabled
? Color(0xFF2A3476)
: Color(0x201E1E99),
elevation: 0,
highlightElevation: 0,
child: Container(
child: Text(
"Next",
style: TextStyle(
color: Colors.grey,
fontSize: 18,
fontWeight: FontWeight.w600,
fontFamily: "regular",
),
),
),
),
),
],
),
),
/* Container(
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476)
])),
child: Text(
'Next',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),*/
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Already have an account?",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.normal,
fontFamily: "regular")),
TextSpan(
text: " Sign in",
style: TextStyle(
color: Color(0xFF2A3476),
fontWeight: FontWeight.w600,
fontFamily: "medium")),
]),
)
],
),
SizedBox(
height: 100.0,
),
],
),
),
),
],
),
),
),
),
);
}
}
Комментарии:
1. Я добавил, но ваше решение не может добавить мою проверку, можете ли вы поместить его с помощью моего кода
2. вы можете добавить кнопку «Далее» в качестве плавающей кнопки действия и добавить проверку с помощью клавиши формы вашей формы.
3. @Привет, он работает , у вас есть какие-нибудь идеи, как добавить RichText() в плавающую область?
4. Кнопка плавающего действия: Кнопка плавающего действия( высота: 0.0, дочерний элемент: Столбец( дочерние элементы: [ Значок(Значки.проверка,цвет:Цвета.черный), размерное поле(высота:10), Текст(«тест»,стиль:Стиль текста(цвет:Цвета.черный)), //Размерное поле(высота:30), ] ), Цвет фона: Цвета.белый, нажат: () {}), Вы можете попробовать это, чтобы добавить больше детей в эту плавающую область.
Ответ №2:
Существует несколько способов добиться одного и того же.
- Использование виджета Стека. Рассмотрим фрагмент кода, подобный приведенному ниже:
return Stack( children: <Widget>[ Positioned( child: SingleChildScrollView( child: Column( children: children ..add(Container( height: 56, // button height, so could scroll underlapping area )))), ), Positioned( child: Align( alignment: Alignment.bottomCenter, child: button, ), ) ], ); - Использование Расширенного Виджета. Рассмотрим фрагмент кода, подобный приведенному ниже:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My Layout', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Align Bottom Demo"), ), body: new Column(children: <Widget>[ Text("Text 1"), Text("Text 2"), Expanded( child: new Align( alignment: Alignment.bottomCenter, child: new Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Icon(Icons.star), new Text("Bottom Text") ], ))) ]), ); } }
Комментарии:
1. не работает в моем коде, можете ли вы добавить его в мой код