【发布时间】：2021-06-09 12:28:57
【问题描述】：
所以我正在研究响应式 Flutter 布局，我认为一旦我为各自的设计尺寸显示不同的布局，我的有状态小部件就不会保留状态。例如在登录页面，当用户填写了用户名和密码并且他/她从桌面调整大小到移动/平板大小时，输入的信息会丢失，即重新显示布局时状态不保留，因此登录手机屏幕不保留桌面模式下输入的密码和用户名，请问怎么办？
【问题讨论】：
标签： flutter user-interface dart responsive
【发布时间】：2021-06-09 12:28:57
【问题描述】：
你有几个选择：
- 将您正在使用的 TextEditingController（和/或任何其他数据）存储在切换布局的小部件上方。
- 使用 GlobalKey 以便在更改布局时 Flutter 可以匹配小部件备份并保持其状态
【讨论】：
can you responsive this code
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:getwidget/components/carousel/gf_items_carousel.dart';
import 'package:gymApp/Dietician/dietician.dart';
import 'package:gymApp/FitnessCenter/fitnessCenter.dart';
import 'package:gymApp/FitnessCoach/fitnessCoach.dart';
import 'package:gymApp/FitnessTV/fitnessTV.dart';
import 'package:gymApp/profile.dart';
import 'package:responsive/responsive.dart';
class DashboardScreen extends StatefulWidget {
@override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
// final List<String> imageList = [
// "assets/banner-2.png",
// "assets/banner-2.png",
// "assets/banner-2.png",
// "assets/banner-2.png"
// ];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: SafeArea(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
height: 40.0,
child: Row(
children: <Widget>[
InkWell(
child: Image.asset(
'assets/user.png',
width: 40.0,
height: 40.0,
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileDash(),
),
);
},
),
SizedBox(
width: 16.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Hi, Amarjeet',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
)
],
),
),
SizedBox(
height: 50.0,
),
//////////////////////////// CAROUSEL SECTION //////////////////////////////////
Center(
child: CarouselSlider(
options: CarouselOptions(
height: 180.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 15 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
items: [
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(
"assets/banner-2.png",
),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(
"assets/banner.png",
),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(
"assets/banner-1.png",
),
fit: BoxFit.cover,
),
),
),
]),
),
SizedBox(
height: 30.0,
),
////////////////////////////// GRID CARDS ///////////////////////////////////////////
Container(
child: Expanded(
child: GridView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 16.0 / 12.0,
),
children: <Widget>[
Container(
child: InkWell(
child: Stack(
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Image.asset(
'assets/b1.png',
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25.0),
child: Container(
alignment: Alignment.bottomLeft,
child: Column(
children: <Widget>[
Container(
child: Text(
"FITNESS",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
// SizedBox(
// height: 10.0,
// ),
Container(
child: Text(
"CENTER",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
)
],
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FitnessCenter(),
),
);
},
),
),
Container(
child: InkWell(
child: Stack(
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Image.asset(
'assets/b2.png',
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25.0),
child: Container(
alignment: Alignment.bottomLeft,
child: Column(
children: <Widget>[
Container(
child: Text(
"DIETICIAN",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
// SizedBox(
// height: 10.0,
// ),
],
),
),
)
],
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FitnessDietician(),
),
);
},
),
),
Container(
child: InkWell(
child: Stack(
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Image.asset(
'assets/b3.png',
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25.0),
child: Container(
alignment: Alignment.bottomLeft,
child: Column(
children: <Widget>[
Container(
child: Text(
"FITNESS",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
// SizedBox(
// height: 10.0,
// ),
Container(
child: Text(
"COACH",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
)
],
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FitnessCoach(),
),
);
},
),
),
Container(
child: InkWell(
child: Stack(
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Image.asset(
'assets/b4.png',
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25.0),
child: Container(
alignment: Alignment.bottomLeft,
child: Column(
children: <Widget>[
Container(
child: Text(
"FITNESS-TV",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
// SizedBox(
// height: 10.0,
// ),
],
),
),
)
],
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FitnessTV(),
),
);
},
),
),
],
),
),
),
InkWell(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"FIT SHOP",
style: TextStyle(
color: Colors.black54,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 30.0,
),
Container(
alignment: Alignment.center,
child: Image.asset(
"assets/banner.png",
fit: BoxFit.cover,
),
),
],
),
),
onTap: () {},
),
SizedBox(
height: 50.0,
),
],
),
),
),
),
//////////////////////// BOTTOM BAR //////////////////////////////////
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
title: Text(
'HOME',
style: TextStyle(
fontSize: 15.0,
color: Colors.blue,
),
),
icon: ImageIcon(
AssetImage('assets/home.png'),
color: Colors.indigo[300],
size: 40.0,
),
),
BottomNavigationBarItem(
title: Text(
'MACEDON',
style: TextStyle(
fontSize: 15.0,
color: Colors.blue,
),
),
icon: ImageIcon(
AssetImage('assets/macedon.png'),
color: Colors.indigo[300],
size: 40.0,
),
),
BottomNavigationBarItem(
title: Text(
'DIETICIAN',
style: TextStyle(
fontSize: 15.0,
color: Colors.blue,
),
),
icon: ImageIcon(
AssetImage('assets/dietician.png'),
color: Colors.indigo[300],
size: 40.0,
),
),
BottomNavigationBarItem(
title: Text(
'COACH',
style: TextStyle(
fontSize: 15.0,
color: Colors.blue,
),
),
icon: ImageIcon(
AssetImage('assets/coach.png'),
color: Colors.indigo[300],
size: 40.0,
),
),
],
),
);
}
}
【讨论】：