Question

我想在登录页面中显示幻灯片图像，例如Spotify，在其中可以播放幻灯片图像以及用于登录或注册的按钮。

如何在下面的示例中管理幻灯片图像背景：

这是我到目前为止发现的插件：

carousel_pro：^ 1.0.0 但是我认为目的是不同的。

我知道如何显示图像，但是我无法使用上面的插件代替图像。这就是我现在使用图像作为背景的情况。

这是我的代码登录名：

final emailField = TextField(
  decoration: InputDecoration(
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      hintText: 'Email'
  ),
);

final passwordField = TextField(
  obscureText: true,
  style: style,
  decoration: InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
      hintText: "Password",
      border:
      OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);

final loginButon = Material(
  elevation: 5.0,
  borderRadius: BorderRadius.circular(30.0),
  //color: Color(0xff01A0C7),
  color: Colors.red,
  child: MaterialButton(
    minWidth: MediaQuery.of(context).size.width,
    padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
    onPressed: () {
      Navigator.pushAndRemoveUntil(
          context,
          MaterialPageRoute(
              builder: (context) => LandingPage()
          ),
          ModalRoute.withName("/home")
      );
    },
    child: Text("Login",
        textAlign: TextAlign.center,
        style: style.copyWith(
            color: Colors.white, fontWeight: FontWeight.bold)),
  ),
);

return Scaffold(
    body: SingleChildScrollView(
      child: Center(
        child: Container(
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.all(36.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 155.0,
                  child: Image.asset(
                    "assets/images/bank_banten_logo.png",
                    fit: BoxFit.contain,
                  ),
                ),
                SizedBox(height: 45.0),
                emailField,
                SizedBox(height: 25.0),
                passwordField,
                SizedBox(
                  height: 35.0,
                ),
                loginButon,
                SizedBox(
                  height: 15.0,
                ),
              ],
            ),
          ),
        ),
      ),
    )
);

非常感谢。

Answer 1

 new Swiper(
  itemBuilder: (BuildContext context, int index) {
  return new Image.network(
  "http://via.placeholder.com/288x188",
   fit: BoxFit.fill,
  );
},
itemCount: 10,
viewportFraction: 0.8,
scale: 0.9,
)

点击以下链接，了解如何使用Swiper

https://pub.dev/packages/flutter_swiper

Answer 2

似乎您应该使用

SizedBox(
  height: 150.0,
  width: 300.0,
  child: Carousel(
    images: [
      NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
      NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
      ExactAssetImage("assets/images/LaunchImage.jpg")
    ],
  )
),

您已经使用过吗？

登录时Flutter中的图像背景幻灯片

2 个答案: