> Carousel slider with rounded network image
class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
int _current = 0;
@override
Widget build(BuildContext context) {
Widget image_carousel = new Container(
height: 345.0,
child: CarouselSlider(
options: CarouselOptions(
height: 250,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 5),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: false,
onPageChanged: null,
scrollDirection: Axis.horizontal,
),
items: [
'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg'
].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
child: Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.amber,
boxShadow: [ //background color of box
BoxShadow(
color: Colors.black12,
blurRadius: 8.0, // soften the shadow
spreadRadius: 8.0, //extend the shadow
offset: Offset(
-15.0, // Move to right 10 horizontally
-15.0, // Move to bottom 10 Vertically
),
)
],
borderRadius: BorderRadius.all(Radius.circular(30.0)),
image:DecorationImage(
image: NetworkImage(i),
fit: BoxFit.fill
),
),
child: GestureDetector(
//child: Image.network(i, fit: BoxFit.fill ),
onTap: () {
// Navigator.push<Widget>(
// context,
// MaterialPageRoute(
// //builder: (context) => ImageScreen(i),
// ),
// );
})),
);
},
);
}).toList(),
));
return Column(
children: <Widget>[
image_carousel,
],
);
}
}
to use any shape in You'r Button make sure you perform all the code inside Button widget
**shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red) ),**
if you want make it Square used ` BorderRadius.circular(0.0), it automatically make into Square
the button like this`
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/spGWP.png
Here is the all source code for the give UI Screen
Scaffold(
backgroundColor: Color(0xFF8E44AD),
body: new Center(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
padding: new EdgeInsets.only(top: 92.0),
child: Text(
"Currency Converter",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Container(
margin: EdgeInsets.only(),
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "Amount",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "From",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "To",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
)),
),
),
SizedBox(height: 20.0),
MaterialButton(
height: 58,
minWidth: 340,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(12)),
onPressed: () {},
child: Text(
"CONVERT",
style: TextStyle(
fontSize: 24,
color: Colors.black,
),
),
color: Color(0xFFF7CA18),
),
],
),
),
),
);
