Flutter 加载图片、网络圆形图片、圆角图片

最新推荐文章于 2024-04-18 09:13:40 发布

蓝枫amy

最新推荐文章于 2024-04-18 09:13:40 发布

阅读量1.7k

点赞数

分类专栏： Flutter 文章标签： Flutter

本文链接：https://blog.csdn.net/u014005316/article/details/99704060

版权

本文介绍了如何在Flutter中使用ClipOval组件创建圆形图片，同时也探讨了实现圆角图片的方法。

摘要由CSDN通过智能技术生成

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';
void main(){
  runApp(MyApp());
}
//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class  MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(
        primarySwatch: Colors.red
      ),
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      //定义一个容器Container
      child: Container(
        //加载网络图片
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          color: Colors.yello