Why default text widget is big and red ?
Kevin Segaud
Is it normal ?
here is the code :
import 'package:sky/widgets.dart';
import 'package:sky/painting.dart';
import 'package:sky/material.dart';
class MyToolBar extends StatelessComponent {
Widget build(BuildContext context) {
return new Container(
decoration: const BoxDecoration(
backgroundColor: const Color(0xFF00FFFF)
),
height: 56.0,
padding: const EdgeDims.symmetric(horizontal: 8.0),
child: new Row([
new NetworkImage(src: 'menu.png', width: 25.0, height: 25.0),
new Flexible(child: new Text('My awesome toolbar')),
new NetworkImage(src: 'search.png', width: 25.0, height: 25.0),
])
);
}
}
class Home extends StatelessComponent {
Widget build(BuildContext context) {
return new Center(child: new MyToolBar());
}
}
void main() {
runApp(new App(
title: 'Demo app',
routes: {
'/': (NavigatorState navigator, Route route) => new Home()
}
));
}
if i had a theme in my App() nothing change the Text is always red and big :/
and nothing appear in the logs
my version are :
sky-0.0.52
sky_engine-0.0.30
sky_services-0.0.30
sky_tools-0.0.15
Thanks
Ian Hickson
>
> Is it normal ?
>
> here is the code: [...]
> Widget build(BuildContext context) {
> return new Container(
> decoration: const BoxDecoration(
> backgroundColor: const Color(0xFF00FFFF)
> ),
> height: 56.0,
> padding: const EdgeDims.symmetric(horizontal: 8.0),
> child: new Row([
> new NetworkImage(src: 'menu.png', width: 25.0, height: 25.0),
> new Flexible(child: new Text('My awesome toolbar')),
> new NetworkImage(src: 'search.png', width: 25.0, height: 25.0),
> ])
> );
> }
so that if you forget to actually set a font explicitly, or forget to
provide an implicit context for text, you'll notice right away. As you
did. :-)
To fix it, either explicitly use a DefaultTextStyle, like this:
child: new DefaultTextStyle(
style: Theme.of(context).text.body1,
child: ...
);
...or explicitly set a style on the Text(), like this:
new Text('Hello World', style: Theme.of(context).text.body1)
...or use a widget that provides an opinion about the kind of text that
should be in it, for example ToolBar (uses Typography.white.title for its
'center' child), or Material (uses Theme.of(context).text.body1 for its
children), or Card (same), or Dialog (various fonts for different parts),
etc. In Material Design, you never see text outside one of these places,
so if you follow the Material Design guidelines, you shouldn't ever see
this default red text.
This is more confusing than it should be right now because we haven't
split out the parts of the widgets library that are focused on Material
Design from the parts of the widgets library that are lower level. The red
text comes from a default set by the "App" widget, which is part of the
Material Design widgets library. Maybe we should rename it MaterialApp.
Eventually I expect we'll have different widget libraries for different
families of widgets, and then it'll be more obvious that the red text
thing is specifically about catching bugs in Material apps as opposed to a
Flutter default.
HTH,
--
Ian Hickson U+1047E )\._.,--....,'``. fL
http://ln.hixie.ch/ U+263A /, _.. \ _\ ;`._ ,.
Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Kevin Segaud
Ian Hickson
>
> Ok so defining a theme in App don't set a default style for all the
> elements ?
have text.
FWIW, I noticed after my last e-mail that our tutorial is quite misleading
on this front, and filed a bug to improve it. Sorry about the confusion.
Kevin Segaud
Adam Barth
--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To post to this group, send email to flutt...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/8d4d50ca-5efc-4329-8c74-c7ac021d510b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.