How to create a Rounded edges for an Image in Flutter?

This Article is posted by seven.srikanth at 12/5/2018 4:54:05 PM



In this article, I'm going to show you how to get rounded edges for an image in flutter.
This is how the final output is going to look. You can see the image with rounded edges. 
First of all, take the below is a sample app which has an image with usual edges. 
And below is the code for it,
Note: In order for the below code to work for you, you need to add images to your project and reference that inside pubspec.yaml in assets session. 
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(30.0),
child: Image.asset(
'images/lake.jpg',
),
),
),
),
);
}
}
So, now in order to achieve rounded edges for your images, you are going to wrap your image inside a ClipRRect widget.
This is how you do it,
// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
// Uncomment lines 7 and 10 to view the visual layout at runtime.
//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
void main() {
//debugPaintSizeEnabled = true;
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(30.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
'images/lake.jpg',
),
)),
),
),
);
}
}
Hope this example is useful to you guys.
Thanks,
Srikanth

Tags: How to create a Rounded edges for an Image in Flutter?; ClipRRect widget example; images in flutter example;








0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.


© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com