#flutter
#трепетание
Вопрос:
Я пытаюсь создать страницу входа в систему и помещаю весь текст, поданный в cardview. На данный момент у меня нет никаких проблем, но теперь я пытаюсь создать фон для cardview. Нравится это изображение:
Как вы можете видеть на этом изображении, есть синий фон, который я хочу сделать похожим в своем коде.Если кто-нибудь знает решение, помогите мне.Прошу прощения. возможно, вопрос повторялся, но я не мог его решить, несмотря на долгое время.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 180.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2.0),
),
elevation: 2,
// margin: EdgeInsets.all(19),
child: Center(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: Text('User Login Form',
style: TextStyle(fontSize: 21))),
Divider(),
Container(
margin: EdgeInsets.all(20),
child: TextField(
controller: emailController,
onChanged: (value) {
_myPreferences.user = value;
_myPreferences.commit();
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
),
)
),
Container(
margin: EdgeInsets.all(20),
child: TextField(
controller: passwordController,
onChanged: (value) {
_myPreferences.password = value;
_myPreferences.commit();
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User password',
),
)
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Padding(
padding: const EdgeInsets.all(2.0),),
// Divider(),
RaisedButton(
onPressed: userLogin,
color: Colors.amberAccent,
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(100, 18, 100, 18),
child: Text('Click Here To Login'),
),
Padding(
padding: const EdgeInsets.all(5.0),),
// Divider(),
FlatButton(
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(100, 18, 100, 18),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => RegisterUser()
),);
},
child: Text("New User click here",
),
),
],
),
Visibility(
visible: visible,
child: Container(
margin: EdgeInsets.only(bottom: 30),
child: CircularProgressIndicator()
)
),
],
),
)
)
)
);
}
Ответ №1:
Вы можете попробовать это…
Card(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2.0),
),
Но если вы хотите изменить весь фон, вы можете обернуть тело по центру и придать цвет таким же образом..
Комментарии:
1. Привет, братан: Как установить эту карту? Я установил is в up Scaffold, но я получаю такую ошибку .. если вы можете отредактировать мой код, это хорошо
2. @Mafo он просто пропускает второе закрытие) в конце.
Ответ №2:
Предполагая, что под CardView вы подразумеваете виджет Card.
У Card есть свойство с именем color , которое вы можете использовать для настройки цвета фона.
Card(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2.0),
),
elevation: 2,
child: ...
);
Если вы хотите, чтобы фон был таким же, как на изображении, тогда цвет задается не картой, а самим каркасом. Итак, что вы могли бы добавить в качестве основного виджета, затем добавить столбец с 2 блоками (один окрашен в синий цвет), а другой — неокрашенный, а затем добавить свою карточку.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Column(
children: [
Flexible(
flex: 1,
child: Container(color: Colors.blue),
),
Flexible(
flex: 2,
child: Container(),
)
],
),
SingleChildScrollView(
padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 180.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2.0),
),
elevation: 2,
// margin: EdgeInsets.all(19),
child:...
),
],
);
}
Ответ №3:
Вы можете попробовать это, просто скопируйте и вставьте приведенный ниже код:
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.width*1,
width: double.infinity,
color: Colors.blue,
),
Card(
margin: EdgeInsets.only(top: MediaQuery.of(context).size.width*0.8, left: 20, right: 20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20, left: 20, right: 20),
child: TextFormField(
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
hintText: 'Email',
hintStyle: TextStyle(
fontFamily: "Poppins",
fontSize: 16,
color: Colors.cyan,
)),
),
),
Container(
margin: EdgeInsets.only(bottom: 40, left: 20, right: 20),
child: TextFormField(
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
hintText: 'Email',
hintStyle: TextStyle(
fontFamily: "Poppins",
fontSize: 16,
color: Colors.cyan,
)),
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: MediaQuery.of(context).size.width*1.2, left: 25, right: 25),
width: MediaQuery.of(context).size.width,
height: 45,
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(
color: Colors.red,
),
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontFamily: "Poppins",
fontSize: 20,
),
textAlign: TextAlign.center,
),
),
],
),
),
);