Posted By
Bajarangi soft ,
Posted On 02-11-2020
Card With Background Image
Step 1:
The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.
Step 2:
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below
flutter:
assets:
- assets/images/
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.orange,
centerTitle: true,
title: Text('Card Background Image'),
),
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage('assets/images/img2.jpg'),
fit: BoxFit.cover,
),
),
),
Center(
child: Container(
height: 140,
child: Card(
margin: EdgeInsets.all(18),
elevation: 7.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text("Contrary to popular belief, Lorem Ipsum is not simply random text."),
),
),
),
),
),
],
),
);
}
}