開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

今回は、Flutterで展開・折りたたみ可能なAccordionを追加する方法を共有します。

方法 – 1

ExpansionTile()を使用する

            ExpansionTile(
              title: const Text("If you could live anywhere, where would it be? "),
              children: [
                Container(
                  color: Colors.black12,
                  padding:const EdgeInsets.all(20),
                  width: double.infinity,
                  child:  const Text("Answers for Question One"),
                )
              ],
            ),

ExpansionTileを使うと、Flutterで展開可能なAccordionや折りたたみ可能なAccordionを作ることができます。また、以下のように背景色を変更することができます。

            Card(
                color: Colors.blue[100],
                child:ExpansionTile(
                  title: const Text("What is your biggest fear?"),

                  children: [
                    Container(
                      color: Colors.black12,
                      padding:const EdgeInsets.all(20),
                      width: double.infinity,
                      child:  const Text("Answers for Question Two"),
                    )
                  ],
                )
            ),

方法 – 2

ExpansionPanelListとExpansionPanelを使用する

ExapnasionPanelの拡張状態リストを設定

List<bool> expanded = [false, true];

例の為、ExpansionPanelListの中にパネル2を作成し、最後のExapnasionPanelを展開するようにしたいので、trueに設定していきます。

ExpansionPanelList(
                expansionCallback: (panelIndex, isExpanded) {
                  setState(() {
                    expanded[panelIndex] = !isExpanded;
                  });
                },
                animationDuration: const Duration(seconds: 2),
                children:[
                  ExpansionPanel(
                      headerBuilder: (context, isOpen){
                        return const Padding(
                            padding: EdgeInsets.all(15),
                            child:Text("What motivates you to work hard?")
                        );
                      },
                      body: Container(
                        padding: const EdgeInsets.all(20),
                        color: Colors.redAccent[100],
                        width: double.infinity,
                        child: const Text("Answers for Question Three"),
                      ),
                      isExpanded: expanded[0]
                  ),

                  ExpansionPanel(
                      headerBuilder: (context, isOpen){
                        return const Padding(
                            padding: EdgeInsets.all(15),
                            child:Text("What did you want to be when you were small?")
                        );
                      },
                      body: Container(
                        padding: const EdgeInsets.all(20),
                        color: Colors.blueAccent[100],
                        width: double.infinity,
                        child: const Text("Answers for Question Four"),
                      ),
                      isExpanded: expanded[1]
                  )
                ]
            )

ということで、今回はこれで終わります。

金曜担当 – Ami

Tweet

Today, I would like to share about some general ways to free up disk space in Ubuntu. Let’s take a look.

1. Remove packages that are no longer required by the following command.

sudo apt-get autoremove

2. Uninstall unnecessary softwares from software centre.

3. Clean outdated packages by running the following command.

sudo apt-get autoclean

4. Remove the entire apt cache by this command.

sudo apt-get clean

5. Clean thumbnail cache

rm -rf ~/.cache/thumbnails/*

This is all for now. Hope you enjoy that.

By Asahi

Tweet

Adobe has announced that it will acquire collaborative design platform Figma for nearly $20 billion.

Dylan Field and Evan Wallace started working on Figma in 2012. Today, the app is popular with designers and developers and can be considered a competitor to Adobe XD which is a similar design tool for web and mobile apps.

Adobe believes that the combination of Adobe and Figma will push to a new era of co-creation.

The transaction is expected to close in 2023. Dylan Field will then continue to lead the Figma team, reporting to David Wadwani, President of Digital Media Business at Adobe.

You can see more detail here at Adobe news website.

Tweet

最近Flutterで仕事をすることになり
勉強したこと、調査されたことを共有したいと思います。

Flutterでテキストを音声に変換したりプログラムです。
さまざまな言語、音量、ピッチ、スピードなどを設定することができます。

今の例では、言語を英語に設定していますが、もし日本語にしたい場合は、以下のように設定することができます。

flutterTts.setLanguage("ja-JP")

利用するためには、まず pubspec.yaml ファイルにflutter_tts、このパッケージを追加する必要があります。

後、AndroidManifest.xmlファイルのqueries要素にTextToSpeech.Engine.INTENT_ACTION_TTS_SERVICEを追加する必要があります。

<queries>
   <intent>
       <action android:name="android.intent.action.TTS_SERVICE" />
   </intent>
</queries>
   <application

以下のパスを目的のファイルでインポートします。

import 'package:flutter_tts/flutter_tts.dart';

利用するには

FlutterTts ftts = FlutterTts();

再生するテキストを追加した後、テキストを音声に変換することができます。

var result = await ftts.speak("Hello there!");

言語、音声の大きさ、話すスピード、ツールのピッチなどを設定するには、以下の方法で出来ます。

await ftts.setLanguage("en-US");
await ftts.setSpeechRate(1.0); 
await ftts.setVolume(0.5); 
await ftts.setPitch(1);

以上だけです。

テストプログラムではボタンをタップした後、上記のプログラムを行うようにしています。

ElevatedButton(
  onPressed:() async {
        //
        ...
       //                  
     }, 
 child: Text("Text to Speech"))

ということで、今回はこれで終わります。

金曜担当 – Ami

Tweet

Today, I would like to share about a symfony component library to use OS level commands in PHP. This library will be useful in some cases that will need to work with OS level processes. Please check this library in the following link for more details.

https://symfony.com/doc/current/components/process.html

Hope you enjoy that library. This is all for now today.

By Asahi

Tweet