タグ: Widget of the week

投稿日:

2021/4/24 : Flutter : Scrollbarウィジェットを使ってみる。

null safety article

Scrollbar（今週のウィジェット）

まずScorllbarを使うためにListViewを用意する。

//main.dart
import 'package:flutter/material.dart';
void main(){
  runApp(MaterialApp(home:MyApp(),),);
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(),
      body:ListView.builder(
        itemCount: 40,
        itemBuilder:(context,index){
          return SizedBox(
            height:70.0,
            child: ListTile(
              leading:const Icon(Icons.recommend),
              title: Text('Item $index'),
              onTap:
…
投稿日:

2021/2/28 Flutter : Draggable (Flutter Widget of the Week)の訳

There are a lot of UI patterns that involve dragging, like moving addresses around in an email or moving documents from one folder to another.

メール内のアドレスを移動したり、あるフォルダから別のフォルダにドキュメントを移動したりするなど、ドラッグを伴うUIパターンはたくさんあります。

 

If you’ve got a widget you want the user to drag around,
try …

投稿日:

2021/2/27 : Flutter : CupertinoActionSheetの訳など。

 

とりあえずCupertinoActionSheetを使うコードを書く。

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String str="スタート";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CASheet
…
投稿日:

2021/2/27 Flutter:ShaderMaskウィジェットについて

ShaderMasks are one of Flutter’s hidden gems.

ShaderMaskはFlutterの隠れた宝物の一つです。

 

ShaderMasks let you apply a shader to one or more widgets in the tree.

ShaderMaskはshaderをウィジェットツリー内の一つ、あるいは複数のウィジェットに適用することを可能にします。

 

Shaders are very flexible.

Shaderは非常に柔軟です。

 

In Flutter we can use them to apply gradients …

投稿日:

2021/2/26 Flutter : PageViewウィジェットについて

 

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(home:MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final PageController _pageCtr=PageController();

  @override
  void initState(){
    super.initState();
  }

  @override
     void dispose() {
       _pageCtr.dispose();
       super.dispose();
     }

  @override
  Widget
…
投稿日:

2021/2/23 SwitchListTile（今週のウィジェット）の訳

Take a moment to think back to the last time you looked at a settings page.

最後に設定ページを見たときのことを思い出してください。

 

Wow, you probably said to yourself I wish I could quickly and easily create a list of toggle switches like that.

「うわー」あなたはおそらくに「このようなtoggle(切り替え)スイッチのリストを素早く簡単に作成できたらいいのに」と言ったでしょう。…

投稿日:

2021/2/23 Widget of the Week – Flutter の SafeAreaの訳

On today’s devices, apps rarely get a neat little rectangle to run in.

今日のデバイスでは アプリを きれいな長方形画面だけで操作することは稀です。

 

Notification bars and controls can creep in,and rounded corners and notches nip at your content,complicating layouts.

通知バーとコントロールが忍び寄り、丸みを帯びた角とノッチがコンテンツを挟み、レイアウトが複雑になる可能性があります。

 

That’s why Flutter has SafeArea.…

投稿日:

2021/2/15 Align classの訳

Align class

子をそれ(Align)自体の中に配置し、オプションで子のサイズに基づいてサイズを変更するウィジェット。

工事中🏗

 

Being able to compose widgets together is one of Flutter’s most powerful features.

ウィジェットを一緒に構成(一緒に組み合わせて配置)できることは、Flutterの最も強力な機能の1つです。

But how can you specify how a child should be laid out or positioned inside its parent?

しかし、子ウィジェットを親ウィジェットの内部にどのようにレイアウトし、また、位置をどのように指定すれば良いでしょう？

 

For example, …

投稿日:

2021/2/10 Add a Drawer to a screenの訳

Add a Drawer to a screen

マテリアルデザインを使用するアプリでは、ナビゲーションに2つの主要なオプションがあります。

タブ(Tab)と(Drawer)ドロワーです。

タブを表示するのに十分なスペースがない場合、ドロワーは便利な代替手段を提供します。

Flutterで、DrawerウィジェットをScaffoldと組み合わせて使用して、MaterialDesignドロワーでレイアウトを作成します。 このレシピでは、次の手順を使用します。

  1. scaffoldを生成する。
  2. drawerを追加する。
  3. ドロワーにアイテムを追加する。
  4. プログラミングによりドロワーを閉じる。

1. Create a Scaffold

アプリにドロワーを追加するには、それをScaffoldウィジェットでラップします。

Scaffoldウィジェットは、マテリアルデザインガイドラインに準拠するアプリに一貫した視覚的構造を提供します。

また、ドロワー、AppBars、SnackBarsなどの特別なマテリアルデザインコンポーネントもサポートしています。

この例では、Drawer付きのScaffoldを作成します。

Scaffold(
  drawer: // Add a Drawer here in the next step.
);

2. Add a drawer

…
投稿日:

2020/10/17 Flutter : Work with tabsの訳

タブを利用は、マテリアルデザインガイドラインに従ったアプリの一般的なパターンです。Flutterにはマテリアルライブラリの一部として、タブレイアウトを生成する便利な方法が用意されています。

Cupertino appでタブを利用するには、Building a Cupertino app with Flutter コードラボを見てみましょう。

ここでは以下の手順でタブを使ったサンプルを見ていきます。

  1. TabControllerを生成する。
  2. タブを生成する。
  3. それぞれのタブに対応するコンテンツを生成する。

1.TabControllerを生成する。

タブを利用するためには、選択されているタブと、そのタブに対応するコンテンツを同期的に保持する必要があります。その仕事をするのがTabControllerクラスです。

TabControllerインスタンスを自分で生成する方法と、DefaultTabControllerウィジェットを利用して自動的に生成する方法があります。

DefaultTabControllerウィジェットはTabControllerを生成し、自身(DefaultTabControllerウィジェット)の子孫ウィジェットがそのTabControllerを使用できるようにするので、DefaultTabControllerウィジェットを利用するのはシンプルな選択肢です。

DefaultTabController(
  // lengthパラメータに、表示するタブの個数を指定する。
  length: 3,
  child: // 次のセクションで実装する。
);

2.タブを生成する。

特定のタブが選択されると、そのタブに対応するコンテンツを表示する必要があります。タブを生成するにはTabBarウィジェットを使います。このサンプルでは、三つのTabウィジェットを配置したTabBarウィジェットを生成し、それをAppBarウィジェット内に配置します。

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
…