演示
图片演示:
网页演示:链接
参考文章
- RichText 写个代码高亮组件 链接
使用到的类
类 | 说明 | 详细介绍 |
---|---|---|
RichText | ||
TextSpan | ||
DartSyntaxHighlighter |
1. 创建项目
flutter create example021_richtext
2. AS打开
3. 添加依赖、放入资源文件
pubspec.yaml
syntax_highlighter: ^0.1.1
4. 编写代码
main.dart
import 'package:flutter/material.dart';
import 'package:syntax_highlighter/syntax_highlighter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Syntax Highlighter Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Syntax Highlighter Example'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _exampleCode =
"class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState();}";
@override
Widget build(BuildContext context) {
final SyntaxHighlighterStyle style =
Theme.of(context).brightness == Brightness.dark
? SyntaxHighlighterStyle.darkThemeStyle()
: SyntaxHighlighterStyle.lightThemeStyle();
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: RichText(
text: TextSpan(
style: const TextStyle(fontFamily: 'monospace', fontSize: 10.0),
children: <TextSpan>[
DartSyntaxHighlighter(style).format(_exampleCode),
],
),
),
),
));
}
}
5. 调试运行
AS中先打开Android或者iOS模拟器,点运行按钮。
或在命令行中运行:
flutter run
6. 打包web
flutter build web
7.源码
https://gitee.com/ruik2080/example-flutter