如何使图像背景成为表单登录背后的图像滑块
我想在我的登录页面中显示图像背景，例如cimb niaga mobile，在其中您可以在表单登录后面运行一个点指示器幻灯片。
I want like this image example
这是我的代码：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
enum AuthMode { LOGIN, SINGUP }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginPage(),
);
}
}
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
// To adjust the layout according to the screen size
// so that our layout remains responsive ,we need to
// calculate the screen height
double screenHeight;
// Set intial mode to login
AuthMode _authMode = AuthMode.LOGIN;
@override
Widget build(BuildContext context) {
screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
body: SingleChildScrollView(
child: Stack(
children: <Widget>[
lowerHalf(context),
upperHalf(context),
_authMode == AuthMode.LOGIN
? loginCard(context)
: singUpCard(context),
pageTitle(),
],
),
),
);
}
Widget loginCard(BuildContext context) {
return Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: screenHeight / 4),
padding: EdgeInsets.only(left: 10, right: 10),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 8,
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Text(
"Login",
style: TextStyle(
color: Colors.black,
fontSize: 28,
fontWeight: FontWeight.w600,
),
),
),
SizedBox(
height: 15,
),
TextFormField(
decoration: InputDecoration(
labelText: "Your Email", hasFloatingPlaceholder: true),
),
SizedBox(
height: 20,
),
TextFormField(
decoration: InputDecoration(
labelText: "Password", hasFloatingPlaceholder: true),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MaterialButton(
onPressed: () {},
child: Text("Forgot Password ?"),
),
Expanded(
child: Container(),
),
FlatButton(
child: Text("Login"),
color: Color(0xFF4B9DFE),
textColor: Colors.white,
padding: EdgeInsets.only(
left: 38, right: 38, top: 15, bottom: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
onPressed: () {},
)
],
)
],
),
),
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 40,
),
Text(
"Don't have an account ?",
style: TextStyle(color: Colors.grey),
),
FlatButton(
onPressed: () {
setState(() {
_authMode = AuthMode.SINGUP;
});
},
textColor: Colors.black87,
child: Text("Create Account"),
)
],
)
],
);
}
Widget upperHalf(BuildContext context) {
return Container(
height: screenHeight / 2,
child: Image.asset(
'assets/house.jpg',
fit: BoxFit.cover,
),
);
}
Widget lowerHalf(BuildContext context) {
return Align(
alignment: Alignment.bottomCenter,
child: Container(
height: screenHeight / 2,
color: Color(0xFFECF0F3),
),
);
}
}
这是我到目前为止发现的插件：
carousel_slider：^ 1.3.1 。但是我认为目的是不同的。
我知道如何显示图像，但是我无法使用上面的插件代替图像。
1 个答案:
答案 0 :(得分：0)
您可以使用carousel_slider堆叠登录表单
并使用“定位”小部件定位您的登录表单
您可以看到演示图片效果
完整的代码
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
final List<String> imgList = [
'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];
void main() => runApp(CarouselDemo());
final Widget placeholder = Container(color: Colors.grey);
final List child = map<Widget>(
imgList,
(index, i) {
return Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Stack(children: <Widget>[
Image.network(i, fit: BoxFit.cover, width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color.fromARGB(200, 0, 0, 0), Color.fromARGB(0, 0, 0, 0)],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
child: Text(
'No. $index image',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
]),
),
);
},
).toList();
List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}
class CarouselWithIndicator extends StatefulWidget {
@override
_CarouselWithIndicatorState createState() => _CarouselWithIndicatorState();
}
class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
int _current = 0;
@override
Widget build(BuildContext context) {
return Column(children: [
CarouselSlider(
items: child,
autoPlay: true,
enlargeCenterPage: true,
aspectRatio: 2.0,
onPageChanged: (index) {
setState(() {
_current = index;
});
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(
imgList,
(index, url) {
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == index
? Color.fromRGBO(0, 0, 0, 0.9)
: Color.fromRGBO(0, 0, 0, 0.4)),
);
},
),
),
]);
}
}
class CarouselDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Manually operated Carousel
final CarouselSlider manualCarouselDemo = CarouselSlider(
items: child,
autoPlay: false,
enlargeCenterPage: true,
viewportFraction: 0.9,
aspectRatio: 2.0,
);
//Auto playing carousel
final CarouselSlider autoPlayDemo = CarouselSlider(
viewportFraction: 0.9,
aspectRatio: 2.0,
autoPlay: true,
enlargeCenterPage: true,
items: imgList.map(
(url) {
return Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Image.network(
url,
fit: BoxFit.cover,
width: 1000.0,
),
),
);
},
).toList(),
);
//Button controlled carousel
Widget buttonDemo() {
final basicSlider = CarouselSlider(
items: child,
autoPlay: false,
enlargeCenterPage: true,
viewportFraction: 0.9,
aspectRatio: 2.0,
);
return Column(children: [
basicSlider,
Row(children: [
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0),
child: RaisedButton(
onPressed: () => basicSlider.previousPage(
duration: Duration(milliseconds: 300), curve: Curves.linear),
child: Text('prev slider'),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0),
child: RaisedButton(
onPressed: () => basicSlider.nextPage(
duration: Duration(milliseconds: 300), curve: Curves.linear),
child: Text('next slider'),
),
),
),
]),
]);
}
//Pages covers entire carousel
final CarouselSlider coverScreenExample = CarouselSlider(
viewportFraction: 1.0,
aspectRatio: 2.0,
autoPlay: false,
enlargeCenterPage: false,
items: map<Widget>(
imgList,
(index, i) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage(i), fit: BoxFit.cover),
),
);
},
),
);
//User input pauses carousels automatic playback
final CarouselSlider touchDetectionDemo = CarouselSlider(
viewportFraction: 0.9,
aspectRatio: 2.0,
autoPlay: true,
enlargeCenterPage: true,
pauseAutoPlayOnTouch: Duration(seconds: 3),
items: imgList.map(
(url) {
return Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Image.network(
url,
fit: BoxFit.cover,
width: 1000.0,
),
),
);
},
).toList(),
);
//Non-looping manual Carousel
final CarouselSlider nonLoopingCarousel = CarouselSlider(
items: child,
//scrollPhysics: BouncingScrollPhysics(),
enableInfiniteScroll: false,
autoPlay: false,
enlargeCenterPage: true,
viewportFraction: 0.9,
aspectRatio: 2.0,
);
//Vertical carousel
final CarouselSlider verticalScrollCarousel = CarouselSlider(
scrollDirection: Axis.vertical,
aspectRatio: 2.0,
autoPlay: true,
enlargeCenterPage: true,
viewportFraction: 0.9,
pauseAutoPlayOnTouch: Duration(seconds: 3),
items: imgList.map(
(url) {
return Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Image.network(
url,
fit: BoxFit.cover,
width: 1000.0,
),
),
);
},
).toList(),
);
//create full screen Carousel with context
CarouselSlider getFullScreenCarousel(BuildContext mediaContext) {
return CarouselSlider(
autoPlay: true,
viewportFraction: 1.0,
aspectRatio: MediaQuery.of(mediaContext).size.aspectRatio,
items: imgList.map(
(url) {
return Container(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(0.0)),
child: Image.network(
url,
fit: BoxFit.cover,
width: 1000.0,
),
),
);
},
).toList(),
);
}
return MaterialApp(
title: 'demo',
home: Scaffold(
appBar: AppBar(title: Text('Carousel slider demo')),
body: Stack(
children: <Widget>[
ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: [
Text('Manuell Carousel'),
manualCarouselDemo,
])),
Padding(
padding: EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: [
Text('Auto Playing Carousel'),
autoPlayDemo,
])),
Padding(
padding: EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: [
Text('Button Controlled Carousel'),
buttonDemo(),
])),
Padding(
padding: EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: [
Text('Full Screen Carousel'),
coverScreenExample,
])),
Padding(
padding: EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: [
Text('Carousel With Indecator'),
CarouselWithIndicator(),
])),
Padding(
padding: EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: [
Text('Pause When Touched Carousel'),
touchDetectionDemo,
])),
Padding(
padding: EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: [
Text('No infinity scroll carousel'),
nonLoopingCarousel,
])),
Padding(
padding: EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: [
Text('Vertical scroll carousel'),
verticalScrollCarousel,
])),
Padding(
padding: EdgeInsets.only(top: 15.0),
//Builder needed to provide mediaQuery context from material app
child: Builder(builder: (context) {
return Column(children: [
Text('Full screen carousel'),
getFullScreenCarousel(context),
]);
})),
],
),Positioned(
bottom: 48.0,
left: 10.0,
right: 10.0,
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Your Login Form",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
),
],
),
),
),],
),
));
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？