Skip to content

Commit

Permalink
feat: lead e elementos de textos comuns
Browse files Browse the repository at this point in the history
  • Loading branch information
@vitoramaral10
vitoramaral10 committed Oct 25, 2022
1 parent 8af55f0 commit 4078fb1
Show file tree
Hide file tree
Showing 5 changed files with 208 additions and 32 deletions.
129 changes: 126 additions & 3 deletions example/lib/pages/content/typography_page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import 'package:flutter/material.dart';
import 'package:flutter_highlight/flutter_highlight.dart';
import 'package:flutter_highlight/themes/darcula.dart';
import 'package:flutter_highlight/themes/dracula.dart';
import 'package:flutter_highlight/themes/foundation.dart';
import 'package:get_bootstrap/components/table.dart';
import 'package:get_bootstrap/get_bootstrap.dart';
import 'package:flutter_highlight/themes/codepen-embed.dart';

import '../widgets/header_widget.dart';
import '../widgets/sidebar.dart';
Expand Down Expand Up @@ -278,13 +283,131 @@ class TypographyPage extends StatelessWidget {
const Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Text(
'Make a paragraph stand out by adding .lead.',
'Faça um parágrafo se destacar adicionando .lead.',
),
),
const BTCard(
BTCard(
footerBackground: BTColors.gray100,
body: Text(
'This is a lead paragraph. It stands out from regular paragraphs.',
'Este é um parágrafo inicial. Destaca-se de parágrafos regulares.',
style: GetBootstrap.typography.lead,
),
footer: HighlightView(
'Text(\n "This is a lead paragraph. It stands out from regular paragraphs.",\n style: GetBootstrap.typography.lead,\n),',
language: 'dart',
theme: foundationTheme,
padding: const EdgeInsets.all(8),
),
),
const SizedBox(
height: 32,
),
Text(
'Elementos de texto embutidos',
style: GetBootstrap.typography.headline2,
),
const Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Text(
'Estilização para elementos inline comuns.',
),
),
BTCard(
footerBackground: BTColors.gray100,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Esta linha mostra o texto padrão.',
),
const Text(
'Esta linha de texto deve ser tratada como texto excluído..',
style: TextStyle(
decoration: TextDecoration.lineThrough,
),
),
const Text(
'Esta linha de texto será renderizada como sublinhada.',
style: TextStyle(
decoration: TextDecoration.underline,
),
),
Text(
'Esta linha de texto deve ser tratada como letras miúdas .',
style: GetBootstrap.typography.small,
),
const Text(
'Esta linha renderizada como texto em negrito.',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
const Text(
'Esta linha renderizada como texto em itálico.',
style: TextStyle(
fontStyle: FontStyle.italic,
),
),
],
),
footer: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: HighlightView(
'Text("You can use the mark tag to highlight text."),',
language: 'dart',
theme: foundationTheme,
padding: const EdgeInsets.all(8),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: HighlightView(
'Text(\n "This line of text is meant to be treated as no longer accurate.",\n style: TextStyle(\n decoration: TextDecoration.lineThrough,\n ),\n),',
language: 'dart',
theme: foundationTheme,
padding: const EdgeInsets.all(8),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: HighlightView(
'Text(\n "This line of text will render as underlined.",\n style: TextStyle(\n decoration: TextDecoration.underline,\n ),\n),',
language: 'dart',
theme: foundationTheme,
padding: const EdgeInsets.all(8),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: HighlightView(
'Text(\n "This line of text is meant to be treated as fine print.",\n style: GetBootstrap.typography.small,\n),',
language: 'dart',
theme: foundationTheme,
padding: const EdgeInsets.all(8),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: HighlightView(
'Text(\n "This line rendered as bold text.",\n style: TextStyle(fontWeight: FontWeight.bold,),\n),',
language: 'dart',
theme: foundationTheme,
padding: const EdgeInsets.all(8),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: HighlightView(
'Text(\n "This line rendered as italicized text.",\n style: TextStyle(fontStyle: FontStyle.italic,),\n),',
language: 'dart',
theme: foundationTheme,
padding: const EdgeInsets.all(8),
),
),
],
),
),
],
Expand Down
14 changes: 14 additions & 0 deletions example/pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,13 @@ packages:
description: flutter
source: sdk
version: "0.0.0"
flutter_highlight:
dependency: "direct main"
description:
name: flutter_highlight
url: "https://pub.dartlang.org"
source: hosted
version: "0.7.0"
flutter_lints:
dependency: "direct dev"
description:
Expand Down Expand Up @@ -186,6 +193,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "3.0.1"
highlight:
dependency: transitive
description:
name: highlight
url: "https://pub.dartlang.org"
source: hosted
version: "0.7.0"
html:
dependency: transitive
description:
Expand Down
1 change: 1 addition & 0 deletions example/pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ dependencies:
cupertino_icons: ^1.0.5
flutter:
sdk: flutter
flutter_highlight: ^0.7.0
flutter_svg: ^1.1.6
font_awesome_flutter: ^10.2.1
get_bootstrap:
Expand Down
6 changes: 5 additions & 1 deletion lib/components/theme_data.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ class BootstrapThemeData {
thickness: 1,
space: 1,
),
textTheme: GoogleFonts.robotoTextTheme(),
textTheme: GoogleFonts.robotoTextTheme(
TextTheme(
bodyText2: GetBootstrap.typography.bodyText2
),
),
);

static ButtonStyle navLink({Color color = Colors.white}) {
Expand Down
90 changes: 62 additions & 28 deletions lib/core/typography.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../get_bootstrap.dart';

class BTTypography {
TextStyle? headline1;
TextStyle? headline2;
Expand All @@ -15,6 +17,10 @@ class BTTypography {
TextStyle? display5;
TextStyle? display6;
TextStyle? lead;
TextStyle? bodyText1;
TextStyle? bodyText2;
TextStyle? small;
TextStyle? highlight;

BTTypography({
this.headline1,
Expand All @@ -30,97 +36,125 @@ class BTTypography {
this.display5,
this.display6,
this.lead,
this.bodyText1,
this.bodyText2,
this.small,
this.highlight,
}) {
headline1 = GoogleFonts.roboto(
fontSize: 40,
fontWeight: FontWeight.w500,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
headline2 = const TextStyle(
headline2 = GoogleFonts.roboto(
fontSize: 32,
fontWeight: FontWeight.w500,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
headline3 = const TextStyle(
headline3 = GoogleFonts.roboto(
fontSize: 28,
fontWeight: FontWeight.w500,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
headline4 = const TextStyle(
headline4 = GoogleFonts.roboto(
fontSize: 24,
fontWeight: FontWeight.w500,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
headline5 = const TextStyle(
headline5 = GoogleFonts.roboto(
fontSize: 20,
fontWeight: FontWeight.w500,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
headline6 = const TextStyle(
headline6 = GoogleFonts.roboto(
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
display1 = const TextStyle(
display1 = GoogleFonts.roboto(
fontSize: 80,
fontWeight: FontWeight.w100,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
display2 = const TextStyle(
display2 = GoogleFonts.roboto(
fontSize: 72,
fontWeight: FontWeight.w100,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
display3 = const TextStyle(
display3 = GoogleFonts.roboto(
fontSize: 65,
fontWeight: FontWeight.w100,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
display4 = const TextStyle(
display4 = GoogleFonts.roboto(
fontSize: 56,
fontWeight: FontWeight.w100,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
display5 = const TextStyle(
display5 = GoogleFonts.roboto(
fontSize: 48,
fontWeight: FontWeight.w100,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
display6 = const TextStyle(
display6 = GoogleFonts.roboto(
fontSize: 40,
fontWeight: FontWeight.w100,
height: 1.2,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
lead = const TextStyle(
fontSize: 40,
fontWeight: FontWeight.w100,
height: 1.2,
lead = GoogleFonts.roboto(
fontSize: 20,
fontWeight: FontWeight.w300,
height: 1.5,
letterSpacing: 1,
color: BTColors.gray900,
);
bodyText1 = GoogleFonts.roboto(
fontSize: 20,
fontWeight: FontWeight.w300,
height: 1.5,
letterSpacing: 1,
color: Colors.black,
color: BTColors.gray900,
);
bodyText2 = GoogleFonts.roboto(
fontSize: 16,
fontWeight: FontWeight.w400,
height: 1.5,
color: BTColors.gray900,
);
highlight = GoogleFonts.robotoMono(
fontSize: 14,
fontWeight: FontWeight.w400,
color: BTColors.gray900,
);
small = GoogleFonts.roboto(
fontSize: 14,
fontWeight: FontWeight.w400,
height: 1.5,
color: BTColors.gray900,
);
}
}

0 comments on commit 4078fb1

Please sign in to comment.