2021/2/28 : Flutter : Slider、RangeSlider、CupertinoSlider(Flutter 今週のウィジェット)について

 

//Slider,とりあえず動くサンプル
import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  double rating=40.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Column(
          mainAxisAlignment:MainAxisAlignment.center,
          children: [
            Text("${rating.round()}",style:TextStyle(fontSize:40.0,),),
            //↓Slider.adaptiveコンストラクタにするとiOSデバイス時に
            

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/26 Transformウィジェットについて。

 


1.Transform.rotateコンストラクタ

import 'dart:math';
import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child: Transform.rotate(
          angle:pi/8,
          child: Container(
            color:Colors.purpleAccent,
            width:100.0,
            height:100.0,
            child:Icon(Icons.recommend,size:50.0,),
          ),
        ),
      ),
    );
  }
}

: …

2021/2/25 Clip系ウィジェットについて

1.ClipOval

スタート地点

import 'package:flutter/material.dart';
const String imageUri='https://picsum.photos/id/237/200/300';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState 

2021/2/24 AnimatedBuilder classの訳

AnimatedBuilder class

一般的なアニメーションを構築するためのウィジェット。

buildメソッドの一部としてアニメーションを配置させたい(保持したい)ような、複雑なウィジェットにとって、AnimatedBuilderウィジェットが役に立ちます。

AnimatedBuilderウィジェットを使うことで、シンプルにウィジェットを構築し、それをbuilder関数に渡すことができます。

シンプルなケースで追加の状態(state)がない場合、AnimatedWidgetが適しているかもしれません。

 

 

 

 

参考

https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html

2021/2/23 CheckboxListTile(Flutter Widget of the Week)の訳

Whenever you accomplish something, it’s rewarding to be able to check it off.

完了時にチェックマークで外せると 満足感があるものですが

 

There’s never just one thing to do though,

すべきことは常にいくつもあるので

 

and these checkboxes usually come in a list.

チェックボックスは 大抵リストになります

 

One option is …

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(切り替え)スイッチのリストを素早く簡単に作成できたらいいのに」と言ったでしょう。…