当前位置：首页 > article >正文

自定义widget

article 2025/7/3 9:28:45

1.编写自定义MyWidget

import 'package:flutter/material.dart';void main() => runApp(MyWidget());//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn  const Center(child: Text('Hello Flutter 666688169',textDirection: TextDirection.ltr,),);}}

效果：
在这里插入图片描述

2.添加样式

import 'package:flutter/material.dart';void main() => runApp(MyWidget());//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn  const Center(child: Text('Hello Flutter 88888',textDirection: TextDirection.ltr,style: TextStyle(fontSize: 38.0,fontWeight: FontWeight.bold,color: Colors.red),),);}}

效果：
在这里插入图片描述
3.创建一个MaterialApp

import 'package:flutter/material.dart';void main() => runApp(APP());class APP extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyWidget(),);}
}//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn  const Center(child: Text('Hello Flutter 88888',textDirection: TextDirection.ltr,style: TextStyle(fontSize: 38.0,fontWeight: FontWeight.bold,color: Colors.red),),);}}

效果
在这里插入图片描述
4.创建导航栏

import 'package:flutter/material.dart';void main() => runApp(APP());class APP extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('flutterDemo')),body: MyWidget(),),);}
}//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn  const Center(child: Text('Hello Flutter 88888',textDirection: TextDirection.ltr,style: TextStyle(fontSize: 38.0,fontWeight: FontWeight.bold,color: Colors.red),),);}}

效果：
在这里插入图片描述

5.修改导航栏主题色

import 'package:flutter/material.dart';void main() => runApp(APP());class APP extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('flutterDemo')),body: MyWidget(),),theme: ThemeData(primarySwatch: Colors.red));}
}//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn  const Center(child: Text('Hello Flutter 8',textDirection: TextDirection.ltr,style: TextStyle(fontSize: 38.0,fontWeight: FontWeight.bold,color: Colors.red),),);}}