カテゴリー
Flutter

FlutterでCircle Buttonを作る

Material(
  shape: CircleBorder(
    side: BorderSide(color: Constants.lineColor, width: Constants.lineWidth),
  ),
  clipBehavior: Clip.hardEdge,
  color: Constants.appBackgroundColor,
  child: IconButton(
    padding: EdgeInsets.zero,
    onPressed: () {},
    iconSize: areaHeight*0.8,
    color: Constants.playButtonColor,
    icon: Icon(
      Icons.play_arrow_rounded,
    ),
  )
)
カテゴリー
Flutter

Flutterの最小実装

// This gives below error
// No Directionality widget found. RichText widgets require a Directionality widget ancestor. The specific widget that could not find a Directionality ancestor was: 
// RichText [RichText
// The ownership chain for the affected widget is: "RichText <- Text <- [root]"
// Typically, the Directionality widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree. It determines the ambient reading direction and is used, for example, to determine how to lay out text, how to interpret "start" and "end" values, and to resolve EdgeInsetDirectional, AlignmentDirectional, and other *Directional objects. See also: https://flutter.dev/docs/testing/errors

void main() => runApp(Text("Hello"));

so, below can be a minimum implementation of a Flutter application.

void main() {
  runApp(
    const Center(
      child: Text(
        "Hello world",
        textDirection: TextDirection.ltr,
    ),
  );
}

In the Flutter documentation:

The runApp() function takes the given Widget and makes it the root of the widget tree. この例ではCenterがroot.

In this example, the widget tree consists of two widgets, the Center widget and its child, the Text widget.

The framework forces the root widget to cover the screen, which means the text “Hello, world” ends up centered on screen. Flutterではroot widgetがscreen全体をcoverするので、”Hello World”はscreenのcenterに来る。

The text direction needs to be specified in this instance; when the MaterialApp widget is used, this is taken care of for you, as demonstrated later. root にCenter widgetを使う場合はtextDirection プロパティを指定する必要があるが、MatrialAppを使う場合は不要。

When writing an app, you’ll commonly author new widgets that are subclasses of either StatelessWidget or StatefulWidget, depending on whether your widget manages any state. 多くの場合StatelessWidgetもしくはStatefulWidget(選択はstateをどう管理するかによる)を継承してカスタムwidgetを作ることになる。

A widget’s main job is to implement a build() function, which describes the widget in terms of other, lower-level widgets. The framework builds those widgets in turn until the process bottoms out in widgets that represent the underlying RenderObject, which computes and describes the geometry of the widget.

in order to activate “hot reload”, embed a widget in the build method

void main() => runApp(MaterialApp(
  home: Home(),
));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          image: AssetImage("assets/girl.jpg"),
        ),
      ),
    );
  }
}

in order to let Flutter know where the assets directory is, write in pubspec.yaml the assets directory location from the root.

assets:
  - assets/